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

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

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 classes CSS da Biblioteca do Windows para 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.

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

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:

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

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.

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

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

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.