GridView ItemTemplate Volle Breite

Question

Meine Frage ist: Wie kann ich das DataTemplate auf die volle Breite des Bildschirms strecken. Ich habe viele Lösungen ausprobiert, aber sie funktionieren nicht. Ich habe versucht HorizontalContentAlignment, Einstellung GridView.ItemContainerStyle und usw. Aber nichts funktioniert. Kann mir jemand erklären, wie ich das machen kann?

Hier ist ein Teil meines Code:

<Grid Style="{StaticResource GeneralAppBackground}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Pivot x:Name="AccountInfoOptions" Grid.Row="1"> 
     <PivotItem Header="История"> 
      <GridView ItemsSource="{x:Bind CheckoutList}" Margin="5,0,5,0"> 
       <GridView.ItemTemplate> 
        <DataTemplate x:DataType="data:UserCheckout"> 
         <StackPanel Orientation="Horizontal" BorderBrush="Transparent" Background="White" Padding="5" Margin="0,5,0,0"> 
          <StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0"> 
           <TextBlock FontSize="14" Text="{x:Bind CheckoutDate}" Foreground="#979797" /> 
           <TextBlock FontSize="14" Text="{x:Bind CheckoutTime}" Foreground="#979797" /> 
          </StackPanel> 
          <StackPanel Grid.Column="1" VerticalAlignment="Center"> 
           <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="{x:Bind CheckoutSum}" FontSize="22" FontWeight="Bold" /> 
            <Image Source="/Assets/TengeIcon.png" Width="20" Margin="5,0,0,0"/> 
           </StackPanel> 
           <TextBlock Text="{x:Bind CheckoutTitle}" TextAlignment="Center" /> 
          </StackPanel> 
         </StackPanel> 
        </DataTemplate> 
       </GridView.ItemTemplate> 

       <GridView.ItemContainerStyle> 
        <Style TargetType="GridViewItem"> 
         <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
        </Style> 
       </GridView.ItemContainerStyle> 
      </GridView> 
     </PivotItem> 
    </Pivot> 

Answer 1

Der Schlüssel funktionieren, wird die ItemsPanelTemplate ändern. Definieren Sie es als Seitenressource:

<Page.Resources> 
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate"> 
     <ItemsStackPanel /> 
    </ItemsPanelTemplate> 
</Page.Resources> 

Nun setzen sie als ItemsPanel für Ihre GridView:

<GridView ItemsSource="{x:Bind CheckoutList}" 
      Margin="5,0,5,0" 
      ItemsPanel="{StaticResource ResourceKey=ItemsPanelTemplate}"> 

Dies ermöglicht es einzelne Elemente über die gesamte Breite zu strecken. Sie werden immer noch die Wurzel StackPanel in Ihrem DataTemplate mit einem Grid ersetzen müssen, wie Nikita vorgeschlagen:

<DataTemplate x:DataType="local:UserCheckout"> 
    <Grid BorderBrush="Transparent" Background="White" Padding="5" Margin="0,5,0,0"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0"> 
      <TextBlock FontSize="14" Text="{x:Bind CheckoutDate}" Foreground="#979797" /> 
      <TextBlock FontSize="14" Text="{x:Bind CheckoutTime}" Foreground="#979797" /> 
     </StackPanel> 
     <StackPanel Grid.Column="1" VerticalAlignment="Center"> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{x:Bind CheckoutSum}" FontSize="22" FontWeight="Bold" /> 
       <Image Source="/Assets/TengeIcon.png" Width="20" Margin="5,0,0,0"/> 
      </StackPanel> 
      <TextBlock Text="{x:Bind CheckoutTitle}" TextAlignment="Center" /> 
     </StackPanel> 
    </Grid> 
</DataTemplate> 

Sie haben bereits die Grid.Column Eigenschaft richtig für die inneren StackPanel s eingestellt. Es scheint, dass Sie zuvor versucht haben, eine Grid dort zu verwenden.