zoukankan      html  css  js  c++  java

  • 演练：使用属性自定义 DataGrid 控件

    演练：使用属性自定义 DataGrid 控件

    Silverlight
     
    此主题尚未评级 - 评价此主题
     

    Silverlight DataGrid 控件支持常用表格式设置选项，例如交替显示不同的行背景以及能够显示或隐藏表头、网格线和滚动条。 可以通过设置 DataGrid 属性来进行这些自定义。 属性可以在设计时在 XAML 中设置，也可以在运行时在过程代码中设置。

    本演练演示以下任务：

    • 创建数据对象的集合。

    • 创建用户界面以显示数据。

    • 设置列表的数据源。

    • 创建用于设置 DataGrid 选项的用户界面。

    • 添加过程代码以修改 DataGrid 属性。

    若要查看 DataGrid 控件的运行示例，请单击下面的链接。

    运行此示例

    您需要以下组件来完成本演练：

    • Silverlight 5 Beta.

    • 用于 Visual Studio 2010 的 Silverlight Tools.

    • Visual Studio 2010.

    可以从 Silverlight 下载站点 下载所有 Silverlight 软件。

    第一步是创建一个 Silverlight 项目。

    创建 Silverlight 项目

    • 使用 Visual Basic 或 Visual C# 新建一个名为 DGBasicCustomization 的 Silverlight 应用程序项目。 保持选中默认选项“在新网站中承载 Silverlight 应用程序”。 有关更多信息，请参见 如何创建新 Silverlight 项目。

    接下来创建要在 DataGrid 中显示的 Task 对象的集合。

    创建 Task 对象的集合

    1. 向 DGBasicCustomization 项目中添加一个名为 Task 的类。

    2. 向 Task 类中添加下面的代码。

      此代码包含 Task 类，该类表示要在 DataGrid 控件中显示的数据对象。

      C#
      VB
       
      public string Name { get; set; }
public DateTime DueDate { get; set; }
public bool Complete { get; set; }
public string Notes { get; set; }

    3. 打开 MainPage.xaml.vb 或 MainPage.xaml.cs。

    4. 在 MainPage 类构造函数的 InitializeComponent 方法的后面添加以下代码。

      此代码创建一个名为 taskList 的泛型 List<T>，并使用循环以 Task 对象填充集合。 然后将 taskList 设置为 DataGrid的 ItemsSource。

      C#
      VB
       
      // Create a list to store task data.
List<Task> taskList = new List<Task>();
int itemsCount = 10;
// Generate some task data and add it to the task list.
for (int i = 1; i <= itemsCount; i++)
{
    taskList.Add(new Task()
    {
        Name = "Task " + i.ToString(),
        DueDate = DateTime.Now.AddDays(i),
        Complete = (i % 3 == 0),
        Notes = "Task " + i.ToString() + " is due on " 
              + DateTime.Now.AddDays(i) + ". Lorum ipsum..."
    });
}
this.dataGrid1.ItemsSource = taskList;

    接下来，通过向页面中添加 DataGrid 控件来创建任务列表的用户界面。

    创建任务列表的用户界面

    1. 在 DGBasicCustomization 项目中，添加一个对 System.Windows.Controls.Data 程序集的引用。 有关更多信息，请参见 如何：向页中添加 DataGrid 控件。

    2. 打开 MainPage.xaml。

    3. 在 <UserControl> 开始标记中添加下面的 XAML。

      此 XAML 将 sdk 前缀映射到 Silverlight SDK 命名空间，如 Silverlight 库的前缀和映射中所述。

      xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    4. 在 <UserControl> 开始标记中，将 Width 属性的值更改为 600，将 Height 属性的值更改为 700。

    5. 在 <UserControl> 开始标记之后添加下面的 XAML，从而替换现有的 <Grid> 标记。

      此 XAML 添加一个 StackPanel 以及一个名为 dataGrid1 的 DataGrid，前者用于布局目的，后者用于显示任务列表。

      XAML
       
      <StackPanel x:Name="LayoutRoot" Background="White" Margin="5">


...


    <sdk:DataGrid x:Name="dataGrid1" Height="350" Width="540" 
                   HorizontalAlignment="Left" >
    </sdk:DataGrid>
</StackPanel>

    6. 生成并运行此应用程序。

      当应用程序运行时，您将看到一个 DataGrid，它以其默认外观和行为显示 taskList 集合中的任务。

    接下来创建 DataGrid 选项的用户界面。

    创建 DataGrid 选项的用户界面

    1. 打开 MainPage.xaml。

    2. 在 <StackPanel> 开始标记之后添加下面的 XAML。

      此 XAML 用于添加选择控件，您将使用这些控件在运行时修改 DataGrid 的属性。

      XAML
       
      <StackPanel Margin="0,0,0,5">
    <StackPanel Orientation="Horizontal">
        <Border BorderBrush="Black" BorderThickness="1" Padding="3" Width="180">
            <StackPanel>
                <TextBlock Text="DataGrid Options" FontSize="12" />
                <CheckBox Content="Grid is read-only" 
                          Checked="cbReadOnly_Changed" Unchecked="cbReadOnly_Changed" />
                <CheckBox Content="Freeze first column" 
                          Checked="cbFreezeColumn_Changed" Unchecked="cbFreezeColumn_Changed"/>
                <CheckBox Content="Hide first column" 
                          Checked="cbHideColumn_Changed" Unchecked="cbHideColumn_Changed"/>
                <CheckBox Content="Single Row Selection"
                          Checked="cbSelectionMode_Changed" Unchecked="cbSelectionMode_Changed" />
                <TextBlock Text="Column Options" FontSize="12" />
                <CheckBox Content="Allow Column Reordering" IsChecked="true" 
                          Checked="cbColReorder_Changed" Unchecked="cbColReorder_Changed"/>
                <CheckBox Content="Allow Column Resizing" IsChecked="true"
                          Checked="cbColResize_Changed" Unchecked="cbColResize_Changed"/>
                <CheckBox Content="Allow Column Sorting" IsChecked="true"
                          Checked="cbColSort_Changed" Unchecked="cbColSort_Changed"/>
                <TextBlock Text="Scroll Bar Options" FontSize="12" />
                <CheckBox Content="Vertical Scroll Bars" IsThreeState="True" IsChecked="" 
                          Checked="cbVerticalScroll_Changed" Unchecked="cbVerticalScroll_Changed" 
                          Indeterminate="cbVerticalScroll_Changed" />
                <CheckBox Content="Horizontal Scroll Bars" IsThreeState="True" IsChecked=""
                          Checked="cbHorizontalScroll_Changed" Unchecked="cbHorizontalScroll_Changed" 
                          Indeterminate="cbHorizontalScroll_Changed"/>
            </StackPanel>
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Padding="3" Width="180">
            <StackPanel>
                <TextBlock Text="Alternating Row Background" FontSize="12" />
                <ComboBox SelectionChanged="cbAltRowBrush_SelectionChanged">
                    <ComboBoxItem Content="Default" IsSelected="True" />
                    <ComboBoxItem Content="Custom" />
                    <ComboBoxItem Content="Null" />
                </ComboBox>
                <TextBlock Text="Row Background" FontSize="12" />
                <ComboBox SelectionChanged="cbRowBrush_SelectionChanged">
                    <ComboBoxItem Content="Default" IsSelected="True" />
                    <ComboBoxItem Content="Custom" />
                    <ComboBoxItem Content="Null" />
                </ComboBox>
                <TextBlock Text="Header Visibility" FontSize="12" />
                <ComboBox SelectionChanged="cbHeaders_SelectionChanged">
                    <ComboBoxItem Content="All"/>
                    <ComboBoxItem Content="Column (Default)" IsSelected="True"/>
                    <ComboBoxItem Content="Row"/>
                    <ComboBoxItem Content="None"/>
                </ComboBox>
                <TextBlock Text="Grid Lines Visibility" FontSize="12" />
                <ComboBox SelectionChanged="cbGridLines_SelectionChanged">
                    <ComboBoxItem Content="All"/>
                    <ComboBoxItem Content="Vertical (Default)" IsSelected="True"/>
                    <ComboBoxItem Content="Horizontal"/>
                    <ComboBoxItem Content="None"/>
                </ComboBox>
                <TextBlock Text="Custom Grid Lines" FontSize="12" />
                <CheckBox Content="Vertical" 
                          Checked="cbCustomGridLineVert_Changed" 
                          Unchecked="cbCustomGridLineVert_Changed"/>
                <CheckBox Content="Horizontal" 
                          Checked="cbCustomGridLineHorz_Changed" 
                          Unchecked="cbCustomGridLineHorz_Changed"/>
            </StackPanel>
        </Border>
    </StackPanel>
</StackPanel>

    接下来，您将添加代码以处理对用户界面控件所做的更改以及设置 DataGrid 属性。

    在代码中设置 DataGrid 属性

    1. 打开 MainPage.xaml.vb 或 MainPage.xaml.cs。

    2. 在 MainPage 类构造函数之后，添加下面的代码。

      此代码将处理您在上一节中添加的 DataGrid 选项用户界面控件的更改事件。 当某个选项更改时，将设置相应的DataGrid 属性

      C#
      VB
       
      // READ ONLY
private void cbReadOnly_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
        this.dataGrid1.IsReadOnly = (bool)cb.IsChecked;
}
// FREEZE COLUMN
private void cbFreezeColumn_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.FrozenColumnCount = 1;
        else if (cb.IsChecked == false)
            this.dataGrid1.FrozenColumnCount = 0;
    }
}
// HIDE COLUMN
private void cbHideColumn_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.Columns[0].Visibility = Visibility.Collapsed;
        else if (cb.IsChecked == false)
            this.dataGrid1.Columns[0].Visibility = Visibility.Visible;
    }
}
// SELECTION MODE
private void cbSelectionMode_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.SelectionMode = DataGridSelectionMode.Single;
        else if (cb.IsChecked == false)
            this.dataGrid1.SelectionMode = DataGridSelectionMode.Extended;
    }
}
// COLUMN OPTIONS
private void cbColReorder_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
        this.dataGrid1.CanUserReorderColumns = (bool)cb.IsChecked;
}
private void cbColResize_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
        this.dataGrid1.CanUserResizeColumns = (bool)cb.IsChecked;
}
private void cbColSort_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
        this.dataGrid1.CanUserSortColumns = (bool)cb.IsChecked;
}
// SCROLL BARS VISIBILITY
private void cbVerticalScroll_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
        else if (cb.IsChecked == false)
            this.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
        else 
            this.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
    }
}
private void cbHorizontalScroll_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;
        else if (cb.IsChecked == false)
            this.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
        else 
            this.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
    }

}
// ROW BRUSH
private void cbAltRowBrush_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;

    if (this.dataGrid1 != null)
    {
        if (cbi.Content.ToString() == "Custom")
            this.dataGrid1.AlternatingRowBackground = new SolidColorBrush(Color.FromArgb(255, 130, 175, 200));
        else if (cbi.Content.ToString() == "Default")
            this.dataGrid1.AlternatingRowBackground = new SolidColorBrush(Color.FromArgb(37, 233, 238, 244));
        else if (cbi.Content.ToString() == "Null")
            this.dataGrid1.AlternatingRowBackground = null;
    }
}
private void cbRowBrush_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    if (this.dataGrid1 != null)
    {
        if (cbi.Content.ToString() == "Custom")
            this.dataGrid1.RowBackground = new SolidColorBrush(Color.FromArgb(255, 135, 185, 195));
        else if (cbi.Content.ToString() == "Default")
            this.dataGrid1.RowBackground = new SolidColorBrush(Color.FromArgb(00, 255, 255, 255));
        else if (cbi.Content.ToString() == "Null")
            this.dataGrid1.RowBackground = null;
    }
}
// HEADERS VISIBILITY
private void cbHeaders_SelectionChanged(object sender, RoutedEventArgs e)
{
    ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    if (this.dataGrid1 != null)
    {
        if (cbi.Content.ToString() == "All")
            this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.All;
        else if (cbi.Content.ToString() == "Column (Default)")
            this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.Column;
        else if (cbi.Content.ToString() == "Row")
            this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.Row;
        else
            this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.None;
    }

}
// GRIDLINES VISIBILITY
private void cbGridLines_SelectionChanged(object sender, RoutedEventArgs e)
{
    ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    if (this.dataGrid1 != null)
    {
        if (cbi.Content.ToString() == "All")
            this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.All;
        else if (cbi.Content.ToString() == "Vertical (Default)")
            this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.Vertical;
        else if (cbi.Content.ToString() == "Horizontal")
            this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.Horizontal;
        else
            this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.None;
    }

}
// CUSTOM GRIDLINES
private void cbCustomGridLineVert_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Colors.Blue);
        else 
            this.dataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255, 223, 227, 230));
    }
}
private void cbCustomGridLineHorz_Changed(object sender, RoutedEventArgs e)
{
    CheckBox cb = sender as CheckBox;
    if (this.dataGrid1 != null)
    {
        if (cb.IsChecked == true)
            this.dataGrid1.HorizontalGridLinesBrush = new SolidColorBrush(Colors.Blue);
        else
            this.dataGrid1.HorizontalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255, 223, 227, 230));
    }
}

    3. 生成并运行此应用程序。

      当应用程序运行时，您将看到一个 DataGrid，其中显示 taskList 集合中的任务。 此外，您还将看到用于动态修改DataGrid 控件的外观和行为的选项。

    4. 当应用程序运行时，更改各个选项并查看对 DataGrid 控件的外观和行为产生的影响。

    如果您无需在运行时动态设置 DataGrid 属性，则通常在 XAML 中设置这些属性。 若要查看 XAML 语法来设置属性，请参见DataGrid 属性文档的"XAML 属性用法"部分。

    也可以通过向控件应用样式和模板来自定义 DataGrid。 利用样式和模板，可以对控件实现比设置属性更多的自定义。 若要了解有关如何向控件应用样式和模板的更多信息，请参见控件自定义和 DataGrid 样式和模板。
  • 相关阅读:
    第一周例行报告
    2018091-2 博客作业
    jQuery $.post $.ajax用法
    HTML ul、li 属性介绍
    PHP日期格式转时间戳
    php字符串与字符替换函数
    Linux内核参数
    ifconfig-dropped
    mysql_load_data及权限管理
    加快mysql导入导出速度
  • 原文地址：https://www.cnblogs.com/meimao5211/p/3413167.html
Copyright © 2011-2022 走看看