Alphabetical ordering in Listview equal to the People App

Question

I’ve been searching how to make a list like the App People (People) contact list of Windows 10 and found a good one example. But the example does not implement the alphabetical ordering that exists in the People app (image below).

Does anyone know how to implement this ordination?

Answer 1

The bad thing about following ready-made examples is that you forget to consult the official documentation that would solve the problem faster. (I fall a lot into these traps)

To create a list similar to App People (Pessoas) according to the documentation it is necessary to use a CollectionViewSource, according to Microsoft:

If you need to show data grouped in your list view, you should associate to a Collectionviewsource. The Collectionviewsource acts as a proxy for the collection class in XAML and enables cluster support.

Follow the XAML code with the implementation:

<Page.Resources>
    <!--Use a collection view source for content that presents a list of 
    items that can be grouped or sorted.-->
    //Cvs recebera via code behind uma lista de objetos do tipo IOrderedEnumerable
    <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>
                <Grid Height="56">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="56"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <Ellipse Grid.Column="0"
                             Margin="4"
                             Fill="LightGray"/>

                    <TextBlock Grid.Column="0"
                               Text="{Binding Path=ShortName}"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="20"/>

                    <TextBlock Grid.Column="1"
                               Text="{Binding Path=FullName}"
                               VerticalAlignment="Center"
                               FontSize="16"/>

                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding Path=Key}" 
                                       Foreground="Black" Margin="20"/>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</Grid>

Class Contacts:

public class Contact
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string FullName
    {
        get { return FirstName + " " + LastName; }
    }
    public string ShortName
    {
        get { return FirstName[0] + LastName[0].ToString(); }
    }

    public string Inicial
    {
        get { return FirstName[0].ToString(); }
    }
}

Creating Grouped Contacts List:

public MainPage()
{
    this.InitializeComponent();

    var contactList = new List<Contact>
    {
        new Contact {FirstName = "Abravanel", LastName = "Santos"},
        new Contact {FirstName = "Barbosa", LastName = "Sousa"},
        new Contact {FirstName = "Bruna", LastName = "Maria"},
        new Contact {FirstName = "Bruna", LastName = "Lombardi"},
        new Contact {FirstName = "Carlos", LastName = "Alberto"}

    };

    var grupo = from act in contactList.OrderBy(c => c.FirstName).ThenBy(c => c.LastName)
        group act by act.Inicial
        into grp
        orderby grp.Key
        select grp;

    Cvs.Source = grupo;            
}

Upshot:

Source Code:

https://github.com/rubgithub/ListGroup-UWP

References:

https://msdn.microsoft.com/pt-br/windows/uwp/controls-and-patterns/listview-and-gridview https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780627.aspx https://msdn.microsoft.com/library/windows/apps/xaml/windows.ui.xaml.data.collectionviewsource.aspx