时间戳

首页 > 解决方案 > 颜色自定义标题 DataGrid

c# - 颜色自定义标题 DataGrid

问题描述

我制作了一个布局表，其中两列合并为一列。它看起来像这样： 在此处输入图像描述

这是我的 XAML 代码，它非常基本：

    <DataGrid x:Name="ReportTable" AutoGenerateColumns="False" ItemsSource="{Binding Report}"
              CanUserResizeRows="False" SelectionMode="Single" IsReadOnly="True" HorizontalScrollBarVisibility="Disabled" HeadersVisibility="Column">
                <DataGridTextColumn ElementStyle="{StaticResource WrapText}" IsReadOnly="true" Header="TEST1" Width="*">
                <DataGridTextColumn.HeaderStyle>
                    <Style TargetType="DataGridColumnHeader">
                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding}"></TextBlock>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </DataGridTextColumn.HeaderStyle>
            </DataGridTextColumn>
            <DataGridTemplateColumn Width="*">
                <DataGridTemplateColumn.HeaderStyle>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                        <Setter Property="Background" Value="{DynamicResource GridViewColumnHeaderBackground}"/>
                        <Setter Property="Margin" Value="4"/>
                    </Style>
                </DataGridTemplateColumn.HeaderStyle>
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate>
                        <Border BorderBrush="{DynamicResource GridViewColumnHeaderBorderBackground}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.5*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="0.5*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Background="Transparent" TextWrapping="Wrap" Grid.ColumnSpan="3" Text="TEST2_1" TextAlignment="Center" Margin="5,5,5,5"/>
                                <Separator Background="{DynamicResource GridViewColumnHeaderBorderBackground}" Grid.ColumnSpan="3" Grid.Row="1" Margin="-4,0,-4,0"/>
                                <TextBlock Background="Transparent" TextWrapping="Wrap" Grid.Row="2" Grid.Column="0"  Text="TEST2_2_1" TextAlignment="Center" Margin="5,5,5,5"/>
                                <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                                    <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="{DynamicResource GridViewColumnHeaderBorderBackground}" Margin="0, -3,0,-3"/>
                                </StackPanel>
                                <TextBlock Background="Transparent" TextWrapping="Wrap" Grid.Row="2" Grid.Column="2" Text="TEST2_2_2" TextAlignment="Center" Margin="5,5,5,5" />
                            </Grid>
                        </Border>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>
            </DataGridTemplateColumn>
           </DataGrid>

我唯一无法实现的是合并列标题的背景颜色，如标准列。我认为屏幕截图会更好地显示情况：

第一列背景颜色标题 - 渐变，第二列 - 白色填充。

如您所见，第一列有一个背景颜色，第二列很奇怪，它没有分布在整个标题中。如何达到预期？

标签： c#wpfxamldatagrid

解决方案

<DataGridTemplateColumn.HeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>

        <Setter Property="Background" Value="{DynamicResource GridViewColumnHeaderBackground}"/>

        <Setter Property="Margin" Value="4"/>
    </Style>
</DataGridTemplateColumn.HeaderStyle>

您更改了模板列的背景。它在某种程度上有所不同。删除背景设置器，两个标题将具有相同的颜色

推荐阅读