UWP Telerik RadDataGrid 随页面扩展但不收缩

Question

我有一个 RadDataGrid，用于显示一些业务数据。除了一列之外，所有列都是固定大小，因此应该扩展一列以填补空白。当页面扩展时，网格会扩展，并且一列会随之增长。当我尝试将页面缩小时，网格保持相同的大小，而页面却获得了滚动条。如果我非常缓慢地缩小页面，我可以让它缩小，但是一旦鼠标加快速度，它就会松开并停止缩小。我尝试将其包装在网格或 RelativePanel 中，但都没有产生任何影响。

我查看了示例代码和使用网格的 Enterprise Contorso 演示，它们似乎能够根据需要扩展和缩小。

XAML 示例：

<Page x:Class="RadDataGridTest.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:RadDataGridTest"
  xmlns:Grid="using:Telerik.UI.Xaml.Controls.Grid"
  xmlns:telerikGridPrimitive="using:Telerik.UI.Xaml.Controls.Grid.Primitives"
  xmlns:Primitives="using:Telerik.UI.Xaml.Controls.Primitives"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Grid:RadDataGrid ItemsSource="{x:Bind DataItems, Mode=OneWay}"
                      UserGroupMode="Disabled"
                      UserFilterMode="Disabled"
                      UserColumnReorderMode="None"
                      UserSortMode="None"
                      AutoGenerateColumns="False"
                      GridLinesVisibility="Horizontal">
        <Grid:RadDataGrid.Columns>
            <Grid:DataGridNumericalColumn Header="1"
                                          PropertyName="Key"
                                          SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="2"
                                     PropertyName="First"
                                     SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="3"
                                     PropertyName="Second"
                                     SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="Stretchy"
                                     PropertyName="Stretch" />
            <Grid:DataGridTextColumn Header="5"
                                     PropertyName="SecondLast"
                                     SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="6"
                                     PropertyName="Last"
                                     SizeMode="Auto" />
            <Grid:DataGridNumericalColumn Header="7"
                                          PropertyName="Count"
                                          SizeMode="Auto" />
        </Grid:RadDataGrid.Columns>
    </Grid:RadDataGrid>
</Grid>

对我可能做错的任何帮助？

Answer 1

我能够重现这一点。你没有做错任何事情，当窗口大小改变时，中心列应该调整大小。

我已将其添加到待办事项中，您可以在此反馈门户项目中投票并关注：

https://feedback.telerik.com/Project/167/Feedback/Details/250207-datagrid-when-start-and-end-columns-are-auto-sized-the-middle-stretch-sized-col

订阅后，您会在项目状态发生变化时收到通知。

解决方法

有一个解决方法，你可以试试。如果将 Stretchy 列的 SizeMode 设置为 Fixed，则可以在 DataGrid 的大小发生变化时手动调整其大小。

第 1 步 - 订阅 DataGrid.SizedChanged 并将 Stretchy 列的 SizeMode 设置为 Fixed

<grid:RadDataGrid SizeChanged="DataGrid_OnSizeChanged" ...>
    <grid:RadDataGrid.Columns>
        ...
        <grid:DataGridTextColumn Header="Stretchy"
                                 PropertyName="Stretch"
                                 SizeMode="Fixed"
                                 Width="200"/>
        ...
    </grid:RadDataGrid.Columns>
</grid:RadDataGrid>

第 2 步 - 在 OnSizeChanged 中，使用可用空间更新 Stretchy 列的宽度（请参阅我的代码 cmets）

private void DataGrid_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
    // for performance improvement only do this when the resize is larger than 1 px
    if (e.NewSize.Width - e.PreviousSize.Width > 1)
        return;

    if (sender is RadDataGrid dg && dg.Columns.Count > 0)
    {
        var middleColumn = dg.Columns[3];

        if (middleColumn == null)
            return;

        double autoColumnsWidthTotal = 0;

        // iterate over all the other columns and add the total width
        foreach (var column in dg.Columns)
        {
            if (column != middleColumn)
            {
                autoColumnsWidthTotal = autoColumnsWidthTotal + column.Width;
            }
        }

        // Get the remaining with available for the "Stretchy" column
        var remainingSpace = e.NewSize.Width - autoColumnsWidthTotal;

        // Set the Stretchy column's width using the remaingin space
        // IMPORTANT: You need to set the column's SizeMode to Fixed in order for it to respect the Width value.
        middleColumn.Width = remainingSpace;
    }
}

Answer 2

以防万一其他人想看看我如何接受 Lance 的答案并根据我的需要让它发挥作用：

    private void OnLayoutUpdated(object sender, object e)
    {
        if (agendaDataGrid == null || agendaDataGrid.Columns.Count <= 0
            || ItemNameColumn == null)
        {
            return;
        }

        // iterate over all the other columns and add the total width
        double autoColumnsWidthTotal = agendaDataGrid.Columns.Sum(c => c.ActualWidth)
            - ItemNameColumn.ActualWidth;

        if (autoColumnsWidthTotal < 10)
            return;

        // Get the remaining with available for the "Stretchy" column
        double remainingSpace = agendaDataGrid.ActualWidth
            - agendaDataGrid.Margin.Left - agendaDataGrid.Margin.Right
            - agendaDataGrid.Padding.Left - agendaDataGrid.Padding.Right
            - autoColumnsWidthTotal - 5;

        if (remainingSpace < 100)
        {
            remainingSpace = 100;
        }

        // Set the Stretchy column's width using the remaining space
        // IMPORTANT: You need to set the column's SizeMode to Fixed
        // in order for it to respect the Width value.
        ItemNameColumn.Width = remainingSpace;
    }