在Windows 10 UWP中将PivotItem下的ListView分组 [英] Grouping ListView under PivotItem in Windows 10 UWP
问题描述
我目前正在根据我的情况对Billview_id进行Listview分组.我可以使用LINQ的GroupBy检索按项目分组，但是在显示它时遇到了问题.它显示为整个页面，而不是PivotItem的子项.我的代码如下.
I am currently working on grouping Listview based on billing_id in my case. I am proper able to retrieve group by items using GroupBy of LINQ, but I am facing issues while displaying it. It displays as an entire page and not as a child of PivotItem. My code is as the following.
首先，我在Page资源中创建了一个 CollectionViewSource ，如下所示
First I created a CollectionViewSource in Page resources as follows
<Page.Resources>
<CollectionViewSource x:Key="cvs" x:Name="cvs" IsSourceGrouped="True" />
</Page.Resources>
然后我使用GroupBy检索了所有列表，并将其分配给此CollectionViewSource，如下所示
Then I retrieved all the list using GroupBy and assigned it to this CollectionViewSource as follows
var billingGroupByList = taskBillingList.GroupBy(b => b.billing_type_id).Select(grp => grp.ToList()).ToList();
this.cvs.Source = billingGroupByList;
之后，我创建了包括分组样式和ItemTemplate的UI，如下所示:
After that, I created UI including Grouping style and ItemTemplate as follows
<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.我只想将其显示为页面的一部分.
Can someone suggest, what I am doing wrong? This just display Charge as heading of the page and also makes my other UI of page has hidden. I just want to display this as just a part of a page.
我想实现类似于以下屏幕截图
I want to achieve similar to the following screenshot
推荐答案
问题是，当您对项目进行分组时，该组无任何显示.如果您查看分组:
The issue is that while your items are grouped, there is nothing to display for the group. If you look at your grouping:
var billingGroupByList = taskBillingList.GroupBy(b => b.billing_type_id)
.Select(grp => grp.ToList()).ToList();
如果将鼠标悬停在var上，您会看到billingGroupByList的类型是List<List<BillingItem>>.要显示组头"，您需要一个带有属性的对象来显示.删除linq的选择"部分，您的对象将为List<IGrouping<int, BillingItem>>. IGrouping具有Key属性，然后可以以组样式显示.
If you hover over var you'll see that the type of billingGroupByList is List<List<BillingItem>>. To display a "group header" you need an object with a property to display. Remove the Select portion of your linq and your object will be List<IGrouping<int, BillingItem>>. IGrouping has a Key property that you can then display in your group style.
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
这篇关于在Windows 10 UWP中将PivotItem下的ListView分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
