2

Estive pesquisando como fazer uma lista igual a lista de contatos do App People (Pessoas) do Windows 10 e encontrei um bom exemplo. Porém o exemplo não implementa a ordenação alfabética que existe no app Pessoas (imagem abaixo).

inserir a descrição da imagem aqui

Alguém sabe como implementar essa ordenação?

2
  • Se no exemplo citado a questão for somente a ordenação alfabética basta adicionar no final do construtor public MainPage() o seguinte ContactList = new ObservableCollection<Contact>(ContactList.OrderBy(c => c.FirstName).ThenBy(c => c.LastName)); Commented 14/01/2017 às 23:49
  • Mas e as Letras que encabeçam cada grupo ordenado, tpico (A) para os contatos que começam com A, (B) para os que começam com B, etc.? Commented 15/01/2017 às 0:22

1 Resposta 1

2

O ruim de seguir exemplos prontos é que você esquece de consulta a documentação oficial que resolveria o problema mais rápido. (Caio muito nessas armadilhas)

Para criar uma lista semelhante ao App People (Pessoas) segundo a documentação é necessário utilizar um CollectionViewSource, segundo a Microsoft:

Se você precisar mostrar dados agrupados em sua exibição de lista, deverá associar a um CollectionViewSource. O CollectionViewSource age como um proxy para a classe da coleção em XAML e habilita o suporte a agrupamento.

Segue o código XAML com a implementação:

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

Classe Contatos:

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

Criando lista agrupada de Contatos:

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

Resultado:

inserir a descrição da imagem aqui

Código Fonte:

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

Referências:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .