【问题标题】:Change background color of Datagrid Header in Silverlight在 Silverlight 中更改 Datagrid Header 的背景颜色
【发布时间】:2010-09-24 10:47:23
【问题描述】:

我想在 Silverlight 中更改 Datagrid 标题的背景颜色。

【问题讨论】:

    标签: silverlight datagrid silverlight-2.0


    【解决方案1】:

    虽然 DataGrid 没有公开 Header Background 属性,但它确实具有 ColumnHeaderStyle 的属性。使用 DaniCE 之前为单个列建议的技术,我们可以替换所有标题列的标题模板,包括右侧的空白区域。将整个模板替换为标题的缺点是我们丢失了默认标题模板中存在的排序箭头和分隔符。幸运的是,我们可以使用template browser 来提取正在使用的默认模板,然后修改它的副本。

    在这里,我汇总了一个快速示例,它将列标题的背景更改为 LightBlue,同时保留分隔符和排序。查看template browser 中默认的DataGridColumnHeader 模板,了解当鼠标悬停在ColumnHeader 上时如何处理修改背景。

    <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>
    

    希望这会有所帮助!

    【讨论】:

    • 这对大卫很有帮助!
    • 不幸的是,这并没有居中对齐标题文本..尽管我已经尝试了一切
    【解决方案2】:

    我想出了一个“干净”的解决方案。希望它对你有用。 我只是重写了 DataGrid 并公开了 GetTemplateChild 方法。使用它,您可以访问 DataGridColumnHeaderPresenter 和其中包含的 DataGridColumnHeaders...

    1) 覆盖数据网格

    /// <summary>
    /// Extends the DataGrid so that it's possible to access the template objects
    /// </summary>
    public class DataGridEx : System.Windows.Controls.DataGrid
    {
        /// <summary>
        /// Exposes Template items
        /// </summary>
        public Object GetTemplateObject(String name)
        {
            return this.GetTemplateChild(name);
        }
    }
    

    2) 改变背景

    DataGridEx 网格 = 新 DataGridEx();

    ...应用模板后...

    DataGridColumnHeadersPresenter obj = DataGrid.GetTemplateObject("ColumnHeadersPresenter") as DataGridColumnHeadersPresenter;

    DataGridColumnHeader h = obj.Children[0] as DataGridColumnHeader;

    h.Background = new SolidColorBrush(Colors.Red);

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-06-16
      • 1970-01-01
      • 2018-09-26
      • 2015-08-22
      • 2011-05-11
      • 2010-12-03
      • 1970-01-01
      相关资源
      最近更新 更多