GridView ItemTemplate Full Width

Question

My question is: how can I stretch the DataTemplate to the full width of the screen. I've tried many solutions but they does not work. I've tried HorizontalContentAlignment, setting GridView.ItemContainerStyle and etc. But nothing works. Can anybody explain me how can I do this?

Here is part of my 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

The key to making it work, is changing the ItemsPanelTemplate. Define it as a page resource:

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

Now set it as the ItemsPanel for your GridView:

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

This will allow individual items to stretch across the full width. You will still need to replace the root StackPanel in your DataTemplate with a Grid as Nikita suggested:

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

You already have the Grid.Column property set correctly for the inner StackPanels. It seems you were attempting to use a Grid there before.