零基础学通Silverlight46: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 声明如下：

@H_253_404@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 标记如下，已添加注解。

@H_253_404@<UserControl

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

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

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

@H_253_404@

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

@H_253_404@ mc:Ignorable="d"

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

@H_253_404@x:Class="SilverlightApplication74.MainPage"

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

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

@H_253_404@ <Grid x:Name="LayoutRoot">

@H_253_404@ <StackPanel Margin="10,8,18">

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

@H_253_404@// 设置RowDetailsVisibilityMode属性

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

@H_253_404@//定义详细数据区域

@H_253_404@<data:DataGrid.RowDetailstemplate>

@H_253_404@ <DataTemplate>

@H_253_404@ <Border>

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

@H_253_404@ <TextBlock Text="{Binding Description}" textwrapping="Wrap" FontSize="14"></TextBlock>

@H_253_404@ </Border>

@H_253_404@ </DataTemplate>

@H_253_404@</data:DataGrid.RowDetailstemplate>

@H_253_404@// 定义ColumnHeaderStyle列标题样式

@H_253_404@ <data:DataGrid.ColumnHeaderStyle>

@H_253_404@ <Style targettype="myheader:DataGridColumnHeader">

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

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

@H_253_404@ </Style>

@H_253_404@ </data:DataGrid.ColumnHeaderStyle>

@H_253_404@ <data:DataGrid.Columns >

@H_253_404@ <data:DataGridTextColumn Header="车名"

@H_253_404@ FontSize="16"

@H_253_404@ Width="100"

@H_253_404@ Binding="{Binding Name}" >

@H_253_404@ </data:DataGridTextColumn>

@H_253_404@ <data:DataGridTextColumn Header="类型"

@H_253_404@ FontSize="16"

@H_253_404@ Width="100"

@H_253_404@ Binding="{Binding Type}" >

@H_253_404@ </data:DataGridTextColumn>

@H_253_404@ <data:DataGridTextColumn Header="销量"

@H_253_404@ FontSize="16"

@H_253_404@ Width="150"

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

@H_253_404@ <data:DataGridTextColumn.ElementStyle>

@H_253_404@ <Style targettype="TextBlock">

@H_253_404@ <Setter Property="textwrapping" Value="Wrap" />

@H_253_404@ </Style>

@H_253_404@ </data:DataGridTextColumn.ElementStyle>

@H_253_404@ <data:DataGridTextColumn.EditingElementStyle>

@H_253_404@ <Style targettype="TextBox">

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

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

@H_253_404@ </Style>

@H_253_404@ </data:DataGridTextColumn.EditingElementStyle>

@H_253_404@ </data:DataGridTextColumn>

@H_253_404@ <data:DataGridTemplateColumn Header="图片" >

@H_253_404@ <data:DataGridTemplateColumn.CellTemplate>

@H_253_404@ <DataTemplate>

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

@H_253_404@ </DataTemplate>

@H_253_404@ </data:DataGridTemplateColumn.CellTemplate>

@H_253_404@ <data:DataGridTemplateColumn.CellEditingTemplate>

@H_253_404@ <DataTemplate>

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

@H_253_404@ </DataTemplate>

@H_253_404@ </data:DataGridTemplateColumn.CellEditingTemplate>

@H_253_404@ </data:DataGridTemplateColumn>

@H_253_404@ </data:DataGrid.Columns>

@H_253_404@ </data:DataGrid>

@H_253_404@ </StackPanel>

@H_253_404@ </Grid>

@H_253_404@</UserControl>

◎ 主要代码如下：

@H_253_404@ public void LoadData()

@H_253_404@ {

@H_253_404@ car = new Car[] {

@H_253_404@ new Car{

@H_253_404@ Name="新明锐",

@H_253_404@ Total =8500,

@H_253_404@ Type="小型车",

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

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

@H_253_404@ },

@H_253_404@ new Car{

@H_253_404@ Name="高尔夫6",

@H_253_404@ Total =15500,

@H_253_404@ Type="豪华车",

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

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

@H_253_404@ },

@H_253_404@ new Car{

@H_253_404@ Name="科鲁兹",

@H_253_404@ Total =11000,

@H_253_404@ Type="中型车",

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

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

@H_253_404@ },

@H_253_404@ new Car{

@H_253_404@ Name="福克斯两厢",

@H_253_404@ Total =12800,

@H_253_404@ Type="紧凑型车",

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

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

@H_253_404@ },

@H_253_404@ new Car{

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

@H_253_404@ Type="中型车",

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

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

@H_253_404@ }

@H_253_404@ };

@H_253_404@ }

@H_253_404@//读取图片的绝对路径

@H_253_404@ string GetPath(string path)

@H_253_404@ {

@H_253_404@ string Uri;

@H_253_404@ string absoUri= System.Windows.Application.Current.Host.source.AbsoluteUri;

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

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

@H_253_404@ else

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

@H_253_404@ return Uri;

@H_253_404@ }

@H_253_404@//定义汽车类

@H_253_404@ public class Car

@H_253_404@ {

@H_253_404@ public string Name

@H_253_404@ { set;get;}

@H_253_404@ public int Total

@H_253_404@ { set;get;}

@H_253_404@ public string Type

@H_253_404@ { set;get; }

@H_253_404@ public string Description

@H_253_404@ { set;get; }

@H_253_404@ public string Img

@H_253_404@ { set;get;}

@H_253_404@ }

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

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

零基础学通Silverlight46:DataGrid控件

范例示范使用RowDetailTemplate

相关推荐