UWP拉伸网格视图

Question

如何横向拉伸GridViewItem？尝试设置属性HorizontalContentAlignment或ItemContainerStyle中的样式属性都没有帮助。

下面是代码：

<GridView ItemsSource="{x:Bind Banks}" SelectionMode="None" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </GridView.ItemContainerStyle>
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="model:Bank">
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding Name}" Grid.Column="0" />

                            <GridView ItemsSource="{x:Bind Departments}" Grid.Row="1" HorizontalContentAlignment="Stretch" IsItemClickEnabled="True" VerticalContentAlignment="Stretch">
                                <GridView.ItemContainerStyle>
                                    <Style TargetType="GridViewItem">
                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                    </Style>
                                </GridView.ItemContainerStyle>
                                <GridView.ItemTemplate>
                                    <DataTemplate x:DataType="model:Department">
                                        <Grid HorizontalAlignment="Stretch">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="250" />
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="40" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="auto" />
                                                <RowDefinition Height="auto" />
                                            </Grid.RowDefinitions>
                                            <TextBlock Text="{Binding Name}" Grid.Column="0" />
                                            <TextBlock Text="{Binding Address}" Grid.Column="0" Grid.Row="1" />

                                            <TextBlock Text="{Binding USD.Date}" Grid.Column="1" Grid.RowSpan="2"/>

                                            <TextBlock Text="{Binding USD.Sell}" Grid.Column="2" />
                                            <TextBlock Text="{Binding USD.Buy}" Grid.Column="2" Grid.Row="1"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridView.ItemTemplate>
                            </GridView>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

- Nickolay Kabash

Answer 1

默认情况下，GridView 使用 ItemsWrapGrid 作为面板来定位和排列 GridViewItem。您可以从 Live Visual Tree 中找到这个信息：

尽管您已将 HorizontalContentAlignment 或 HorizontalAlignment 设置为 Stretch，但 GridViewItem 的大小仍受到 ItemsWrapGrid 的限制。

ItemsWrapGrid 在显示多个项的 ItemsControl 中按顺序从左到右或从上到下定位子元素。当元素超出容器边缘时，元素会在下一行或列中定位。

因此，在 ItemsWrapGrid 中，项不会被拉伸。

如果您想要水平拉伸 GridViewItem，我们可以使用 ItemsStackPanel 代替 ItemsWrapGrid，如下所示：

在 Resources 中，添加一个带有 ItemsStackPanel 的 ItemsPanelTemplate：

<Page.Resources>
    <ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
        <ItemsStackPanel />
    </ItemsPanelTemplate>
</Page.Resources>

然后在 GridView 中使用此模板：

<GridView HorizontalContentAlignment="Stretch"
          VerticalContentAlignment="Stretch"
          ItemsPanel="{StaticResource MyItemsPanelTemplate}"
          ItemsSource="{x:Bind Banks}"
          SelectionMode="None">
    ...
        <GridView Grid.Row="1"
              HorizontalContentAlignment="Stretch"
              VerticalContentAlignment="Stretch"
              IsItemClickEnabled="True"
              ItemsPanel="{StaticResource MyItemsPanelTemplate}"
              ItemsSource="{x:Bind Departments}">
        ...
        </GridView>
    ...
</GridView>

我们可以使用ListView代替GridView，因为ListView的默认ItemsPanel是ItemsStackPanel。

- Jay Zuo