具有可调整大小列的数据网格背景问题答案

【问题标题】：Datagrid with resizable columns background problem具有可调整大小列的数据网格背景问题
【发布时间】：2020-11-21 11:28:58
【问题描述】：

我有一个具有特定背景（“#DDD”）和固定宽度的数据网格。列必须可调整大小。我的问题是，当我使用我的应用程序并以使用少于数据网格中所有可用空间的方式调整数据网格的列大小时，“未使用的空间背景”变为白色。它很丑陋，我希望有一个统一的背景。 This is an image of my problem.

我尝试添加一个宽度为“*”的 void 列，在调整大小之前效果很好

有没有办法在列之外获得所需的颜色？

附言我也在从静态资源中应用 cellStyle，不知道这是否是问题所在。

p.p.s.这是我的网格代码：

<DataGrid         SelectionMode="Extended"
                  ItemsSource="{Binding Path=CollectionView}"
                  AutoGenerateColumns="False"
                  Background="#DDD"
                  BorderThickness="0"
                  Margin="20,0,20,0"
                  VerticalAlignment="Stretch"
                  HorizontalAlignment="Stretch"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  CellStyle="{StaticResource DataGridCellStyle1}"
                  RowHeaderWidth="0"
                  CanUserAddRows="false"
                  GridLinesVisibility="None"
                  Grid.Row="1"
                  MaxWidth="5000" 
                  

            <DataGrid.Columns>
                <DataGridTextColumn Header="Id"
                                    Binding="{Binding Id}"
                                    Width="auto"
                                    MinWidth="50"
                                    IsReadOnly="True"
                                    SortMemberPath= "OrderId"
                                    SortDirection="Ascending"/>

                <DataGridTemplateColumn MinWidth="80"
                                        Header="Enable"
                                        IsReadOnly="False"
                                        SortMemberPath="OrderEnable">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox Content=""
                                      IsChecked="{Binding Path=isSelected, 
      Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                       IsEnabled="{Binding Path=CheckEnabled, 
      Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                      HorizontalAlignment="Center">                                    
                            </CheckBox>
                        </DataTemplate>

                    </DataGridTemplateColumn.CellTemplate>

                </DataGridTemplateColumn>

                <DataGridTextColumn Header="Creation Date"
                                    Binding="{Binding CreationDate}"
                                    Width="200"
                                    MinWidth="200"
                                    IsReadOnly="True" 
                                    SortMemberPath="OrderCreationDate"/>
                <DataGridTextColumn Header="Last Modified"
                                    Binding="{Binding Date}"
                                    Width="200"
                                    MinWidth="200"
                                    IsReadOnly="True" 
                                    SortMemberPath="OrderDate"/>
                <DataGridTextColumn Header="Name"
                                    Binding="{Binding Name}"
                                    Width="150"
                                    MinWidth="150"
                                    IsReadOnly="True" 
                                    SortMemberPath="OrderName"/>
                <DataGridTextColumn Header="Description "
                                    Binding="{Binding Description}"
                                    Width="auto"
                                    IsReadOnly="True"
                                    MinWidth="50" 
                                    SortMemberPath="OrderDescription"/>
                <DataGridTextColumn Header=""
                                    Width="*"
                                    IsReadOnly="True" />
            </DataGrid.Columns>
        </DataGrid>

还有我的 cellstyle 代码：

<Style x:Key="DataGridCellStyle1"
           TargetType="{x:Type DataGridCell}">
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="TextBlock.TextAlignment"
                Value="Center" />
        <Setter Property="TextBlock.VerticalAlignment"
                Value="Bottom" />
        <Setter Property="TextBlock.VerticalAlignment"
                Value="Center" />

        <Setter Property="ToolTip">
            <Setter.Value>
                <ToolTip>
                    <ItemsControl ItemsSource="{Binding Path=Errors}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding 
                                    ErrorHeader.Message}" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                </ToolTip>
            </Setter.Value>
        </Setter>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="TextBlock.FontSize"
                Value="14" />
        <Setter Property="Height"
                Value="30" />
        <Setter Property="TextBlock.Background"
                Value="#DDD" />
        <Setter Property="Background"
                Value="#DDD" />
        <Setter Property="Margin"
                Value="0" />
        <Setter Property="Padding"
                Value="10,20,10,20" />

        <Style.Triggers>
            <Trigger Property="IsSelected"
                     Value="True">
                <Setter Property="Background"
                        Value="#09F" />
                <Setter Property="Foreground"
                        Value="White" />
            </Trigger>

            <DataTrigger Binding="{Binding Incompatible}"
                         Value="True">
                <Setter Property="Background"
                        Value="#80F02020" />
            </DataTrigger>


            <DataTrigger Binding="{Binding Warning}"
                         Value="True">
                <Setter Property="Background"
                        Value ="#80FF5500" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

【问题讨论】：

你的猜测和我的一样好。除非您尝试缩小问题范围，使其“可重现”，然后在此处“发布相关源代码”以便我们提供帮助。

标签： wpf xaml datagrid background-color

【解决方案1】：

作为记录，当我将上面的代码复制到测试项目中时，我没有看到您的图像中显示的白色矩形。即使我开始调整列的大小，您在末尾添加额外的 * 列的解决方案似乎也有效。也就是说，也许我没有像你一样调整列的大小。此外，这不是理想的解决方案。

白色似乎来自DataGridRows 的背景。将此样式添加到DataGrid 可以解决问题，而无需添加额外的列：

<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Setter Property="Background" Value="#DDD"/>
    </Style>
</DataGrid.RowStyle>

【讨论】：