Grouping ListView under PivotItem in Windows 10 UWP

Question

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.

First I created a CollectionViewSource in Page resources as follows

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

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;

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>

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

Answer 1

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();

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>