在Silverlight中更改Datagrid标题的背景颜色 [英] Change background color of Datagrid Header in Silverlight

问题描述

解决方案

尽管DataGrid没有公开Header Background属性它确实有一个ColumnHeaderStyle的属性。使用DaniCE以前建议使用单列的技术，我们可以替换所有标题列的标题模板，包括右侧的空白处。替换标题的整个模板的缺点是我们丢失了默认标题模板中存在的排序箭头和分隔符。幸运的是，我们可以使用模板浏览器来提取正在使用的默认模板，然后修改它的副本。

这里我将一个快速的例子，将改变背景列标题到LightBlue，同时保持分隔符和排序。请查看模板浏览器，以了解当鼠标悬停在ColumnHeader上时如何处理背景。

DataGrid标题背景http://i34.tinypic.com/2q2ixch.jpg

 < data：DataGrid x：Name =grid> 
< data：DataGrid.ColumnHeaderStyle> 
< Style 
 xmlns：primitives =clr-namespace：System.Windows.Controls.Primitives; assembly = System.Windows.Controls.Data
 xmlns：vsm =clr-namespace ：System.Windows; assembly = System.Windows
 TargetType =primitives：DataGridColumnHeader> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =primitives：DataGridColumnHeader> 
< Grid Name =Root> 
< vsm：VisualStateManager.VisualStateGroups> 
< vsm：VisualStateGroup x：Name =SortStates> 
< vsm：VisualStateGroup.Transitions> 
< vsm：VisualTransition GeneratedDuration =00：00：0.1/> 
< / vsm：VisualStateGroup.Transitions> 
< vsm：VisualState x：Name =未排序/> 
< vsm：VisualState x：Name =SortAscending> 
< Storyboard> 
< DoubleAnimation Storyboard.TargetName =SortIconStoryboard.TargetProperty =OpacityDuration =0To =1.0/> 
< / Storyboard> 
< / vsm：VisualState> 
< vsm：VisualState x：Name =SortDescending> 
< Storyboard> 
< DoubleAnimation Storyboard.TargetName =SortIconStoryboard.TargetProperty =OpacityDuration =0To =1.0/> 
< DoubleAnimation Storyboard.TargetName =SortIconTransformStoryboard.TargetProperty =ScaleYDuration =0To = - 。9/> 
< / Storyboard> 
< / vsm：VisualState> 
< / vsm：VisualStateGroup> 
< / vsm：VisualStateManager.VisualStateGroups> 
< Grid.RowDefinitions> 
< RowDefinition Height =*/> 
< RowDefinition Height =*/> 
< RowDefinition Height =Auto/> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =Auto/> 
< ColumnDefinition Width =*/> 
< ColumnDefinition Width =Auto/> 
< /Grid.ColumnDefinitions> 
< Rectangle x：Name =BackgroundRectangleStretch =FillFill =LightBlueGrid.ColumnSpan =2Grid.RowSpan =2/> 
< ContentPresenter Grid.RowSpan =2Content ={TemplateBinding Content}Cursor ={TemplateBinding Cursor}Horizo​​ntalAlignment ={TemplateBinding Horizo​​ntalContentAlignment}VerticalAlignment ={TemplateBinding VerticalContentAlignment}Margin ={ TemplateBinding Padding}/> 
< Rectangle Name =VerticalSeparatorGrid.RowSpan =2Grid.Column =2Width =1VerticalAlignment =StretchFill ={TemplateBinding SeparatorBrush}Visibility ={TemplateBinding SeparatorVisibility }/> 
< Path Grid.RowSpan =2Name =SortIconRenderTransformOrigin =。5，.5Horizo​​ntalAlignment =LeftVerticalAlignment =CenterOpacity =0Grid.Column =1 Stretch =UniformWidth =8Data =F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z> 
< Path.Fill> 
< SolidColorBrush Color =＃FF444444/> 
< /Path.Fill> 
< Path.RenderTransform> 
< TransformGroup> 
< ScaleTransform x：Name =SortIconTransformScaleX =。9ScaleY =。9/> 
< / TransformGroup> 
< /Path.RenderTransform> 
< / Path> 
< / Grid> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< / data：DataGrid.ColumnHeaderStyle> 
< / data：DataGrid> 
  

希望这有帮助！

I want to change background color of Datagrid header in Silverlight.

解决方案

Although the DataGrid does not expose a Header Background property, it does have a property for the ColumnHeaderStyle. Using the technique that DaniCE has previously suggested for a single column we can replace the header template for all header columns including the empty space on the right hand side. The down side with replacing the entire template for a header is that we lose the sorting arrows and separators which are present in the default header template. Fortunately we can use a template browser to extract the default template being used and then modify a copy of it.

Here I've thrown together a quick example that will change the background of the column headers to LightBlue while keeping the separators and sorting. Take a look at the default DataGridColumnHeader template in a template browser to see how to deal with modifying the Background when the mouse hovers over the ColumnHeader.

DataGrid Header Background http://i34.tinypic.com/2q2ixch.jpg

<data:DataGrid x:Name="grid">
    <data:DataGrid.ColumnHeaderStyle>
        <Style 
            xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data" 
            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
            TargetType="primitives:DataGridColumnHeader" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="primitives:DataGridColumnHeader">
                        <Grid Name="Root">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="SortStates" >
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition GeneratedDuration="00:00:0.1" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Unsorted" />
                                    <vsm:VisualState x:Name="SortAscending">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="SortDescending">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
                                            <DoubleAnimation Storyboard.TargetName="SortIconTransform" Storyboard.TargetProperty="ScaleY" Duration="0" To="-.9" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="LightBlue" Grid.ColumnSpan="2" Grid.RowSpan="2"  />
                            <ContentPresenter Grid.RowSpan="2" Content="{TemplateBinding Content}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
                            <Rectangle Name="VerticalSeparator" Grid.RowSpan="2" Grid.Column="2" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />
                            <Path Grid.RowSpan="2" Name="SortIcon" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Grid.Column="1" Stretch="Uniform" Width="8" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                                <Path.Fill>
                                    <SolidColorBrush Color="#FF444444" />
                                </Path.Fill>
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform x:Name="SortIconTransform" ScaleX=".9" ScaleY=".9"  />
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </data:DataGrid.ColumnHeaderStyle>
</data:DataGrid>

Hope this helps!

这篇关于在Silverlight中更改Datagrid标题的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！