在Windows 10 UWP中将PivotItem下的ListView分组

时间:2017-05-19 04:28:35

标签: c# listview uwp grouping windows-10-universal

我目前正致力于基于billing_id对Listview进行分组。我能够使用LINQ的GroupBy按项检索组,但是在显示它时我遇到了问题。它显示为整个页面而不是PivotItem的子项。我的代码如下。

首先,我在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被隐藏。我只想将其显示为页面的一部分。

我希望实现类似于以下屏幕截图enter image description here

1 个答案:

答案 0 :(得分:1)

问题是,当您的项目已分组时,该组无需显示任何内容。如果你看一下你的分组:

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

如果您将鼠标悬停在var上,则会看到billingGroupByList的类型为List<List<BillingItem>>。要显示“组标题”,您需要一个具有要显示的属性的对象。删除linq的Select部分,您的对象将为List<IGrouping<int, BillingItem>>。 IGrouping具有Key属性,您可以在组样式中显示该属性。

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