Listview group in uwp

Question

I have a simple view with a ListView, I would like the ListViewhas two groups, a group for items with property complete= 1 and another gro

Answer 1

I have a simple view with a ListView, I would like the ListViewhas two groups, a group for items with property complete= 1 and another group with complete= 0.

First, use a CollectionViewSource for content that presents a list of items that can be grouped or sorted.

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

Then, get the data, group the data and set the grouped data to the CollectionViewSource in code behind.

Following is the sample code I have verified:

MainPage.xaml

<Page.Resources>
    <!--Use a collection view source for content that presents a list of items that can be grouped or sorted.-->
    <CollectionViewSource x:Key="cvs" x:Name="cvs" IsSourceGrouped="True" />
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView Background="White" Foreground="Black" SelectionMode="None" ItemsSource="{Binding Source={StaticResource cvs}}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="0.5">
                    <TextBlock Text="{Binding Path=Name}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</Grid>

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        //Get the data
        List<MyClass> myClasses = new List<MyClass>();
        myClasses.Add(new MyClass { Name = "A", Complete = false });
        myClasses.Add(new MyClass { Name = "B", Complete = true });
        myClasses.Add(new MyClass { Name = "C", Complete = true });
        myClasses.Add(new MyClass { Name = "D", Complete = false });
        myClasses.Add(new MyClass { Name = "E", Complete = true });
        myClasses.Add(new MyClass { Name = "F", Complete = false });
        //Group the data
        var groups = from c in myClasses
                     group c by c.Complete;
        //Set the grouped data to CollectionViewSource
        this.cvs.Source = groups;
    }
}

Following is the output: