在 Windows 10 UWP 中的 PivotItem 下对 ListView 进行分组

Question

在我的案例中，我目前正在根据 billing_id 对 Listview 进行分组。我能够使用 LINQ 的 GroupBy 按项目检索分组，但我在显示它时遇到问题。它显示为整个页面而不是 PivotItem 的 child。我的代码如下。

首先我在Page资源中创建了一个CollectionViewSource如下

<Page.Resources>
    <CollectionViewSource x:Key="cvs" x:Name="cvs" IsSourceGrouped="True" />
</Page.Resources>

然后我使用 GroupBy 检索了所有列表并将其分配给此 CollectionViewSource，如下所示

var billingGroupByList = taskBillingList.GroupBy(b => b.billing_type_id).Select(grp => grp.ToList()).ToList();
this.cvs.Source = billingGroupByList;

之后，我创建了 UI 包括分组样式和 ItemTemplate 如下

<Pivot>
  <Pivot.Items>
     <PivotItem x:Name="ChargesPivot"
               Header="Charges"
               Background="White"
               Margin="0,-35,0,0">
          <ScrollViewer>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackPanel>
                    <Grid Background="#F8F8FB" BorderBrush="#D6D6D6" BorderThickness="5,0,0,0">
                        <TextBlock x:Name="charges"
                                   Text="Charges"
                                   FontSize="18"
                                   Margin="10"
                                   Foreground="Gray"/>
                    </Grid>

                    <ListView x:Name="chargesView"
                              ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
                              ItemsSource="{Binding Source={StaticResource cvs}}"                          SelectionChanged="chargesView_SelectionChanged"
                              Margin="5">
                        <ListView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding billing_type}"
                                                   FontSize="16"
                                                   FontWeight="SemiBold"/>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListView.GroupStyle>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <Grid Grid.Row="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width=".25*"/>
                                        <ColumnDefinition Width=".25*"/>
                                        <ColumnDefinition Width=".25*"/>
                                        <ColumnDefinition Width=".25*"/>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock x:Name="billing_date"
                                               FontSize="16"
                                               Margin="4,1,4,4"
                                               Grid.Column="0"
                                               FontWeight="SemiBold"
                                               Text="{Binding Path = quantity}"/>
                                    <TextBlock x:Name="charge"
                                               FontSize="16"
                                               Margin="4,1,4,4"
                                               Grid.Column="1">
                                        <Run Text="{Binding Path = charge}"/>
                                        <Run Text=" "/>
                                        <Run Text="{Binding Path = charge_uom}"/>
                                    </TextBlock>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</PivotItem>

有人可以建议我做错了什么吗？这只是将 Charge 显示为页面的标题，并且还隐藏了我的其他 UI 页面。我只想将其显示为页面的一部分。

我想实现类似下面的截图

Answer 1

问题是当您的项目被分组时，该组没有可显示的内容。如果您查看您的分组：

var billingGroupByList = taskBillingList.GroupBy(b => b.billing_type_id)
    .Select(grp => grp.ToList()).ToList();

如果将鼠标悬停在 var 上，您会看到 billingGroupByList 的类型是 List<List<BillingItem>>。要显示 "group header"，您需要一个带有属性的对象来显示。删除 linq 的 Select 部分，您的对象将是 List<IGrouping<int, BillingItem>>。 IGrouping 有一个 Key 属性，然后您可以在您的组样式中显示它。

<ListView.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Key}"/>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ListView.GroupStyle>

在 Windows 10 UWP 中的 PivotItem 下对 ListView 进行分组

Grouping ListView under PivotItem in Windows 10 UWP

c#

grouping

listview

uwp

windows-10-universal