Definindo o estilo do ListView e de seus itens (HTML)

Applies to Windows and Windows Phone

Você pode personalizar um ListView de muitas maneiras. Você pode estilizar o próprio ListView, os itens nela contidos, ou os modelos que compõem esses itens.

Vantagens de usar a Biblioteca do Windows para classes CSS de JavaScript

Assim como outros controles da Biblioteca do Windows para JavaScript, o ListView oferece um conjunto de classes que você pode substituir para personalizar a sua aparência. As próximas seções descrevem como usar essas classes para personalizar o ListView.

Definindo o estilo da própria ListView

Antes de tratarmos de como definir o estilo de itens do ListView, vejamos como estilizar o próprio ListView. Aqui estão as classes primárias usadas para definir o estilo do ListView:

  • win-listview: estiliza o ListView inteiro.
  • win-viewport: estiliza o visor. É aqui que a barra de rolagem é exibida se necessário.
  • win-surface: estiliza a área rolagem de ListView. Quando a superfície é maior que o visor, o visor exibe barras de rolagem.

Aqui está um exemplo de um típico ListView que contém itens agrupados.

Um ListView que contém itens agrupados.

A próxima ilustração mostra o mesmo ListView com suas partes win-listview, win-viewport e win-surface realçadas:

Os componentes primários de uma ListView

Recomendações gerais de estilização

Sempre atribua uma ID ao seu ListView e inclua essa ID no início do seu seletor de CSS, como neste exemplo:


#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

O controle ListView tem vários estilos padrão. Se você tentar sobrescrever um dos estilos e não perceber nenhum efeito, talvez o seu seletor de CSS não seja suficientemente específico para substituir os estilos padrão.

Estilizando todo o controle ListView

Se você quiser adicionar uma imagem de tela de fundo fixa ao controle ListView que apareça atrás dos itens interiores, ou se você quiser aplicar uma borda a todo o controle, substitua a classe win-listview. Este exemplo dá ao ListView uma imagem de plano de fundo e uma borda vermelha.


#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Veja aqui como o controle ListView agora se parece:

Uma ListView com uma borda e uma imagem de plano de fundo

Estilizando margens no ListView

Use a classe win-surface para aplicar margens ao ListView. Não aplique margens ao elemento de div que hospeda ListView, pois ele não será estilizado corretamente. Em vez disso, use win-surface. Se você adicionar uma margem a win-surface, lembre-se de ajustar a altura de ListView apropriadamente. Você define a altura estilizando o elemento de div que hospeda ListView.

Não adicione margens ou preenchimento a win-surface ao usar um list layout.

Por padrão, cabeçalhos de grupo tem uma margem esquerda de 70px. Se você sobrescrever win-surface ao exibir grupos, convém criar a margem esquerda de 70px + qualquer margem adicional desejada.

Estilizando o visor com base na direção de rolagem

Você pode usar as classes win-horizontal e win-vertical para aplicar estilos ao ListView quando ele rola na horizontal ou na vertical. Este exemplo adiciona uma margem esquerda ao visor quando o ListView pode rolar horizontalmente.


#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

O próximo exemplo remove a margem esquerda quando o ListView pode rolar verticalmente. É comum dar uma orientação vertical ao ListView quando o estado da visualização é ajustado.



#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
} 

Estilizando toda a área rolável

Para definir o estilo da porção rolável de ListView, substitua a classe win-surface. Este exemplo aplica ao ListView uma imagem de plano de fundo que rola quando o usuário rola os itens.



#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
} 

Uma ListView que possui uma superfície estilizada

Estilizando o indicador de progresso de carregamento

O ListView exibe um indicador de progress enquanto carrega itens. Você pode definir o estilo desse indicador substituindo a classe win-progress. Este exemplo oculta o indicador de progress.


#myListView .win-listview .win-progress{
    display: none;
}

Estilizando itens e grupos

O ListView contém grupos e itens.

  • Cada grupo está contido em um cabeçalho de grupo, representado pela classe win-groupheader.
  • Cada item está contido em um contêiner de itens, representado pela classe win-container.

Os componentes de cabeçalho de grupo e contêiner de uma ListView

Definindo o estilo de um item

Há duas maneiras para definir o estilo de itens no seu ListView. Você pode aplicar estilos ao modelo do item, ou você pode substituir a classe win-container. Há apenas uma coisa que você sempre deve fazer nos seus modelos: definir o tamanho dos seus itens. Se você não definir o tamanho dos seus itens, talvez não obtenha o layout desejado.

Para definir o tamanho dos seus itens:

  • Se você está usando um WinJS.Binding.Template, defina o tamanho do filho do elemento WinJS.Binding.Template, conforme mostrado neste exemplo:

    
    <!-- The WinJS.Binding.Template element. -->
    <div id="templateExample" data-win-control="WinJS.Binding.Template">
    
        <!-- This is the root element. Be sure to set its width and height. -->
        <div style="width: 120px; height: 125px;">
    
                            
            <img src="#" data-win-bind="alt: title; src: picture"
                style="width: 60px; height: 60px;" />
            <div>
                <h4 data-win-bind="innerText: title">
                </h4>
    
                <h6 data-win-bind="innerText: text">
                </h6>
            </div>
        </div>
    </div>
    
    
  • Se você está usando uma função de modelagem, defina a largura e a altura de todos os elementos DOM retornados pela sua função.

Definindo o estilo do contêiner do aplicativo

Para estilizar o contêiner do item, substitua a classe win-container. Este exemplo adiciona uma margem ao contêiner de cada item.


#myListView .win-listview .win-container{
    margin: 2px;
}

Há apenas duas propriedades que você pode estilizar em win-container: margin e background.

Para criar um item transparente, defina a cor de fundo como transparente. Este exemplo cria um item transparente:


#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}


Estilizando margens e preenchimentos em itens

Para adicionar espaçamento entre itens, defina uma margem na classe win-container. Não aconselhamos a inclusão de preenchimento nos itens para criar espaço entre eles. Em vez disso, use uma margem. Todos os itens no mesmo ListView devem ter a mesma margem.

Não mude a margem ou o preenchimento em win-container depois que ListView tiver começado a exibir itens.

Definindo o estilo do cabeçalho de grupo

Para estilizar o cabeçalho de grupo, substitua a classe win-groupheader. Este exemplo adiciona um plano de fundo cinza aos cabeçalhos de grupo.


#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}    

Uma ListView que possui uma cabeçalhos de grupo estilizados

Definindo o estilo de interações com itens

Definindo o estilo de um item no estado focalizar

Quando o usuário move o ponteiro sobre um item, o item entra no estado de destaque. Para alterar o estilo de um item no estado focalizar, use a pseudoclasse hover. Este exemplo muda o plano de fundo e o contorno de um item focalizado.


#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}  

Uma ListView com um item no estado focalizado

Definindo o estilo de itens que têm foco

Para estilizar um item enfocado, use a classe win-focus como parte do seu seletor de estilos ao estilizar o contêiner de itens. Para estilizar o contorno do foco, substitua a classe win-focusedoutline. Este exemplo muda o contorno em foco para uma linha tracejada vermelha.


#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

Definindo o estilo de itens selecionados

Por padrão, itens selecionados mostram uma borda de seleção. Se quiser que os seus itens selecionados tenham uma aparência "preenchida", anexe a classe CSS win-selectionstylefilled ao seu ListView.

Para personalizar ainda mais a aparência dos itens selecionados, você pode substituir estas classes:

  • win-selectionborder

    Define o estilo do contorno de um item selecionado.

  • win-selectionbackground

    Define o estilo do plano de fundo dos itens selecionados.

  • win-selectionhint

    Define o estilo da dica de seleção, uma segunda marca de seleção que é exibida atrás do item selecionado. Passar o dedo no item torna a dica de seleção visível.

  • win-selectioncheckmark

    A marca de seleção em um item selecionado.

  • win-selectioncheckmarkbackground

    O plano de fundo da marca de seleção de um item selecionado.

Você também pode adicionar a classe win-selected como parte do seu seletor de estilos para personalizar outros componentes, tais como o contêiner do objeto, quando um item é inserido.

Siga a grade de tipo e de layout do Windows 8

Recursos e aplicativos do Windows 8 seguem uma grade comum de layout e tipo que fornece uma personalidade consistente no sistema. Para saber mais detalhes, veja Definindo o layout de uma página de aplicativo. Seu ListView deve apresentar os itens dimensionados e alinhados a essa grade de layout e tipo. Há três maneiras pelas quais você pode garantir que isso seja feito corretamente:

 

 

Mostrar:
© 2014 Microsoft