Question

我有一个带有项目源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选择器当前正在根据用户控件的属性分配样式.Property只是我们在创建用户控件时初始化的int。样式具有Row和col跨度。

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

我不认为当前的代码会有所帮助，因为我想改变我现在正在做的方式，对项目进行精心调整，直到每行只有一个用户控件的空间。然后我把所有这些都留下了空间。

Answer 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
    {

    }
}

GridView自动调整项目宽度

1 个答案: