Grouping items in ListView - Windows Store Apps

Question

Im trying to achieve this

but so far i can on list all the blue items in the list, without the seperation between them. this is what im using

XAML:

Page.xaml

<Grid Grid.Row="1" Grid.RowSpan="2" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="875" />
                <ColumnDefinition Width="385"/>
            </Grid.ColumnDefinitions>
            <ListView Grid.Column="0" ItemsSource="{Binding MyMeets}" Style="{StaticResource MyMeetingsRowUsers}" ></ListView>
        </Grid>

Style:

<DataTemplate x:Key="MyMeetingUser">
    <Grid Margin="0,0,0,10" >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Height="78" Width="875">
            <StackPanel.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0,1"  >
                    <GradientStop Color="#FF0072C6" Offset="0"/>
                    <GradientStop Color="#FF008FD4" Offset="1"/>
                </LinearGradientBrush>
            </StackPanel.Background>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="90"/>
                    <ColumnDefinition Width="65"/>
                    <ColumnDefinition Width="388"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock x:Name="MyMeetingRowDayNumber" Grid.Column="0" Text="{Binding MyMeetingRowDayNumber}" Style="{StaticResource MyMeetingsRowDay}"   />
                <Grid Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" x:Name="MyMeetingRowDayText" Text="{Binding MyMeetingRowDayText}" Style="{StaticResource MyMeetingsRowDayText}" Height="28"></TextBlock>
                    <TextBlock Grid.Row="1" x:Name="MyMeetingRowDayHour" Text="{Binding MyMeetingRowDayHour}" Style="{StaticResource MyMeetingsRowDayHour}" ></TextBlock>
                </Grid>
                <TextBlock Grid.Column="2" x:Name="MyMeetingsRowTitle" Text="{Binding MyMeetingsRowTitle}" Style="{StaticResource MyMeetingsRowTitle}" />
            </Grid>
        </StackPanel>
    </Grid>
</DataTemplate>

<Style x:Key="MyMeetingsRowUsers" TargetType="ListView" >
    <Setter Property="HorizontalContentAlignment" Value="Right" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="Margin" Value="44,36,0,0" />
    <Setter Property="ItemTemplate" Value="{StaticResource MyMeetingUser}" />
    <Setter Property="Transitions">
        <Setter.Value>
            <TransitionCollection>
                <EntranceThemeTransition />
            </TransitionCollection>
        </Setter.Value>
    </Setter>
</Style>

and on the code behind i have this

private ObservableCollection<MeetingRow<Meeting>> myMeet = new ObservableCollection<MeetingRow<Meeting>>();
    public ObservableCollection<MeetingRow<Meeting>> MyMeets
    {
        get { return myMeet; }
        set { SetProperty(ref myMeet, value); }
    }

that i fill with items on the OnNavigatedTo. Like i said, i get the blue rows, but i dont know how to add the gray ones to separate them according to the date.

Answer 1

I managed to find a solution using this https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780627.aspx

seems like CollectionViewSource was the way to go.