GridView ItemTemplate全宽

Question

我的问题是：如何将DataTemplate拉伸到屏幕的整个宽度。我尝试了很多解决方案，但它们不起作用。 我已尝试HorizontalContentAlignment，设置GridView.ItemContainerStyle等等但没有任何作用。谁能解释我怎么能这样做？

以下是我的代码的一部分：

<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

使其成功的关键是改变ItemsPanelTemplate。将其定义为页面资源：

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

现在将其设为ItemsPanel的{​​{1}}：

GridView

这将允许单个项目在整个宽度上伸展。您仍然需要使用<GridView ItemsSource="{x:Bind CheckoutList}" Margin="5,0,5,0" ItemsPanel="{StaticResource ResourceKey=ItemsPanelTemplate}"> 替换StackPanel中的根DataTemplate，如Nikita建议的那样：

Grid

您已为内部<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> 正确设置了Grid.Column属性。您似乎之前尝试使用StackPanel。