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

时间:2013-01-21 00:05:15

标签: xaml gridview windows-8 windows-runtime

我刚刚实现了一个带有组功能的GridView。我有一个TVshows的剧集列表,按照传播日期分组。 当我按日期播出超过3集时,我希望将我的项目包裹起来并转到小组标题旁边,此时,下一个项目将在屏幕之外,而不是我想要的。 view of my application

正如你所看到的那样,每天都会在其他剧集之下发行其他剧集,我希望他们能够在其他剧集旁边而不是其他剧集。 这是我的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>

2 个答案:

答案 0 :(得分:0)

添加ItemsPanelTemplate(如果您查看默认的GridApp和GroupedItemsPage.xaml,您会看到他们是这样做的。)

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

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

答案 1 :(得分:0)

你几乎删除了GridView控件模板,所以难怪它不起作用。删除以下部分,事情可能会恢复正常:

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

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