UWP Stretch GridView

Question

如何拉伸GridViewItem horizo​​ntaly？试图设置属性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.