UWP 拉伸网格视图答案

【问题标题】：UWP Stretch GridViewUWP 拉伸网格视图
【发布时间】：2016-05-27 10:12:39
【问题描述】：

如何水平拉伸 GridViewItem？试图在ItemContainerStyle 中设置属性HorizontalContentAlignment 或样式属性。这没有帮助。

这是一个代码：

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

【问题讨论】：

标签： c# .net xaml uwp win-universal-app

【解决方案1】：

GridView默认使用ItemsWrapGrid作为面板来定位和排列GridViewItem，你可以从Live Visual Tree找到这个：

虽然您已将GridViewItem 的HorizontalContentAlignment 或HorizontalAlignment 设置为Stretch，但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。

【讨论】：