自动调整项目宽度的 GridView答案

【问题标题】：GridView with item width adjusted automatically自动调整项目宽度的 GridView
【发布时间】：2017-02-14 22:37:23
【问题描述】：

我有一个网格视图，其中项目源 xbind 到一个可观察的集合。该集合由用户控件（本质上是一个按钮）组成。我希望网格视图以下列方式容纳项目。

1) 如果它可以在一行中显示两个项目。

2) 如果只能显示一项，需要拉伸以占据全部空间。

如果不遵循第 2 点，则一行中只有一个项目，因为第二个项目无法进入第一行，所有这些空白空间看起来非常糟糕。

<GridView ItemsPanel="{StaticResource VariableSizedItemTemplate}" ItemContainerStyleSelector="{StaticResource VariableSizedStyleSelector}" Name="ContentGrid" ItemsSource="{x:Bind projectsButtonCollection,Mode=OneWay}"></GridView>

 <ItemsPanelTemplate x:Key="VariableSizedItemTemplate">
   <VariableSizedWrapGrid Orientation="Horizontal"/>
 </ItemsPanelTemplate>

VariableSizedStyle 选择器当前正在根据用户控件的属性分配样式。属性只是我们在创建用户控件时初始化的 int。样式有 Row 和 col 跨度。

 <Setter Property="VariableSizedWrapGrid.RowSpan"
           Value="2" />
 <Setter Property="VariableSizedWrapGrid.ColumnSpan"
           Value="2" />

我不认为当前的代码会有所帮助，因为我想改变我现在正在做的事情，项目调整得很漂亮，直到每行只有一个用户控件的空间。然后我就有了所有剩余的空间。

【问题讨论】：

你能展示一些你的代码吗？
添加了 GridView 面板和样式细节。
如果您不想重新发明轮子，UWP Community Toolkit 中有一个 AdaptiveGridView 可以满足您的需求，

标签： c# gridview uwp uwp-xaml

【解决方案1】：

实现您想要做的事情的一种方法是通过触发 GridView_SizeChanged 事件并根据窗口的大小，您可以拥有 1、2、3、4 项等，以方便为准。在这段代码中，我在下面的代码中做了类似的事情

private async void GridView_SizeChanged(object sender, SizeChangedEventArgs e)
{
    try
    {
        ItemsWrapGrid itemsWPGrid = (ItemsWrapGrid)((GridView)sender).ItemsPanelRoot;
        double viewWidth = ApplicationView.GetForCurrentView().VisibleBounds.Width;
        int number = 2;
        //here 200 is the size if the item and number is the number of items in a row
        number = Convert.ToInt32(Math.Floor(viewWidth / 200));
        Debug.WriteLine("The current height is " + itemsWPGrid.ItemHeight + " and width " + itemsWPGrid.ItemWidth + "and view width " + viewWidth);
        {
            await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
               () =>
               {
                    //Set the width of the items based on how many number of items that can fit
                   if (viewWidth < 350)
                   {
                       //Display 2 items in a row and the 45 is used for margin/padding
                       itemsWPGrid.ItemWidth = (viewWidth - 45) / 2;
                   }
                   else if (number >= 4 && viewWidth >= 500)
                   {
                       itemsWPGrid.ItemWidth = (viewWidth - 100) / (number - 1);
                   }
                   else if (number == 3 && viewWidth < 400)
                   {
                       if (viewWidth < 375)
                           itemsWPGrid.ItemWidth = (viewWidth - 10) / number;
                       else
                           itemsWPGrid.ItemWidth = (viewWidth - 30) / number;
                   }
                   else if (number == 3 && viewWidth > 400)
                   {
                       itemsWPGrid.ItemWidth = (viewWidth - 50) / number;
                   }


                   //Below takes care of the condition to make sure the aspect ratio is corrected.
                   if (!double.IsNaN(itemsWPGrid.ItemWidth) && viewWidth > 350)
                       itemsWPGrid.ItemHeight = itemsWPGrid.ItemWidth * 1.7;
                   else if (viewWidth == 360 && double.IsNaN(itemsWPGrid.ItemWidth))
                   {
                       itemsWPGrid.ItemHeight = viewWidth / 3 * 1.7;
                   }
                   else if (!double.IsNaN(itemsWPGrid.ItemWidth))
                   {
                       itemsWPGrid.ItemHeight = itemsWPGrid.ItemWidth * 1.5;
                   }
               });
        }
        Debug.WriteLine("The new height is " + itemsWPGrid.ItemHeight + " and width " + itemsWPGrid.ItemWidth + "and view width " + viewWidth);
    }
    catch
    {

    }
}

【讨论】：