UWP Stretch GridView

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>

Answer 1

默认情况下，GridView使用ItemsWrapGrid作为定位和排列GridViewItem的面板，您可以从实时可视树中找到：

虽然您为HorizontalContentAlignment设置了HorizontalAlignment或Stretch到GridViewItem，但GridViewItem的大小受ItemsWrapGrid的限制。

  

ItemsWrapGrid在显示多个项目的ItemsControl中从左到右或从上到下依次定位子元素。当元素延伸到容器边缘之外时，元素将位于下一行或列中。

所以在ItemsWrapGrid中，项目不会被拉伸。

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

在Resources中，添加ItemsPanelTemplate ItemsStackPanel：

<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。