强大的DataGrid组件[9]_自定义头模板(HeaderTemplate)

热门：网页模板 .net视频教程 JQuery MVC json ExtJs 源码示例三级联动 JQuery菜单

您现在的位置：.Net中文社区>> Silverlight>>正文内容

强大的DataGrid组件[9]_自定义头模板(HeaderTemplate)

发布时间：2009年09月17日点击数：次Kinglee

返回教程连载目录

在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 em1 = new List ();

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;

}

}

}

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作

本站部份资源来于互联网,只供学习之用,不得用于商业,如有侵犯版权请联系告知,本站将第一时间删除!
copyright © 2008-2010 .Net中文社区 ASPXCS.NET™.All Rights Reserved 滇ICP备08102132号