Guia de início rápido: adicionando um ListView (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

A maioria dos aplicativos mostra listas de dados, como uma lista de contatos, imagens em uma galeria ou o conteúdo de uma caixa de entrada de email. Essas listas podem obter os dados de um banco de dados, da Web ou de uma fonte de dados JSON. O WinJS fornece um controle ListView que você pode usar para exibir dados.

Pré-requisitos

Você deve ser capaz de criar um aplicativo básico do Tempo de Execução do Windows em JavaScript que use controles WinJS. Para aprender a usar os controles WinJS, veja Guia de início rápido: adicionando controles e estilos WinJS.

O que é um ListView?

O ListView é um controle WinJS que exibe dados de uma IListDataSource em uma lista ou grade personalizável. O WinJS oferece vários tipos de objetos IListDataSource:

Você também pode criar a sua própria origem de dados que se conecta a algum outro tipo de fornecedor de dados, como um serviço de Web ou banco de dados. Para obter instruções, veja Como criar uma fonte de dados personalizada.

Criando um ListView

Hh465496.wedge(pt-br,WIN.10).gifPara criar um ListView

  1. Adicione referências ao WinJS a seu arquivo HTML, caso ainda não estejam lá.

    Para usar a versão mais recente do WinJS:

    1. Baixe a versão mais recente na página para baixar o WinJS (em inglês) e copie-a para o diretório para seu aplicativo ou site.
    2. Adicione referências de script e CSS do WinJS a cada página do aplicativo ou site que usa os recursos WinJS.
    
<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.js"></script>

    Este exemplo mostra o HTML do arquivo default.html que é gerado quando você cria um novo projeto Aplicativo em Branco no Microsoft Visual Studio.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>

    <!-- WinJS references -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <script src="/WinJS/js/WinJS.js"></script>

    <!-- ListViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

  2. Em seu arquivo HTML, crie um elemento div e defina sua propriedade data-win-control como WinJS.UI.ListView.

    <div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>

  3. No código JavaScript que acompanha seu arquivo HTML, chame a função WinJS.UI.processAll quando o HTML for carregado.

    WinJS.UI.processAll();

    O próximo exemplo mostra o arquivo default.js que acompanha o arquivo default.html criado quando você cria um novo projeto de Aplicativo em Branco.

    
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

    Este exemplo funciona quando você adiciona o controle ListView à sua página inicial (default.html). Se você estiver adicionando o ListView a um Controle de página, não precisará chamar WinJS.UI.processAll porque o Controle de página fará isso para você. Se estiver adicionando o ListView ao seu próprio HTML personalizado, poderá usar o evento DOMContentLoaded para chamar WinJS.UI.processAll. Para saber mais sobre como ativar seus controles, veja Guia de início rápido: adicionando controles e estilos WinJS.

Esse código cria um ListView vazio. Se você executar o aplicativo, não verá nada ainda. Na próxima seção, crie alguns dados para que o controle ListView seja exibido.

Definindo seus dados

Coloque o código para criar sua fonte de dados em um arquivo JavaScript separado. Isso pode facilitar sua manutenção. Nesta seção, você vai aprender a criar um arquivo JavaScript para seus dados, a criar um List e a usar a função WinJS.Namespace.define para tornar os dados acessíveis ao restante do seu aplicativo.

  1. Use o Visual Studio para adicionar um arquivo de dados ao seu projeto. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta js do projeto e selecione Adicionar > Novo Item. A caixa de diálogo Adicionar Novo Item aparece.

  2. Escolha Arquivo JavaScript. Dê a ele o nome "dataExample.js". Clique em Adicionar para criar o arquivo. O Visual Studio cria um arquivo em branco do JavaScript chamado dataExample.js.

  3. Abra dataExample.js. Crie uma função anônima e ative o modo restrito.

    Conforme descrito em Codificando aplicativos básicos, é uma prática recomendada de programação encapsular o código JavaScript, através da respectiva quebra automática em uma função anônima, o uso do modo restrito também é uma ídeia excelente.

    (function () {
    "use strict"; 





})();

  4. Crie uma matriz de dados. Este exemplo cria uma matriz de objetos. Cada objeto tem três propriedades: título, texto e imagem.

    (function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

})();

    Observação  Se você estiver acompanhando seu código, pode alterar as imagens para arquivos na máquina local ou pode obter as imagens baixando a Introdução à amostra do ListView (não é a mesma amostra, mas usa as mesmas imagens). A amostra ainda será executada sem a adição das imagens.

     

  5. Use a matriz para criar um objeto List.

    (function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

  6. Exponha o objeto List declarando um namespace e adicionando o List como um membro público.

    Como o código que você acabou de criar está incluso em uma função anônima, nenhum dos dois é publicamente acessível. Isso é parte da razão pela qual você usa a função anônima: para manter os dados pessoais confidenciais. Para que seu ListView seja capaz de acessar o List, você precisará torná-lo publicamente acessível. Uma maneira de fazer isso é usa a função WinJS.Namespace.define para criar um namespace e adicionar o List como um dos seus membros.

    A função WinJS.Namespace.define assume dois parâmetros: o nome do namespace para criar e um objeto que contém um ou mais pares de propriedades/valores. Cada propriedade é o nome público do membro e cada valor é uma variável, propriedade ou função subjacente no código particular que você deseja expor.

    Este exemplo cria um namespace denominado DataExample que expõe um membro público denominado itemList, que retorna o seu List.

    (function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

Você criou uma origem de dados que pode ser acessada por seu ListView. Em seguida, conecte os dados ao ListView.

Conectando os dados ao ListView

  1. Na seção head do arquivo HTML que contém seu ListView, adicione uma referência ao arquivo de dados que você acabou de criar (dataExample.js):

    <head>
    <!-- Other file references ... -->

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

  2. Use os dados que você criou na última seção e defina a propriedade itemDataSource do controle ListView.

    A propriedade itemDataSource obtém um objeto IListDataSource. O objeto List não é uma IListDataSource, mas tem uma propriedade dataSource que retorna uma versão IListDataSource dele mesmo.

    Para conectar seus dados, defina a propriedade itemDataSource do controle ListView como DataExample.itemList.dataSource:

    
<div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

Execute o aplicativo. O ListView exibe as propriedades e valores na origem dos dados:

Exibindo o conteúdo da origem de dados sem um modelo.

Esta não é exatamente a aparência que queremos. Nós queremos mostrar somente os valores do título e do campo de texto e queremos mostrar as imagens reais, não o caminho para as imagens. Para obter a renderização que desejamos, precisamos definir um Template. A próxima etapa mostra isso para você.

Definindo um modelo de item

Neste ponto, o ListView tem os dados que precisa, mas não sabe como exibi-los. Para isso, você precisa de um modelo de item que contenha a marcação a ser usada para exibir cada item de lista. O modelo de item pode conter a maioria dos outros controles (para saber mais, veja a seção Adicionando elementos interativos), mas não pode conter um FlipView ou outro ListView.

Há duas formas de criar um modelo: você pode usar a marcação para definir um WinJS.Binding.Template ou pode criar uma função de modelo. Este exemplo cria um modelo em marcação. Para saber como criar uma função de modelo, veja a propriedade itemTemplate.

É fácil criar um WinJS.Binding.Template: defina a marcação que você deseja usar para exibir cada item da lista; em seguida, indique onde cada campo de dados é exibido.

  1. Em seu HTML, crie um controle WinJS.Binding.Template e atribua uma ID a ele. Este exemplo usa a ID "mediumListIconTextTemplate".

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">

    </div>

    Observação  Você deve definir o seu modelo antes de usá-lo, então adicione o HTML para o nosso modelo antes do HTML para o seu ListView.

     

  2. WinJS.Binding.Template precisa ter um único elemento de raiz. Crie um elemento div para servir como pai para o conteúdo do modelo.

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

        </div>
    </div>

  3. Crie a marcação que o ListView produzirá para cada item de dado que contiver. Os dados que você criou na etapa anterior contêm a localização de uma imagem, um título e algum texto, então crie estes elementos:

    • Um elemento img para a exibição do campo de imagem.
    • Um elemento h4 para exibir o campo do título.
    • Um elemento h6 para exibir o campo de texto.
        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

            <!-- Displays the "picture" field. -->
            <img src="#"  />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

  4. Para evitar problemas de layout, sempre especifique o tamanho do elemento raiz de um modelo e sempre especifique o tamanho dos elementos img no modelo.

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

  5. Defina o atributo data-win-bind em cada elemento que mostre os dados. O atributo data-win-bind usa a sintaxe:

    data-win-bind="propertyName: dataFieldName"

     

    Por exemplo, para associar a propriedade src de um img ao campo "imagem", use a sintaxe:

    <img data-win-bind="src : picture" />

    Para definir várias propriedades, separe-as com um ponto e vírgula:

    data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

     

    Este exemplo associa os itens no modelo aos campos de dados correspondentes deles.

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

  6. Para usar o modelo de item, use a sintaxe select para definir a propriedade itemTemplate do ListView ao seu modelo de item.

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

    Agora, quando você executa o aplicativo, os dados associados aparecem na lista.

    Um ListView com dados associados exibindo imagens e texto.

Definindo o estilo do ListView

O ListView não ajusta dinamicamente a sua altura para caber o seu conteúdo. Para que um ListView seja renderizado, você deve especificar um valor absoluto para a sua altura. As folhas de estilos WinJS definem a altura do controle ListView como 400 px, mas é fácil especificar a sua própria altura substituindo o estilo padrão pelo seu próprio CSS. Adicione esse CSS ao arquivo CSS de seu aplicativo para definir a altura e a largura do ListView e dar a ele uma borda:

Estilo ListView para Windows

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Estilo ListView para Windows Phone 8.1

.win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

win-listview é uma classe definida pelo WinJS que você pode usar para definir o estilo de ListView. O exemplo que você acabou de ver muda a altura, largura e borda de todo ListView. Para mudar só o ListView, adicione a ID do elemento div de hospedagem do controle ListView ao seletor:

Estilo ListView específico para Windows

#basicListView .win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Estilo ListView específico para Windows Phone 8.1

#basicListView .win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

Execute o aplicativo. Agora o ListView é grande o suficiente para exibir todos os itens.

Um controle ListView 500px.

As folhas de estilos do WinJS definem as classes CSS que você pode substituir para personalizar a aparência de um controle WinJS. As classes CSS que você usa com o ListView incluem:

  • win-listview

    Especifica os estilos do ListView sozinho.

  • win-container

    Especifica os estilos de um contêiner de itens ListView ou FlipView. Cada item tem seu próprio contêiner.

  • win-progress

    Especifica os estilos do controle de progresso exibido quando o ListView está carregando itens.

Para obter uma lista completa, veja a ListView reference page.

Este exemplo define um estilo que adiciona uma margem ao redor de cada contêiner de item no ListView.


#basicListView .win-listview .win-container {
    margin: 10px; 
}

Itens estilizados em um ListView

O exemplo a seguir define um estilo que se aplica a itens da lista em um ListView no estado de foco.

#basicListView .win-listview .win-container:hover {
    color: red;
}

Observação  

O ListView suporta margens à sua esquerda, topo e parte inferior, mas você não pode especificar uma margem para o lado direito. Uma forma de contornar isso é adicionar um elemento que seja tão largo quanto a margem que você quer e definir a sua propriedade style.visibility como "none" e, em seguida, adicionar o elemento à direita do ListView.

 

Definindo o estilo de itens

Os exemplos anteriores usaram estilos embutidos e as classes WinJS para definir o estilo do ListView e de seus itens. Você também pode usar as classes CSS para definir o estilo de seu modelo de item. O próximo exemplo atualiza o modelo que você definiu na seção Definindo um modelo de item. Ele remove os estilos embutidos que você definiu e adiciona algumas classes CSS.

    <div id="mediumListIconTextTemplate" 
         data-win-control="WinJS.Binding.Template" 
         style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

Adicione estes estilos ao CSS de seu aplicativo:

.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

Veja aqui como o controle ListView agora se parece:

Um ListView com itens com estilo

Você não tem que criar os seus estilos de modelo do nada. Para um conjunto de modelos comumente usados e seus CSS correspondentes, veja modelos de item para layouts de lista e modelos de item para layouts de grade.

Alternando entre layouts de lista, grade e célula

O elemento ListView tem três modos de layout: lista, grade e célula.

  • Para usar o layout de lista, defina a propriedade layout como WinJS.UI.ListLayout, conforme mostrado aqui:

        <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.ListLayout}}">
    </div>

  • Para usar o layout de grade, defina a propriedade layout como WinJS.UI.GridLayout, conforme mostrado aqui:

        <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.GridLayout}}">
    </div>

  • (Somente Windows) Para usar o layout de célula, defina a propriedade de layout como WinJS.UI.CellSpanningLayout, conforme mostrado aqui:

        <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.CellSpanningLayout}}">
    </div>

Você pode mudar o layout de um ListView a qualquer momento, mesmo após tê-lo criado.

Agrupando os seus dados

Você pode agrupar itens em seu ListView. Este ilustração mostra os itens que são agrupados alfabeticamente:

Um ListView com itens agrupados

Para saber como, veja Como agrupar itens em um ListView.

Adicionando elementos interativos a um modelo de item

Observação  O modelo de item pode conter a maioria dos outros controles, mas não pode conter um FlipView ou outro ListView.

 

Selecionando e invocando itens de ListView

Normalmente, quando o usuário interage com um elemento, ListView captura essa interação e a usa para determinar se o usuário selecionou ou invocou um item ou se está se movimentando panoramicamente entre itens. Para que um elemento interativo, como um controle, receba entrada, você deve anexar a classe CSS win-interactive a esse elemento ou a um de seus elementos pai. O elemento e seus filhos recebem a interação e deixam de disparar eventos para ListView.

Quando você anexar win-interactive a um elemento em um modelo de item, verifique se esse elemento não está preenchendo o item inteiro. Caso contrário, o usuário não conseguirá selecionar ou invocar esse item.

Para adicionar elementos interativos ao seu modelo de item, nós recomendamos que você use uma função de modelagem em vez de um WinJS.Binding.Template. Para saber mais sobre funções de modelagem, veja Como criar uma função de modelagem.

Adicionando funcionalidade de reordenar, arrastar e soltar a ListView (Somente Windows)

O controle ListView também permite que os usuários reordenem, arrastem e soltem itens individuais. Por exemplo, você pode declarar a funcionalidade de arrastar definindo a propriedade itemsDraggable de ListView como "true". Da mesma forma, para permitir que os usuários reordenem os itens no controle ListView, defina a propriedade itemsReorderable de ListView como "true".

<div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            itemsDraggable: true,
            itemsReorderable: true }">
</div>

A propriedade itemsDraggable permite que itens individuais sejam arrastados visivelmente do controle ListView. Quando o usuário arrasta um item a partir de ListView, o evento itemdragstart é gerado. (Esse evento também é gerado no início de uma operação de reordenação.) Quando um item é solto em ListView, ListView gera um evento itemdragdrop.

Para saber mais sobre como adicionar funcionalidade de reordenar, arrastar ou saltar a um controle ListView, veja Como habilitar ações de reordenar, arrastar e soltar a um ListView ou baixe a Amostra de ações reordenar, arrastar e soltar de ListView em HTML.

Exemplos de ListView

Para obter exemplos de código dinâmico de quase todos os controles WinJS e um editor online, confira try.buildwinjs.com.

Estas amostras adicionais podem ajudá-lo a aprender mais sobre o controle ListView.

Resumo e próximas etapas

Você aprendeu a criar um ListView e a associá-lo a dados. Você também aprendeu a criar e a definir o estilo de modelos de item.

Para obter uma lista de modelos de item predefinidos que você pode usar em seu aplicativo, veja modelos de item para layouts de lista e modelos de item para layouts de grade. Para saber como agrupar itens, veja Como agrupar itens no ListView.