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" 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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
