Silverlight实用窍门系列:75.Silverlight中DataGrid制作复杂表头
2013-07-02 09:21
621 查看
在Silverlight中的DataGrid我们经常会觉得表头太过于简单,对于某一些业务中我们可能需要展现多层次的表头。本文将结合DataGridTemplateColumn和Style解决这种问题。
一:引用命名空间 xmlns:dgCloumn="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data",不需要单独引用其他的DLL。这个命名空间是为了让我们声明的样式指定类型为DataGridColumnHeader。
二:编写DataGrid表头样式如下:
三:为DataGrid设置Header绑定,需要注意的是在DataGridTemplateColumn绑定行中,我们需要手动设置绑定列为两列,分别绑定两个属性。如下:
四:我们看后台代码如下:
五:效果如下图,如需源码请点击 SLDGHeader.zip 下载。
原文地址:/article/4761232.html
一:引用命名空间 xmlns:dgCloumn="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data",不需要单独引用其他的DLL。这个命名空间是为了让我们声明的样式指定类型为DataGridColumnHeader。
二:编写DataGrid表头样式如下:
<Style x:Key="CityNumStyle" TargetType="dgCloumn:DataGridColumnHeader"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid x:Name="Root"> <Rectangle x:Name="BackgroundGradient" Fill="#eee" Stretch="Fill" Grid.ColumnSpan="2" /> <ContentPresenter Content="区号" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="CityNameStyle" TargetType="dgCloumn:DataGridColumnHeader"> <Setter Property="Foreground" Value="#222"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="SeparatorBrush" Value="#ccc"/> <Setter Property="Padding" Value="8"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid x:Name="Root"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Rectangle x:Name="BackgroundRectangle" Fill="#ccc" Stretch="Fill" Grid.ColumnSpan="2"/> <Rectangle x:Name="BackgroundGradient" Fill="#eee" Stretch="Fill" Grid.ColumnSpan="2"> </Rectangle> <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <Grid.RowDefinitions> <RowDefinition Height="20" /> <RowDefinition Height="1" /> <RowDefinition Height="20" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="1" /> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <!--设置标题名--> <ContentPresenter Content="省份城市" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" /> <!--设置间隔线--> <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Height="1" Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" /> <ContentPresenter Content="省名" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" /> <ContentPresenter Content="城市" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid> <Rectangle x:Name="VerticalSeparator" Fill="#ccc" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="1" Grid.Column="1"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
三:为DataGrid设置Header绑定,需要注意的是在DataGridTemplateColumn绑定行中,我们需要手动设置绑定列为两列,分别绑定两个属性。如下:
<Grid x:Name="LayoutRoot" Background="White"> <sdk:DataGrid AutoGenerateColumns="False" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="dataGrid1" Width="305"> <sdk:DataGrid.Columns> <sdk:DataGridTemplateColumn Header="sec" HeaderStyle="{StaticResource CityNameStyle}"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <sdk:Label Content="{Binding AddrName}" Width="100"/> <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" /> <sdk:Label Content="{Binding CityName}" Width="100"/> </StackPanel> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> <sdk:DataGridTextColumn HeaderStyle="{StaticResource CityNumStyle}" Binding="{Binding TelNum}" Width="100" /> </sdk:DataGrid.Columns> </sdk:DataGrid> </Grid>
四:我们看后台代码如下:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.dataGrid1.ItemsSource = CityInformation.GetInfo(); } } /// <summary> /// 城市信息的实体类 /// </summary> public class CityInformation { private string _AddrName; private string _CityName; private string _TelNum; public string AddrName { get { return _AddrName; } set { _AddrName = value; } } public string CityName { get { return _CityName; } set { _CityName = value; } } public string TelNum { get { return _TelNum; } set { _TelNum = value; } } public static List<CityInformation> GetInfo() { return new List<CityInformation>() { new CityInformation(){ AddrName="四川", CityName="成都",TelNum="028"}, new CityInformation(){ AddrName="广东", CityName="广州",TelNum="021"}, new CityInformation(){ AddrName="广西", CityName="南宁",TelNum="0771"}, new CityInformation(){ AddrName="贵州", CityName="贵阳",TelNum="0851"} }; } }
五:效果如下图,如需源码请点击 SLDGHeader.zip 下载。
原文地址:/article/4761232.html
相关文章推荐
- Silverlight实用窍门系列:75.Silverlight中DataGrid制作复杂表头
- Silverlight实用窍门系列:75.Silverlight中DataGrid制作复杂表头 推荐
- Silverlight实用窍门系列:7.制作可拖动的自定义控件,获取拖拽后控件坐标【实例源码下载】
- Silverlight实用窍门系列:18.DataGrid内绑定ComboBox和ListBox以及取值【附带源码实例】
- Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】
- Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】
- Silverlight实用窍门系列:28.Silverlight制作随机分布雷达扫描点,模拟雷达扫描图之被扫描设备【附带源码实例】
- Silverlight实用窍门系列:5.绑定webService数据到DataGrid,设置DataGrid模板,模拟数据库数据的绑定【附带实例源码】
- Silverlight实用窍门系列:48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate【附带实例源码】
- Silverlight实用窍门系列:73.Silverlight的DataGrid分组以及模拟合并单元格 推荐
- Silverlight实用窍门系列:10.动态生成DataGrid,动态绑定DataGrid模板列【附带实例源码】
- Silverlight实用窍门系列:48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate
- Silverlight实用窍门系列:73.Silverlight的DataGrid分组以及模拟合并单元格
- Silverlight实用窍门系列:9.动态生成实体类,根据XML模板使用Emit生成动态类绑定到DataGrid【附代实例源码】
- Silverlight实用窍门系列:34.Silverlight中不得不了解使用的依赖属性【附带源码实例】
- Silverlight实用窍门系列:35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】
- Silverlight实用窍门系列:38.Silverlight读取服务器端格式化的Json数据【附带实例源码】
- Silverlight实用窍门系列:66.Silverlight的数据模板DataTemplate(二)获取数据模板控件
- Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别
- Silverlight实用窍门系列:52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)