零基础学通Silverlight4（6）:DataGrid控件

控件是对数据和方法的封装。控件可以有自己的属性、方法和事件。属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能，事件是可以被控件识别的操作。 Silverlight 中，控件的特性和控件显示方式分开，控件在用户界面上的样子是由控件模板决定， Silverlight 为每个控件提供了默认的控件模板和相应的特性，用户也可用自己的控件模板来替换，让它成为有个性化的控件，如过去方形的按扭，可以换成圆的或椭圆的，或者任意图片等，但按扭的基本属性没有改变。

所有控件由基类 System.Windows.Control 类派生而来，其命名空间是 System.Windows.Controls ， System.Windows.Controls 命名空间中包含的某些控件用于 Silverlight 运行时，其它控件用于 Silverlight SDK 。

现对 Silverlight 控件按照常规功能进行分类，主要有：

◎     按钮/命令控件，如：Button、HyperlinkButton、RepeatButton

◎     日期显示和选择，如：Calendar、DatePicker

◎     信息显示：TextBlock 、 ProgressBarvRichTextBox

◎ 文本显示和编辑：AutoCompleteBox 、 PasswordBox 、 TextBox 、 RichTextBox

◎ 数据显示 DataGrid 、 DataPager 、 TreeView

◎     图形和视频显示：Image 、 MultiScaleImage 、 MediaElement 、 InkPresenter

◎     对话框和窗口：OpenFileDialog 、 SaveFileDialog 、 ChildWindow 、 Popup

◎     导航：Frame 、 Page

◎     用户帮助： DescriptionViewer 、 Label 、 ToolTip 、 ValidationSummary

◎ 布局和元素分组 Border 、 Canvas 、 ContentControl 、 Grid GridSplitter 、 StackPanel 、 Viewbox 、 VirtualizingStackPanel 、 ScrollBar 、 ScrollViewer 、 TabControl

◎     选择控件，如：CheckBox 、 ComboBox 、 ListBox 、 RadioButton 、 Slider

如安控件的派生关系分，有：面板控件、内容控件、列表控件等。

DataGrid 控件提供一种用户喜爱的、灵活的方式来以表格的形式显示数据，用户可根据自己的需求来定制列的模板，内置列类型包括文本框列、复选框列和模板列，位于命名空间 System.Windows.Controls 下，在 System.Windows.Controls 程序集中，该程序集并不包含在 Silverlight 运行库中，因此需添加对 System.Windows.Controls.Data.Dll 的引用，在 XAML 界面的根标记 UserControl 声明如下：

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

实际操作时，如从工具箱中将 DataGrid 控件拖放至 XAML 界面中时，会自动添加上面的设置。

DataGrid 控件重要属性有：

◎ IsReadOnly ：可以直接编辑项。为了确保正确地提交和取消这些编辑。

◎ IsValid ：支持单元格级别的属性验证和行级别的对象验证。如果在属性 setter 中遇到验证异常，则单元格编辑控件将显示其错误状态。 DataGridCell..::.IsValid 、 DataGridRow..::.IsValid 和 DataGrid..::.IsValid 属性都设置为 false 。 DataGrid 将不会退出单元格编辑模式，直到验证错误得以解决。

◎ IPagedCollectionView ：对数据进行分页。

◎ PagedCollectionView ：实现数据源提供分组、排序和分页功能。

◎ ItemsSource ：数据网格中的每一行均绑定到数据源中的一个对象，而数据网格中的每一列均绑定到该数据对象的一个属性。当向源数据中添加项或从源数据中移除项时，为了使 DataGrid 用户界面能够自动更新， DataGrid 必须绑定到实现 INotifyCollectionChanged 的集合，例如 ObservableCollection<(Of <(T>)>) 。为了自动反映属性更改，源集合中的对象必须实现 INotifyPropertyChanged 接口。

◎ AutoGenerateColumns ：属性设置为 false 时 ，可以阻止自动生成列。如果要显式创建和配置所有列，则这一点很有用。此外，还可以让数据网格生成列，但处理 AutoGeneratingColumn 事件以便在创建后对列进行自定义。若要重新排列列的显示顺序，可以针对各个列设置 DisplayIndex 属性。

◎CanUserReorderColumns:属性设置为true时，可以拖动该列改变该列的顺序，否则不能拖动。

◎CanUserResizeColumns：属性设置为true时，用户可以用鼠标调整列的宽度，否则列的宽度不能被调整。

范例示范使用RowDetailTemplate

    图 13.1-6 是 Ch13_Exam1_4 的运行画面，单击某一行后，出现详细信息。

 

图 13.1-6

◎ XAML 标记如下，已添加注解。

<UserControl

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

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

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

<!--增加的命名空间支持 -->

    xmlns:myheader="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"

    mc:Ignorable="d"

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

x:Class="SilverlightApplication74.MainPage"

    d:DesignWidth="640" d:DesignHeight="580"

     xmlns:local="clr-namespace:SilverlightApplication74">

  <Grid x:Name="LayoutRoot">

         <StackPanel Margin="10,0,8,18">

                <TextBlock Height="51" Margin="179,0,299,0" Text="热门新车销量表" TextWrapping="Wrap" FontSize="32" Foreground="#FFE90D0D"/>

// 设置RowDetailsVisibilityMode属性

<data:DataGrid x:Name="gridStudent" Margin="10,10,0,0" AutoGenerateColumns="False" Width="604" Height="488" HorizontalAlignment="Left" RowDetailsVisibilityMode="VisibleWhenSelected" >

//定义详细数据区域

<data:DataGrid.RowDetailsTemplate>

                         <DataTemplate>

                                <Border>

<Border Margin="10" Padding="10" BorderBrush="SteelBlue" BorderThickness="4" CornerRadius="4">

                  <TextBlock Text="{Binding Description}" TextWrapping="Wrap" FontSize="14"></TextBlock>

                                       </Border>

                                </Border>

                         </DataTemplate>

</data:DataGrid.RowDetailsTemplate>

// 定义ColumnHeaderStyle列标题样式

                  <data:DataGrid.ColumnHeaderStyle>

                      <Style TargetType="myheader:DataGridColumnHeader">

                             <Setter Property="FontSize" Value="18" />

                                <Setter Property="Foreground" Value="Red" />

                         </Style>

                  </data:DataGrid.ColumnHeaderStyle>         

                  <data:DataGrid.Columns >

                              <data:DataGridTextColumn Header="车名"

                                     FontSize="16"

                                     Width="100"

                                     Binding="{Binding Name}" >                     

                         </data:DataGridTextColumn>                                                

                         <data:DataGridTextColumn Header="类型"

                                     FontSize="16"

                                     Width="100"

                                     Binding="{Binding Type}" >                      

                         </data:DataGridTextColumn>                                         

                              <data:DataGridTextColumn Header="销量"

                                     FontSize="16"

                                     Width="150"

                                     Binding="{Binding Total,Mode=TwoWay}">             

                                <data:DataGridTextColumn.ElementStyle>

                                   <Style TargetType="TextBlock">

                                      <Setter Property="TextWrapping" Value="Wrap" />

                                   </Style>

                                </data:DataGridTextColumn.ElementStyle>                      

                                <data:DataGridTextColumn.EditingElementStyle>

                                   <Style TargetType="TextBox">

                                      <Setter Property="FontWeight" Value="Bold" />

                                         <Setter Property="Foreground" Value="Red" />

                                   </Style>

                                </data:DataGridTextColumn.EditingElementStyle>

                         </data:DataGridTextColumn>                    

                              <data:DataGridTemplateColumn Header="图片" >             

                                     <data:DataGridTemplateColumn.CellTemplate>

                                            <DataTemplate>

  <Image Stretch="UniformToFill" Source ="{Binding Img}" Width="150"/>

                                            </DataTemplate>

                                     </data:DataGridTemplateColumn.CellTemplate>         

                                     <data:DataGridTemplateColumn.CellEditingTemplate>

                                            <DataTemplate>

                              <TextBox Text="{Binding Car, Mode=TwoWay}" />

                                            </DataTemplate>

    </data:DataGridTemplateColumn.CellEditingTemplate>

                </data:DataGridTemplateColumn>                 

    </data:DataGrid.Columns>

         </data:DataGrid>

         </StackPanel>

  </Grid>

</UserControl>

◎     主要代码如下：

   public void LoadData()

        {

            car = new Car[] {

                 new Car{

                                Name="新明锐",

                                Total =8500,

                                Type="小型车",

                                Img=GetPath("CarPhoto/mingru.jpg"),

Description="斯柯达品牌秉承德国大众集团的先进技术，其产品特点是智慧和品质…………….",

                                },

               new Car{

                    Name="高尔夫6",

                             Total =15500,

                             Type="豪华车",

                             Img=GetPath("CarPhoto/golf.jpg"),

                          Description="高尔夫不仅追求外观和实用性完美结合，而且在产品品质、内饰及舒适性装备上也毫不妥协地追求完美…………….."

                          },

                new Car{

                                 Name="科鲁兹",

                                Total =11000,

                                Type="中型车",

                                Img=GetPath("CarPhoto/kouluz.jpg"),

                          Description="科鲁兹的外形给人一种锋利运动的感觉，尤其是锐角的前大灯更强化了……………."

                         },

                new Car{

                                Name="福克斯两厢",

                                Total =12800,

                                Type="紧凑型车",

                                Img=GetPath("CarPhoto/fukes.jpg"),

                          Description="福克斯两厢车头采用的X焦点设计，正是福特汽车车头设计的进化成果……………."

                         },

                new Car{

                                Name="速腾1.4T",Total =10600,

                                Type="中型车",

                                Img=GetPath("CarPhoto/suteng.jpg"),

                          Description="速腾是一汽大众于2006年4月9日投放中国市场的一款新车型，其英文名称为…………….",

                         }

            };

        }

//读取图片的绝对路径

           string GetPath(string path)

           {

                  string Uri;

    string absoUri= System.Windows.Application.Current.Host.Source.AbsoluteUri;

                  if (absoUri.IndexOf("ClientBin") > 0)

               Uri=absoUri.Substring(0, absoUri.IndexOf("ClientBin")) + path;

            else

               Uri=absoUri.Substring(0, absoUri.LastIndexOf("/") + 1) + path;

                  return Uri;

           }

    }

//定义汽车类

    public class Car

    {

        public string Name

        { set;get;}

        public int Total

        { set;get;}

        public string Type

        { set;get; }

           public string Description

        { set;get; }

           public string Img

        { set;get;}

 }

更详细内容及源代码下载：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1