Gridview 项目动态宽度根据 UWP 中的屏幕大小

Question

我创建了一个通过数据绑定获取数据的GridView。我接下来要做的是根据屏幕尺寸使 GridView 项目宽度动态化（就像他们在 Windows 10 新闻、体育应用程序等中所做的一样 ) 到目前为止，我已经使用视觉状态管理器通过将水平对齐方式设置为拉伸成功地完成了最小 window 宽度 0，但是我无法继续使用其他更宽的 window 尺寸。

如能提供帮助解决此问题，我们将不胜感激。

Answer 1

如果您希望项目拉伸以填充水平 space 和能够指定每行需要多少项目，那么您必须在 GridView 的 SizeChanged 事件中手动设置 ItemsWrapGrid 的 ItemWidth。

这是一个例子：

<GridView x:Name="gridView" SizeChanged="onGridViewSizeChanged">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Background="GreenYellow" BorderBrush="Black" BorderThickness="2">
                <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>

    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Margin" Value="0"/>
        </Style>
    </GridView.ItemContainerStyle>

    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <x:String>1</x:String>
    <x:String>2</x:String>
    <x:String>3</x:String>
    <x:String>4</x:String>
    <x:String>5</x:String>
    <x:String>6</x:String>
    <x:String>7</x:String>
    <x:String>8</x:String>
</GridView>

private void onGridViewSizeChanged(object sender, SizeChangedEventArgs e)
{
    // Here I'm calculating the number of columns I want based on
    // the width of the page
    var columns = Math.Ceiling(ActualWidth / 300);
    ((ItemsWrapGrid)gridView.ItemsPanelRoot).ItemWidth = e.NewSize.Width / columns;
}

您也可以将其捆绑到行为中或附加属性。

Gridview 项目动态宽度根据 UWP 中的屏幕大小

Gridview Item dynamic width according to Screen Size in UWP

xaml

gridview

visualstatemanager

windows-10

uwp