Customizing Silverlight 3 DataGrid Headers

from :http://weblogs.asp.net/dwahlin/archive/2009/06/11/customizing-silverlight-3-datagrid-headers.aspx

We’re currently working on a client application that captures time sheet information and needed the ability to completely customize the look and feel of DataGrid headers.  Fortunately, that’s fairly straightforward to do in Silverlight 3 (or Silverlight 2 for that matter).  Nearly all of the columns being used are DataGridTemplateColumn types (although that’s not required to customize headers) and changing the header is accomplished by using the HeaderStyle property as shown next:


<data:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource TimeSheetDayHeaderStyle}">
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBox Text="{Binding TuesdayQuantity}" Style="{StaticResource TimeSheetTextBoxStyle}"/>
                <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
                <TextBox Text="{Binding TuesdayHours}" Margin="2,0,0,0" Style="{StaticResource TimeSheetTextBoxStyle}"/>
            </StackPanel>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>


The tricky part of creating a custom header for the first time is knowing what the style’s TargetType should be.  You’ll need to reference the System.Windows.Controls.Primitives namespace as shown next as it contains the DataGridColumnHeader type: 


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


Once that’s available you can define the styles.  We needed stacked headers that displayed each day of the week as well as hours and quantity under the day and ended up going with the following styles (note that Silverlight 3’s new BasedOn feature is being used).  The TimeSheetDayHeaderStyle style defines the stacked headers using a Grid control. 


<Style x:Key="DataGridBaseHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader">
    <Setter Property="FontWeight" Value="Bold" />
</Style>


<Style x:Key="TimeSheetTotalsHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader"
       BasedOn="{StaticResource TimeSheetDayHeaderStyle}">
    <Setter Property="Foreground" Value="#FFFF0000"/>
</Style>


<Style x:Key="TimeSheetDayHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader" 
       BasedOn="{StaticResource DataGridBaseHeaderStyle}">
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
    <Setter Property="Padding" Value="8"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid x:Name="Root">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundRectangle" 
                                                    Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#7FFFFFFF"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#CCFFFFFF"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#F2FFFFFF"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundRectangle" 
                                                    Storyboard.TargetProperty="(Fill).Color" To="#FF448DCA"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" To="#D8FFFFFF"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" To="#C6FFFFFF"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" To="#8CFFFFFF"/>
                                    <ColorAnimation Duration="0" 
                                                    Storyboard.TargetName="BackgroundGradient" 
                                                    Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" To="#3FFFFFFF"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SortStates">
                            <VisualState x:Name="Unsorted"/>
                            <VisualState x:Name="SortAscending" />
                            <VisualState x:Name="SortDescending" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
                    <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
                        <Rectangle.Fill>
                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                <GradientStop Color="#D1FFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </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="50"/>
                            <ColumnDefinition Width="1" /> 
                            <ColumnDefinition Width="50"/>
                        </Grid.ColumnDefinitions>
                        <!-- Row 0 -->
                        <ContentPresenter Content="{TemplateBinding Content}" 
                                          VerticalAlignment="Center" HorizontalAlignment="Center" 
                                          Grid.ColumnSpan="3" />
                        
                        <!-- Row 1 -->
                        <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1" 
                                   Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" />
                        <!-- Row 2 -->
                        <ContentPresenter Content="Qty" Grid.Row="2" VerticalAlignment="Center" 
                                          HorizontalAlignment="Center" />
                        <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"  
                                   Visibility="Visible" Grid.Row="2" Grid.Column="1" />
                        <ContentPresenter Content="Hours" Grid.Row="2" Grid.Column="2" 
                                          VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                    <Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA" 
                               VerticalAlignment="Stretch" Width="1" Visibility="Visible" 
                               Grid.Row="1" Grid.Column="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


The end result is a grid with headers that are just like the client wanted:


image


 


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值