演练：使用属性自定义 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 控件中显示的数据对象。

     
    1. public string Name { get; set; }
    2. public DateTime DueDate { get; set; }
    3. public bool Complete { get; set; }
    4. public string Notes { get; set; }

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

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

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

     
    1. // Create a list to store task data.
    2. List<Task> taskList = new List<Task>();
    3. int itemsCount = 10;
    4. // Generate some task data and add it to the task list.
    5. for (int i = 1; i <= itemsCount; i++)
    6. {
    7.     taskList.Add(new Task()
    8.     {
    9.         Name = "Task " + i.ToString(),
    10.         DueDate = DateTime.Now.AddDays(i),
    11.         Complete = (i % 3 == 0),
    12.         Notes = "Task " + i.ToString() + " is due on "
    13.               + DateTime.Now.AddDays(i) + ". Lorum ipsum..."
    14.     });
    15. }
    16. 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，前者用于布局目的，后者用于显示任务列表。

     
    1. <StackPanel x:Name="LayoutRoot" Background="White" Margin="5">
    2.  
    3. ...
    4.  
    5.     <sdk:DataGrid x:Name="dataGrid1" Height="350" Width="540"
    6.                    HorizontalAlignment="Left" >
    7.     </sdk:DataGrid>
    8. </StackPanel>

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

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

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

创建 DataGrid 选项的用户界面

  1. 打开 MainPage.xaml。

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

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

     
    1. <StackPanel Margin="0,0,0,5">
    2.     <StackPanel Orientation="Horizontal">
    3.         <Border BorderBrush="Black" BorderThickness="1" Padding="3" Width="180">
    4.             <StackPanel>
    5.                 <TextBlock Text="DataGrid Options" FontSize="12" />
    6.                 <CheckBox Content="Grid is read-only"
    7.                           Checked="cbReadOnly_Changed" Unchecked="cbReadOnly_Changed" />
    8.                 <CheckBox Content="Freeze first column"
    9.                           Checked="cbFreezeColumn_Changed" Unchecked="cbFreezeColumn_Changed"/>
    10.                 <CheckBox Content="Hide first column"
    11.                           Checked="cbHideColumn_Changed" Unchecked="cbHideColumn_Changed"/>
    12.                 <CheckBox Content="Single Row Selection"
    13.                           Checked="cbSelectionMode_Changed" Unchecked="cbSelectionMode_Changed" />
    14.                 <TextBlock Text="Column Options" FontSize="12" />
    15.                 <CheckBox Content="Allow Column Reordering" IsChecked="true"
    16.                           Checked="cbColReorder_Changed" Unchecked="cbColReorder_Changed"/>
    17.                 <CheckBox Content="Allow Column Resizing" IsChecked="true"
    18.                           Checked="cbColResize_Changed" Unchecked="cbColResize_Changed"/>
    19.                 <CheckBox Content="Allow Column Sorting" IsChecked="true"
    20.                           Checked="cbColSort_Changed" Unchecked="cbColSort_Changed"/>
    21.                 <TextBlock Text="Scroll Bar Options" FontSize="12" />
    22.                 <CheckBox Content="Vertical Scroll Bars" IsThreeState="True" IsChecked=""
    23.                           Checked="cbVerticalScroll_Changed" Unchecked="cbVerticalScroll_Changed"
    24.                           Indeterminate="cbVerticalScroll_Changed" />
    25.                 <CheckBox Content="Horizontal Scroll Bars" IsThreeState="True" IsChecked=""
    26.                           Checked="cbHorizontalScroll_Changed" Unchecked="cbHorizontalScroll_Changed"
    27.                           Indeterminate="cbHorizontalScroll_Changed"/>
    28.             </StackPanel>
    29.         </Border>
    30.         <Border BorderBrush="Black" BorderThickness="1" Padding="3" Width="180">
    31.             <StackPanel>
    32.                 <TextBlock Text="Alternating Row Background" FontSize="12" />
    33.                 <ComboBox SelectionChanged="cbAltRowBrush_SelectionChanged">
    34.                     <ComboBoxItem Content="Default" IsSelected="True" />
    35.                     <ComboBoxItem Content="Custom" />
    36.                     <ComboBoxItem Content="Null" />
    37.                 </ComboBox>
    38.                 <TextBlock Text="Row Background" FontSize="12" />
    39.                 <ComboBox SelectionChanged="cbRowBrush_SelectionChanged">
    40.                     <ComboBoxItem Content="Default" IsSelected="True" />
    41.                     <ComboBoxItem Content="Custom" />
    42.                     <ComboBoxItem Content="Null" />
    43.                 </ComboBox>
    44.                 <TextBlock Text="Header Visibility" FontSize="12" />
    45.                 <ComboBox SelectionChanged="cbHeaders_SelectionChanged">
    46.                     <ComboBoxItem Content="All"/>
    47.                     <ComboBoxItem Content="Column (Default)" IsSelected="True"/>
    48.                     <ComboBoxItem Content="Row"/>
    49.                     <ComboBoxItem Content="None"/>
    50.                 </ComboBox>
    51.                 <TextBlock Text="Grid Lines Visibility" FontSize="12" />
    52.                 <ComboBox SelectionChanged="cbGridLines_SelectionChanged">
    53.                     <ComboBoxItem Content="All"/>
    54.                     <ComboBoxItem Content="Vertical (Default)" IsSelected="True"/>
    55.                     <ComboBoxItem Content="Horizontal"/>
    56.                     <ComboBoxItem Content="None"/>
    57.                 </ComboBox>
    58.                 <TextBlock Text="Custom Grid Lines" FontSize="12" />
    59.                 <CheckBox Content="Vertical"
    60.                           Checked="cbCustomGridLineVert_Changed"
    61.                           Unchecked="cbCustomGridLineVert_Changed"/>
    62.                 <CheckBox Content="Horizontal"
    63.                           Checked="cbCustomGridLineHorz_Changed"
    64.                           Unchecked="cbCustomGridLineHorz_Changed"/>
    65.             </StackPanel>
    66.         </Border>
    67.     </StackPanel>
    68. </StackPanel>

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

在代码中设置 DataGrid 属性

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

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

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

     
    1. // READ ONLY
    2. private void cbReadOnly_Changed(object sender, RoutedEventArgs e)
    3. {
    4.     CheckBox cb = sender as CheckBox;
    5.     if (this.dataGrid1 != null)
    6.         this.dataGrid1.IsReadOnly = (bool)cb.IsChecked;
    7. }
    8. // FREEZE COLUMN
    9. private void cbFreezeColumn_Changed(object sender, RoutedEventArgs e)
    10. {
    11.     CheckBox cb = sender as CheckBox;
    12.     if (this.dataGrid1 != null)
    13.     {
    14.         if (cb.IsChecked == true)
    15.             this.dataGrid1.FrozenColumnCount = 1;
    16.         else if (cb.IsChecked == false)
    17.             this.dataGrid1.FrozenColumnCount = 0;
    18.     }
    19. }
    20. // HIDE COLUMN
    21. private void cbHideColumn_Changed(object sender, RoutedEventArgs e)
    22. {
    23.     CheckBox cb = sender as CheckBox;
    24.     if (this.dataGrid1 != null)
    25.     {
    26.         if (cb.IsChecked == true)
    27.             this.dataGrid1.Columns[0].Visibility = Visibility.Collapsed;
    28.         else if (cb.IsChecked == false)
    29.             this.dataGrid1.Columns[0].Visibility = Visibility.Visible;
    30.     }
    31. }
    32. // SELECTION MODE
    33. private void cbSelectionMode_Changed(object sender, RoutedEventArgs e)
    34. {
    35.     CheckBox cb = sender as CheckBox;
    36.     if (this.dataGrid1 != null)
    37.     {
    38.         if (cb.IsChecked == true)
    39.             this.dataGrid1.SelectionMode = DataGridSelectionMode.Single;
    40.         else if (cb.IsChecked == false)
    41.             this.dataGrid1.SelectionMode = DataGridSelectionMode.Extended;
    42.     }
    43. }
    44. // COLUMN OPTIONS
    45. private void cbColReorder_Changed(object sender, RoutedEventArgs e)
    46. {
    47.     CheckBox cb = sender as CheckBox;
    48.     if (this.dataGrid1 != null)
    49.         this.dataGrid1.CanUserReorderColumns = (bool)cb.IsChecked;
    50. }
    51. private void cbColResize_Changed(object sender, RoutedEventArgs e)
    52. {
    53.     CheckBox cb = sender as CheckBox;
    54.     if (this.dataGrid1 != null)
    55.         this.dataGrid1.CanUserResizeColumns = (bool)cb.IsChecked;
    56. }
    57. private void cbColSort_Changed(object sender, RoutedEventArgs e)
    58. {
    59.     CheckBox cb = sender as CheckBox;
    60.     if (this.dataGrid1 != null)
    61.         this.dataGrid1.CanUserSortColumns = (bool)cb.IsChecked;
    62. }
    63. // SCROLL BARS VISIBILITY
    64. private void cbVerticalScroll_Changed(object sender, RoutedEventArgs e)
    65. {
    66.     CheckBox cb = sender as CheckBox;
    67.     if (this.dataGrid1 != null)
    68.     {
    69.         if (cb.IsChecked == true)
    70.             this.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
    71.         else if (cb.IsChecked == false)
    72.             this.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
    73.         else
    74.             this.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
    75.     }
    76. }
    77. private void cbHorizontalScroll_Changed(object sender, RoutedEventArgs e)
    78. {
    79.     CheckBox cb = sender as CheckBox;
    80.     if (this.dataGrid1 != null)
    81.     {
    82.         if (cb.IsChecked == true)
    83.             this.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;
    84.         else if (cb.IsChecked == false)
    85.             this.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
    86.         else
    87.             this.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
    88.     }
    89.  
    90. }
    91. // ROW BRUSH
    92. private void cbAltRowBrush_SelectionChanged(object sender, SelectionChangedEventArgs e)
    93. {
    94.     ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    95.  
    96.     if (this.dataGrid1 != null)
    97.     {
    98.         if (cbi.Content.ToString() == "Custom")
    99.             this.dataGrid1.AlternatingRowBackground = new SolidColorBrush(Color.FromArgb(255, 130, 175, 200));
    100.         else if (cbi.Content.ToString() == "Default")
    101.             this.dataGrid1.AlternatingRowBackground = new SolidColorBrush(Color.FromArgb(37, 233, 238, 244));
    102.         else if (cbi.Content.ToString() == "Null")
    103.             this.dataGrid1.AlternatingRowBackground = null;
    104.     }
    105. }
    106. private void cbRowBrush_SelectionChanged(object sender, SelectionChangedEventArgs e)
    107. {
    108.     ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    109.     if (this.dataGrid1 != null)
    110.     {
    111.         if (cbi.Content.ToString() == "Custom")
    112.             this.dataGrid1.RowBackground = new SolidColorBrush(Color.FromArgb(255, 135, 185, 195));
    113.         else if (cbi.Content.ToString() == "Default")
    114.             this.dataGrid1.RowBackground = new SolidColorBrush(Color.FromArgb(00, 255, 255, 255));
    115.         else if (cbi.Content.ToString() == "Null")
    116.             this.dataGrid1.RowBackground = null;
    117.     }
    118. }
    119. // HEADERS VISIBILITY
    120. private void cbHeaders_SelectionChanged(object sender, RoutedEventArgs e)
    121. {
    122.     ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    123.     if (this.dataGrid1 != null)
    124.     {
    125.         if (cbi.Content.ToString() == "All")
    126.             this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.All;
    127.         else if (cbi.Content.ToString() == "Column (Default)")
    128.             this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.Column;
    129.         else if (cbi.Content.ToString() == "Row")
    130.             this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.Row;
    131.         else
    132.             this.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.None;
    133.     }
    134.  
    135. }
    136. // GRIDLINES VISIBILITY
    137. private void cbGridLines_SelectionChanged(object sender, RoutedEventArgs e)
    138. {
    139.     ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;
    140.     if (this.dataGrid1 != null)
    141.     {
    142.         if (cbi.Content.ToString() == "All")
    143.             this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.All;
    144.         else if (cbi.Content.ToString() == "Vertical (Default)")
    145.             this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.Vertical;
    146.         else if (cbi.Content.ToString() == "Horizontal")
    147.             this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.Horizontal;
    148.         else
    149.             this.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.None;
    150.     }
    151.  
    152. }
    153. // CUSTOM GRIDLINES
    154. private void cbCustomGridLineVert_Changed(object sender, RoutedEventArgs e)
    155. {
    156.     CheckBox cb = sender as CheckBox;
    157.     if (this.dataGrid1 != null)
    158.     {
    159.         if (cb.IsChecked == true)
    160.             this.dataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Colors.Blue);
    161.         else
    162.             this.dataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255, 223, 227, 230));
    163.     }
    164. }
    165. private void cbCustomGridLineHorz_Changed(object sender, RoutedEventArgs e)
    166. {
    167.     CheckBox cb = sender as CheckBox;
    168.     if (this.dataGrid1 != null)
    169.     {
    170.         if (cb.IsChecked == true)
    171.             this.dataGrid1.HorizontalGridLinesBrush = new SolidColorBrush(Colors.Blue);
    172.         else
    173.             this.dataGrid1.HorizontalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255, 223, 227, 230));
    174.     }
    175. }

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

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

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

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

也可以通过向控件应用样式和模板来自定义 DataGrid。 利用样式和模板，可以对控件实现比设置属性更多的自定义。 若要了解有关如何向控件应用样式和模板的更多信息，请参见控件自定义和 DataGrid 样式和模板。

演练：使用属性自定义 DataGrid 控件的更多相关文章

  1. WPF 自定义DataGrid控件样式

    内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html 一.DataGrid基本样式(一) 小刚已经把Dat ...

  2. jQuery之自定义datagrid控件

    sldatagrid 效果: sldatagrid.js (function($) { function loadColumns(sldatagrid, columns) { $(sldatagrid ...

  3. WPF 4 DataGrid 控件（自定义样式篇）

    原文:WPF 4 DataGrid 控件(自定义样式篇)      在<WPF 4 DataGrid 控件(基本功能篇)>中我们已经学习了DataGrid 的基本功能及使用方法.本篇将继续 ...

  4. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  5. wpf研究之道——datagrid控件分页

    这是我们的datagrid分页效果图,有上一页,下一页,可以跳到任何一页.当页码比较多的时候,只显示几页,其余用点点,界面实现如下: <!--分页--> <StackPanel Or ...

  6. WPF 4 DataGrid 控件（进阶篇一）

    原文:WPF 4 DataGrid 控件(进阶篇一)      上一篇<WPF 4 DataGrid 控件(自定义样式篇)>中,我们掌握了DataGrid 列表头.行表头.行.单元格相关的 ...

  7. WPF 4 DataGrid 控件（进阶篇二）

    原文:WPF 4 DataGrid 控件(进阶篇二)      上一篇<WPF 4 DataGrid 控件(进阶篇一)>中我们通过DataGridTemplateColumn 类自定义编辑 ...

  8. WPF 4 DataGrid 控件（基本功能篇）

    原文:WPF 4 DataGrid 控件(基本功能篇)      提到DataGrid 不管是网页还是应用程序开发都会频繁使用.通过它我们可以灵活的在行与列间显示各种数据.本篇将详细介绍WPF 4 中 ...

  9. 安卓自定义组合控件--toolbar

    最近在学习安卓APP的开发,用到了toolbar这个控件, 最开始使用时include layout这种方法,不过感觉封装性不好,就又改成了自定义组合控件的方式. 使用的工具为android stud ...

随机推荐

  1. POJ2421 Constructing Roads

    Constructing Roads 这道题很水,就是一个裸的最小生成树,最不过把已经连接的节点的值再设为0. 代码: #include<cstdio> #include<cstri ...

  2. [Kubernetes]集群配置免密登录Permission denied (publickey,password) 解决办法

    在用ansible部署Kubernetes集群是需要配置免密登录,但是遇到Permission denied (publickey,password)的问题 首先推断可能是sshd_config的配置 ...

  3. 使用windows操作EXCEL如何关闭EXCEL进程

    经常项目上有导入excel的需求,其实导入一个固定格式的excel数据非常容易,但是,发现一个问题就是,导入excel后,用户在打开excel时,必须要打开2次才能打开excel,这让人很不爽:开始查 ...

  4. Codeforces947D. Picking Strings

    $n \leq 100000,m \leq 100000$,给长度$n$的字符串$s$和$m$的字符串$t$,只含ABC.定义串$a$可以经过任意次如下操作变成其他串. 现在$q \leq 10000 ...

  5. vagrant的学习 之 优化

    vagrant的学习 之 优化 一.修改虚拟机名字: 默认的虚拟机的名字很长:study_default_1535505004652_97747. (1)打开Vagrantfile文件:(2)找到: ...

  6. [Android] 随时拍图像处理部分总结及源码分享

    http://blog.csdn.net/eastmount/article/details/45492065#comments [Android] 图像各种处理系列文章合集 http://blog. ...

  7. CodeForces 593A 2Char

    暴力. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> u ...

  8. [Bzoj5179][Jsoi2011]任务调度（左偏树）

    5179: [Jsoi2011]任务调度 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 5  Solved: 4[Submit][Status][Di ...

  9. httpclient失败重连机制

    HttpClient 底层会默认超时自动重发3次,DefaultHttpRequestRetryHandler源码 /**     * Create the request retry handler ...

  10. Codeforces Round #258 (Div. 2) B. Sort the Array（简单题）

    题目链接:http://codeforces.com/contest/451/problem/B --------------------------------------------------- ...