zoukankan      html  css  js  c++  java
  • 强大的DataGrid组件[9]_自定义头模板

    在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;

            }

        }

    }

  • 相关阅读:
    【算法学习笔记】27.动态规划 解题报告 SJTU OJ 1254 传手绢
    【算法学习笔记】26.扫描维护法 解题报告 SJTU OJ 1133 数星星
    【算法学习笔记】25.贪心法 均分纸牌问题的分析
    【算法学习笔记】24.记忆化搜索 解题报告 SJTU OJ 1002 二哥种花生
    【算法学习笔记】23.动态规划 解题报告 SJTU OJ 1280 整装待发
    【算法学习笔记】22.算法设计初步 二分查找 上下界判断
    【算法学习笔记】21.算法设计初步 求第k个数 划分法 快排法
    【算法学习笔记】20.算法设计初步 归并排序 求逆序数
    【算法学习笔记】19.算法设计初步 最大子列和问题的几种方法
    【算法学习笔记】18.暴力求解法06 隐式图搜索2 八数码问题 未启发
  • 原文地址:https://www.cnblogs.com/bingyun84/p/1556049.html
Copyright © 2011-2022 走看看