ItemsGroups in my GridView don't wrap and are located out of the screen - xaml

Question

I just implemented a GridView with groups feature. I have a list of TVshows's episodes which are grouped by diffusion date.
When I have more than 3 episodes by date, I want to have my items wrapped and go next to the group title, at this time, the next items are going outside of the screen, and it not what I wanted.
As you can see, there is other episodes under the dupplicated one for each day, I want them to go next to the others, not under.
Here is my XAML code, thanks :)
<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

Add a ItemsPanelTemplate (if you take a look at the default GridApp and the GroupedItemsPage.xaml, you'll see this is how they do it).
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
If you want the 3rd element in a column to leak over the bottom, then you can set a negative bottom margin on the GridView itself.

Answer 2

You virtually erased the GridView control template, so no wonder it doesn't work. Remove the following part and things might get back to normal:
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
If there is something you want changed in the default template - change that specific thing. The default template has a horizontal ScrollViewer which limits vertical space use by the WrapGrid that is used for its ItemsPanelTemplate and allows items to wrap to next column, while also allowing to scroll horizontally to see all items.