强大的DataGrid组件[9]_自定义头模板(HeaderTemplate)——Silverlight学习笔记[17]

在DataGrid的开发设计中，我们经常会碰到设计样式各异的表头以满足各种要求。而头模板的作用是显示DataGrid控件的首行中的文本、图片或是绑定数据的。通过对头模板的设定，可以为我们定制所需样式的DataGrid。本文将为大家介绍如何自定义DataGrid的头模板。

 

具体步骤：

1）在XAML文件中的UserControl标签中加入如下命名空间：

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

 

2）设置呈现头模板的样式HeaderStyle的属性

 

3）可以利用StackPanel标签组合编排添加在头模板内的组件的位置。

 

 

实例：

通过实例来了解头模板制定的基本方法。

先来看看效果：

 

在代码中会指明操作的关键步骤。

MainPage.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:dataprimitives="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="SilverlightClient.MainPage"

    d:DesignWidth="640" d:DesignHeight="320">

    <Grid x:Name="LayoutRoot" Width="640" Height="320" Background="White">

        <data:DataGrid x:Name="dgEmployee" AutoGenerateColumns="False" Margin="8,8,36,71" Background="#FFDEF2F0" FontSize="12">

            <data:DataGrid.Columns>

                <data:DataGridTemplateColumn Width="260">

                    <data:DataGridTemplateColumn.HeaderStyle>

                        <Style TargetType="dataprimitives:DataGridColumnHeader">

                            <Setter Property="ContentTemplate">

                                <Setter.Value>

                                    <DataTemplate>

                                        <!--呈现的关键-->

                                        <StackPanel Orientation="Vertical">

                                            <StackPanel Orientation="Horizontal">

                                                <TextBlock Text="" Width="80"/>

                                                <TextBlock Text="   2009-07" Width="80"/>

                                                <TextBlock Text="" Width="100"/>

                                            </StackPanel>

                                            <StackPanel Orientation="Horizontal">

                                                <TextBlock Text="单价" Width="80"/>

                                                <TextBlock Text="数量" Width="80"/>

                                                <TextBlock Text="总额" Width="100"/>

                                            </StackPanel>

                                        </StackPanel>

                                    </DataTemplate>

                                </Setter.Value>

                            </Setter>

                        </Style>

                    </data:DataGridTemplateColumn.HeaderStyle>

                    <!--这里用到了我上一篇中提到的方法-->

                    <data:DataGridTemplateColumn.CellTemplate>

                        <DataTemplate>

                          <StackPanel Orientation="Horizontal">                                                 

                            <TextBlock Width="80" Text="{Binding Quantity}"/>

                            <TextBlock Width="80" Text="{Binding Price}"/>

                            <TextBlock Width="100" Text="{Binding Total}"/>

                          </StackPanel>

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellTemplate>

                    <data:DataGridTemplateColumn.CellEditingTemplate>

                        <DataTemplate>

                            <StackPanel Orientation="Horizontal">

                                <TextBox Width="80" Text="{Binding Quantity,Mode=TwoWay}"/>

                                <TextBox Width="80" Text="{Binding Price,Mode=TwoWay}"/>

                                <TextBox Width="100" Text="{Binding Total,Mode=TwoWay}"/>

                            </StackPanel>

                        </DataTemplate>

                    </data:DataGridTemplateColumn.CellEditingTemplate>

                </data:DataGridTemplateColumn>

            </data:DataGrid.Columns>

        </data:DataGrid>

    </Grid>

</UserControl>

 

MainPage.xaml.cs文件代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace SilverlightClient

{

    public class Products

    {

        public int Quantity { get; set; }

        public int Price { get;set;}

        public int Total { get; set; }

    }

 

    public partial class MainPage : UserControl

    {

       

        public MainPage()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

 

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            List<Products> em1 = new List<Products>();

            em1.Add(new Products() { Quantity = 20, Price = 130, Total = 2600 });

            em1.Add(new Products() { Quantity = 5, Price=800, Total = 4000 });

            em1.Add(new Products() { Quantity = 10, Price=2000, Total = 20000 });

           

            dgEmployee.ItemsSource = em1;

        }

    }

}

作者：Kinglee
文章出处：Kinglee’s Blog (http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。