Silverlight实用窍门系列：75.Silverlight中DataGrid制作复杂表头

谁践踏了优雅 2022-01-14 04:45 231阅读 0赞

在Silverlight中的DataGrid我们经常会觉得表头太过于简单，对于某一些业务中我们可能需要展现多层次的表头。本文将结合DataGridTemplateColumn和Style解决这种问题。

一：引用命名空间  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][] 下载。

![2012083011283462.png][]

原文地址：[http://www.cnblogs.com/chengxingliang/archive/2012/09/10/2678505.html][http_www.cnblogs.com_chengxingliang_archive_2012_09_10_2678505.html]

[SLDGHeader.zip]: http://files.cnblogs.com/chengxingliang/SLDGHeader.zip
[2012083011283462.png]: /images/20220114/1c889a14ade24be5ac502a049237c5bd.png
[http_www.cnblogs.com_chengxingliang_archive_2012_09_10_2678505.html]: http://www.cnblogs.com/chengxingliang/archive/2012/09/10/2678505.html

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 silverlight教程 silverlight 数据绑定

以往为了做wtt测试，曾经写过一个sample 的WPF application.对于silverlight的了解，仅限于是web 版的WPF。。。。。关于silverl

ゝ一纸荒年。/ 2022年08月06日 07:09/ 0 赞/ 150 阅读

相关 Silverlight DataGrid组件具体特点详解

说明：Silverlight DataGrid组件是Silverlight数据组件中最为常用并且是功能最为强大的数据组件。因此，对开发者而言，深入了解其特性是十分有必要

本是古典何须时尚/ 2022年06月17日 09:56/ 0 赞/ 164 阅读

相关 Silverlight之我见——DataGrid数据验证

1. <UserControl x:Class="DataValidationSample.MainPage" 2. xmlns="http://schemas

青旅半醒/ 2022年06月16日 07:43/ 0 赞/ 128 阅读

相关 Silverlight Validation

Silverlight DataForm Validation 主要应用在Binding上，但是不能进行自定义设置Validation错误信息，不适用复杂的验证功能。

桃扇骨/ 2022年04月22日 00:30/ 0 赞/ 188 阅读

相关 Silverlight实用窍门系列：72.Silverlight的Implicit Style、自定义主题皮肤、系统主题皮肤...

　　本文实例基于[Silverlight实用窍门系列：71.Silverlight的Style][Silverlight_71.Silverlight_Style]基础之上。

素颜马尾好姑娘i/ 2022年02月04日 06:15/ 0 赞/ 216 阅读

相关使用silverlight制作热点地图

参考文档：[http://www.codeproject.com/Articles/49381/Silverlight-Creating-an-Image-Map-with-H

梦里梦外;/ 2022年01月21日 05:39/ 0 赞/ 415 阅读

相关 Silverlight实用窍门系列：75.Silverlight中DataGrid制作复杂表头

在Silverlight中的DataGrid我们经常会觉得表头太过于简单，对于某一些业务中我们可能需要展现多层次的表头。本文将结合DataGridTemplateColumn和

谁践踏了优雅/ 2022年01月14日 04:45/ 0 赞/ 232 阅读

相关 Silverlight 2.0中关于DataGrid使用CheckBox选择行

今天想使用Silverlight中的DataGrid控件来做一个跟.NET Framework2.0中GridView一样的使用Checkbox选择行的效果，但是看了半天的文档

港控/mmm°/ 2021年12月21日 02:43/ 0 赞/ 162 阅读

相关 [Silverlight] How to make a simple PivotTable extended from Silverlight DataGrid

Recently, I have recieved a few questions about Silverlight DataGrid. It's about how to

男娘i/ 2021年12月18日 05:43/ 0 赞/ 173 阅读

相关 Silverlight中的Behavior

上次写了关于Trigger和Action的文章（[Silverlight中的Action和Trigger][Silverlight_Action_Trigger]），这次写一个

ゝ一纸荒年。/ 2021年11月05日 00:58/ 0 赞/ 235 阅读