在 ListView 中对项目进行分组 - Windows 应用商店应用

Question

我正在努力实现这一目标

但到目前为止，我可以列出列表中的所有蓝色项目，而它们之间没有分隔。 这就是我正在使用的

XAML：

页面.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>

风格：

<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>

在后面的代码上我有这个

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

我在 OnNavigatedTo 上填写 items。就像我说的，我得到了蓝色行，但我不知道如何添加灰色行以根据日期将它们分开。

Answer 1

我设法使用这个找到了解决方案 https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780627.aspx

似乎 CollectionViewSource 是要走的路。