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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值