我的 GridView 中的 ItemsGroups 不换行并且位于屏幕外

Question

我刚刚实现了一个带有组功能的 GridView。我有一个按发行日期分组的电视节目剧集列表。 当我有超过 3 集的日期时，我想将我的项目打包并放在组标题旁边，此时，下一个项目正在屏幕之外，这不是我想要的。

如您所见，每天在复制的剧集下还有其他剧集，我希望它们与其他剧集相邻，而不是在下。 这是我的 XAML 代码，谢谢 :)

<GridView Margin="70,0,0,40" ItemsSource="{Binding Source={StaticResource cvsActivities}}">
                <GridView.Template>
                    <ControlTemplate>
                        <ItemsPresenter />
                    </ControlTemplate>
                </GridView.Template>
                <GridView.ItemContainerTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition IsStaggeringEnabled="True" />
                        <RepositionThemeTransition />
                        <AddDeleteThemeTransition />
                    </TransitionCollection>
                </GridView.ItemContainerTransitions>
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <StackPanel Orientation="Vertical">
                                <Grid Name="grid_image">
                                    <Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="Assets/no_image.png" />
                                    <Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="{Binding saison.serie.poster}" />
                                </Grid>
                                <Image Source="Assets/Ban-1hh.png" Width="280" Height="59" Margin="0,-19,0,0"/>
                                <Grid Margin="0,-40,0,0" Height="40">
                                    <StackPanel HorizontalAlignment="Left" Orientation="Vertical" VerticalAlignment="Center" Margin="0,-7,0,0">
                                        <TextBlock HorizontalAlignment="Left" Margin="5,0,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="20" Text="{Binding saison.serie.nom}" />
                                        <TextBlock HorizontalAlignment="Left" Margin="5,-5,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="13" Text="{Binding date}" />
                                    </StackPanel>
                                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Vertical" Margin="0,-5,5,0">
                                        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
                                            <TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding saison.number}" />
                                            <TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Saison " />
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft" Margin="0,-5,0,0">
                                            <TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding ep_number}" />
                                            <TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Episode " />
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Background="LightGray"  >
                                    <TextBlock Text="{Binding Key, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dddd dd MMM yy}'}"  Foreground="Black" Margin="10"
                       Style="{StaticResource PageSubheaderTextStyle}" />
                                </Grid>

                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>

Answer 1

添加ItemsPanelTemplate（如果您查看默认的 GridApp 和 GroupedItemsPage.xaml，您会发现它们是这样做的）。

<GroupStyle.Panel>
   <ItemsPanelTemplate>
      <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" />
   </ItemsPanelTemplate>
</GroupStyle.Panel>

如果您希望列中的第 3 个元素从底部泄漏，则可以在 GridView 本身上设置负的底部边距。

Answer 2

您实际上删除了 GridView 控件模板，所以难怪它不起作用。删除以下部分，事情可能会恢复正常：

<GridView.Template>
    <ControlTemplate>
        <ItemsPresenter />
    </ControlTemplate>
</GridView.Template>

如果您想在默认模板中更改某些内容 - 更改该特定内容。默认模板有一个水平 ScrollViewer，它限制 WrapGrid 用于其 ItemsPanelTemplate 的垂直空间使用，并允许项目换行到下一列，同时还允许水平滚动以查看所有项目。