Customizing Silverlight 3 DataGrid Headers

最新推荐文章于 2024-02-25 20:47:27 发布

--茶--

最新推荐文章于 2024-02-25 20:47:27 发布

阅读量742

点赞数

分类专栏：转贴

转贴专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何在Silverlight 3应用中完全定制数据网格头部的外观和感觉，包括创建自定义的堆叠式头部以显示每周的工作日、小时数和数量，并通过使用HeaderStyle属性来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

<ContentPresenter Content="{TemplateBinding Content}"
VerticalAlignment="Center" HorizontalAlignment="Center"
Grid.ColumnSpan="3" />


<Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"
Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" />

<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