UWP拉伸GridView [英] UWP Stretch GridView

问题描述

如何水平拉伸GridViewItem？尝试在 ItemContainerStyle 中设置属性 Horizo​​ntalContentAlignment 或样式属性。这无济于事。

How to stretch GridViewItem horizontaly? Trying to set property HorizontalContentAlignment or style property in ItemContainerStyle. This does not help.

这里是代码：

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

推荐答案

默认情况下， GridView 使用

尽管您已设置 Horizo​​ntalContentAlignment 或 Horizo​​ntalAlignment 到 Stretch 到 GridViewItem ，但是 GridViewItem 的大小受 ItemsWrapGrid 的限制。

Although you've set HorizontalContentAlignment or HorizontalAlignment to Stretch for GridViewItem, but the size of GridViewItem is limited by ItemsWrapGrid.

ItemsWrapGrid 将子元素从左到右或从上到下依次放置在 ItemsControl 显示多个项目。当元素超出容器边缘时，元素将位于下一行或下一列。

ItemsWrapGrid positions child elements sequentially from left to right or top to bottom in an ItemsControl that shows multiple items. When elements extend beyond the container edge, elements are positioned in the next row or column.

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

So in ItemsWrapGrid, items won't be stretched.

如果要水平拉伸 GridViewItem ，我们可以使用 ItemsStackPanel 而不是像 ItemsWrapGrid 那样：

If you want to stretch GridViewItem horizontaly, we can use ItemsStackPanel instead of ItemsWrapGrid like following:

在资源中，添加 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 。

Or we can use ListView instead of GridView as ListView's default ItemsPanel is ItemsStackPanel.

这篇关于UWP拉伸GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！