如何拥有固定数量 columns/lines 的 GridView / AdaptiveGridView？

Question

我正在开发一个电子库存软件，它可以复制组织者的抽屉，所以我需要模仿这些组织者有 X 列和 Y 行抽屉的事实。

现在，我正在使用 AdaptiveGridView（来自 Microsoft.Toolkit.Uwp.UI.Controls）并将 DesiredWidth 绑定到一个计算值 == AdaptiveGridView 的大小/所需列的数量。

这行得通，但有一个警告：当我达到 AdaptiveGridView 接受的最小尺寸作为 DesiredWidth（大约 44）时，列数开始减少（以适应 Windows，这是它的目的，我知道:))

我试图将 AdaptiveGridView 的 MinWidth 固定为 44 * 列数，它起作用了，但是，我看不到最右边的列 => 它们开始被window.

右侧

我尝试启用水平滚动，将 AdaptiveGridView 放入 Scrollviewer 中，......但我无法访问隐藏的列。

那么，你有什么想法吗:

让 GridView 具有固定的列数和行数？
让 AdaptiveGridView 在它的大小时让我水平滚动大于 window ?

谢谢大家！

Answer 1

好的伙计们，我做到了我想做的！

怎么样？在这里…

首先，XAML 部分。我把AdaptiveGridView封装在一个Grid中，Grid封装在一个ScrollViewer中。这里最重要的项目是中间网格。实际上，我将其 MinWidth 属性绑定到 AdaptiveGridView 允许元素的最小尺寸 * 我需要的列数，并且我还将其 Width 绑定到 Scrollviewer 的 ViewportWidth 属性 :

<ScrollViewer Name="ScrlV" ZoomMode="Enabled" MaxZoomFactor="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto" SizeChanged="ScrlV_SizeChanged">
     <Grid MinWidth="{Binding MinGridSize}" Width="{Binding ElementName=ScrlV, Path=ViewportWidth}">
          <control:AdaptiveGridView HorizontalAlignment="Stretch" Name="itemsGrid" CanReorderItems="True" CanDragItems="True" ItemsSource="{Binding List}" DesiredWidth="{Binding ReqWidth}" Height="auto" ItemTemplate="{StaticResource DrawerItem}" SelectionChanged="itemsGrid_SelectionChanged" AllowDrop="True" DragItemsCompleted="itemsGrid_DragItemsCompleted" />
     </Grid>
</ScrollViewer>

因此，当我更改 window 的大小时，我收到事件并相应地修改我的 CurrWidth 属性 :

    private void itemsGrid_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        Items.CurrWidth = (int)e.NewSize.Width;
    }

然后，在后台处理 MinGridSize 和 ReqWidth 值（最小列宽设置为 50）：

public int CurrWidth
{
    get
    {
        return currwidth;
    }
    set
    {
        currwidth = value;
        OnPropertyChanged(new PropertyChangedEventArgs("CurrWidth"));
        OnPropertyChanged(new PropertyChangedEventArgs("ReqWidth"));
        OnPropertyChanged(new PropertyChangedEventArgs("MinGridSize"));
    }
}
public int MinGridSize
{
    get
    {
       return 50 * NbrCol;
    }
}
public int ReqWidth
{
   get
   {
      double width = 0;
      if(NbrCol > 0 && CurrWidth > 0)
      {
         width = CurrWidth / NbrCol;
      }
      else
      {
         width = 50;
      }
      return (int)Math.Round(width, 0);
   }
}

因此，AdaptiveGridView 设置了 DesiredWidth 属性，Grid 也设置了 MinWidth。

最终，Scrollviewer 的宽度为 window，内部网格相应地适应 Scrollviewer ViewportWidth，但限制为最小宽度 = 所需列数 * 列的最小大小。每当我更改 window 的宽度时，AdaptiveGridView 就会发挥作用，直到我达到最小宽度。当它发生时，Grid 停止收缩，AdaptiveGridView 停止适应，我可以水平滚动以查看丢失的列。

干杯！

如何拥有固定数量 columns/lines 的 GridView / AdaptiveGridView？

How to have a GridView / AdaptiveGridView with a fixed number of columns/lines?

c#

windows

xaml

uwp

windows-10-universal