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, который показывает несколько элементов. Когда элементы выходят за пределы края контейнера, элементы располагаются в следующей строке или столбце.

So in 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 is ItemsStackPanel.