Alphabetical sort in ListView equal to App People

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

To create a list similar to App People (Pessoas) according to documentation you must use CollectionViewSource , according to Microsoft:

If you need to show data grouped in your list view, you should associate it with a CollectionViewSource . The CollectionViewSource acts as a proxy for the collection class in XAML and enables grouping 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 list of contacts:

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;            
}

Result:

  

SourceCode:

link

  

References:

link link link