c# - 解决 DataGrid 列宽调整不一致的问题

Question

在我们的应用程序中，我们使用数据网格来布局充满模板化内容和按钮的行，但是会间歇性地出现一个问题，即某些列有时会自行调整到列的最小宽度，有时会调整到列标题内容的宽度。这似乎与设置 itemssource 的时间以及加载事件发生的时间有关，但我无法确定。

不正确行为的例子

正确行为示例

itemssource 绑定(bind)到 View 模型上的 ObservableCollection，它使用 async 和 await 关键字以及数据服务填充异步。

我试图通过在初始化时隐藏所有列来解决这个问题，然后一旦设置了 itemssource 并调用了 isloaded 将所有列设置回初始可见性，这似乎有一些影响但没有解决问题完全。

列定义的 xaml

<Style x:Key="MainDataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <TextBlock Text="{TemplateBinding Content}" Foreground="{StaticResource HighlightedTextBrush}"
                           Background="Transparent"
                           FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="MainDataGridRow" TargetType="{x:Type DataGridRow}">
    <Setter Property="Background" Value="{StaticResource LightBackgroundBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource Faded10MidBackgroundBrush}"/>
    <Setter Property="BorderThickness" Value="0,0,0,1" />
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Padding" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRow}">
                <Border x:Name="DGR_Border"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        SnapsToDevicePixels="True"
                        CornerRadius="0"
                        Margin="0,5"
                        Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}">
                    <SelectiveScrollingGrid>
                        <SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </SelectiveScrollingGrid.ColumnDefinitions>
                        <SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </SelectiveScrollingGrid.RowDefinitions>
                        <DataGridCellsPresenter Grid.Column="1"
                                            ItemsPanel="{TemplateBinding ItemsPanel}"
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <DataGridDetailsPresenter Grid.Column="1"
                                              Grid.Row="1"
                                              SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                              Visibility="{TemplateBinding DetailsVisibility}" />
                        <DataGridRowHeader Grid.RowSpan="2"
                                       SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                       Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                    </SelectiveScrollingGrid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="MainDataGridCell" TargetType="{x:Type DataGridCell}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </Style.Triggers>
</Style>

列标题、行和单元格样式的 xaml

<DataGrid.Columns>
            <DataGridTemplateColumn x:Name="dateColumn" Header="Race Time" MinWidth="110" Width="Auto" CellTemplate="{StaticResource RacesRaceTimeTemplate}" />
            <DataGridTemplateColumn x:Name="iconColumn"  Width="62" CellTemplate="{StaticResource RacesRaceIconTemplate}"/>
            <DataGridTemplateColumn x:Name="nameColumn" Width="*" CellTemplate="{StaticResource RacesRaceDescriptionTemplate}"/>
            <DataGridTemplateColumn x:Name="favsColumn" Width="auto" Header="Fav / 2nd Fav" CellTemplate="{StaticResource RacesFavSelectionsTemplate}" />
            <DataGridTemplateColumn x:Name="additionalColumn" Width="78" CellTemplate="{StaticResource RacesAdditionalOptionsTemplate}" />
        </DataGrid.Columns>

目前，我主要可以通过为列设置硬编码宽度来解决问题，但这不是一个合理的解决方案，因为我们将拥有可变宽度的内容。

有人能解决这个问题吗？

Answer 1

您是否尝试设置所有列的最小宽度，然后根据百分比指定宽度

<DataGrid.Columns>
        <DataGridTemplateColumn x:Name="dateColumn" MinWidth="110" Width="*" Header="Race Time" CellTemplate="{StaticResource RacesRaceTimeTemplate}" />
        <DataGridTemplateColumn x:Name="iconColumn"  MinWidth="62" Width="2*" CellTemplate="{StaticResource RacesRaceIconTemplate}"/>
        <DataGridTemplateColumn x:Name="nameColumn" MinWidth="500" Width="3*" CellTemplate="{StaticResource RacesRaceDescriptionTemplate}"/>
        <DataGridTemplateColumn x:Name="favsColumn" MinWidth="232" Width="3*" Header="Fav / 2nd Fav" CellTemplate="{StaticResource RacesFavSelectionsTemplate}" />
        <DataGridTemplateColumn x:Name="additionalColumn" MinWidth="78" Width="*" CellTemplate="{StaticResource RacesAdditionalOptionsTemplate}" />
</DataGrid.Columns>