GridView Overview
A visualização GridView é um dos modos de exibição para um controle ListView. A classe GridView e suas classes de apoio permitem que você e seus usuários exiban coleções de itens em uma tabela que normalmente usa botões como cabeçalhos de coluna interativos. Este tópico apresenta a classe GridView e descreve seu uso.
Este tópico contém as seguintes seções.
- O que é uma visualização GridView?
- Layout e estilo de GridView
- Interações do usuário com um GridView
- Obtendo outros modos de visualização personalizados
- Classes de apoio a GridView
- Tópicos relacionados
O que é uma visualização GridView?
A visualização GridView exibe uma lista de itens de dados ao vincular campos de dados a colunas e exibir um cabeçalho de coluna para identificar o campo. O estilo padrão da GridView implementa botões como cabeçalhos de coluna. Usando botões para cabeçalhos de coluna, você pode implementar recursos importantes de interação com o usuário; por exemplo, os usuários podem clicar no cabeçalho da coluna para classificar os dados da GridView de acordo com o conteúdo de uma coluna específica.
.gif "Observação") Observação: |
|---|
O botão controla que GridView usos para cabeçalhos de coluna são derivados do ButtonBase. |
A ilustração a seguir mostra uma visualização GridView de conteúdo ListView.
Exibição GridView de conteúdo ListView
.png "ListView com estilo")
Colunas GridView são representadas por objetos GridViewColumn, que podem dimensionar-se automaticamente ao seu conteúdo. Opcionalmente, você pode definir um GridViewColumn explicitamente com uma largura específica. Você pode redimensionar colunas arrastando a alça entre cabeçalhos de coluna. Você pode também dinamicamente adicionar, remover, substituir e reordenar colunas porque essa funcionalidade é inerente à GridView. No entanto, GridView não pode diretamente atualizar os dados que ela exibe.
O exemplo a seguir mostra como definir um GridView que exibe dados dos funcionários. Nesse exemplo, ListView define o EmployeeInfoDataSource como o ItemsSource. As definições de propriedade de DisplayMemberBinding vinculam o conteúdo de GridViewColumn a categorias de dados EmployeeInfoDataSource. For the complete sample, see Exibição em Lista que usa um exemplo de GridView.
<ListView ItemsSource="{Binding Source=
{StaticResource EmployeeInfoDataSource}}">
<ListView.View>
<GridView AllowsColumnReorder="true"
ColumnHeaderToolTip="Employee Information">
<GridViewColumn DisplayMemberBinding=
"{Binding Path=FirstName}"
Header="First Name" Width="100"/>
<GridViewColumn DisplayMemberBinding=
"{Binding Path=LastName}"
Width="100">
<GridViewColumnHeader>Last Name
<GridViewColumnHeader.ContextMenu>
<ContextMenu MenuItem.Click="LastNameCM_Click"
Name="LastNameCM">
<MenuItem Header="Ascending" />
<MenuItem Header="Descending" />
</ContextMenu>
</GridViewColumnHeader.ContextMenu>
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding=
"{Binding Path=EmployeeNumber}"
Header="Employee No." Width="100"/>
</GridView>
</ListView.View>
</ListView>
A ilustração a seguir mostra a tabela que cria o exemplo anterior.
GridView que exibe dados de um ItemsSource
.jpg "ListView com saída de GridView")
Layout e estilo de GridView
As células da coluna e o cabeçalho da coluna de uma GridViewColumn têm a mesma largura. Por padrão, cada coluna redimensiona sua largura para conter o seu conteúdo. Opcionalmente, você pode definir uma coluna com uma largura fixa.
Conteúdo de dados relacionados aparece em linhas horizontais. Por exemplo, na ilustração anterior, o sobrenome, nome e número de identificação de cada funcionário são exibidos como um conjunto porque eles aparecem em uma linha horizontal.
Definindo e aplicando estilos sobre colunas em um GridView
Ao definir o campo de dados a ser exibido em uma GridViewColumn, use as propriedades DisplayMemberBinding, CellTemplate, ou CellTemplateSelector. A propriedade DisplayMemberBinding prevalece sobre qualquer uma das propriedades do modelo.
Para especificar o alinhamento do conteúdo em uma coluna de uma GridView, defina um CellTemplate. Não use as propriedades HorizontalContentAlignment e VerticalContentAlignment para conteúdo ListView que é exibido usando um GridView.
Para especificar propriedades de modelo e de estilo para cabeçalhos de coluna, use as classes GridView, GridViewColumn e GridViewColumnHeader. Para obter mais informações, consulte GridView Column Header Styles and Templates Overview.
Adicionando elementos visuais a um GridView
Para adicionar elementos visuais, como controles CheckBox e Button, a uma visualização GridView, use modelos ou estilos.
Se você definir um elemento visual explicitamente como um item de dados, ele pode aparecer apenas uma vez em um GridView. Essa limitação existe porque um elemento pode ter apenas um pai e portanto, pode aparecer apenas uma vez na árvore visual. Para ver um exemplo de como adicionar um CheckBox a uma coluna em uma visualização GridView, consulte Exibição em Lista com GridView e CheckBoxes exemplo.
Aplicando estilos sobre linhas em um GridView
Use as classes GridViewRowPresenter e GridViewHeaderRowPresenter para formatar e exibir as linhas de um GridView. Para ver um exemplo de como aplicar estilos sobre linhas em uma visualização GridView, consulte Como: Estilizar uma linha em um ListView que implementa um GridView.
Questões de alinhamento ao usar ItemContainerStyle
Para evitar problemas de alinhamento entre células e cabeçalhos de coluna, não defina uma propriedade ou especifique um modelo que afeta a largura de um item em um ItemContainerStyle. Por exemplo, não defina a propriedade Margin ou especifique um ControlTemplate que adiciona um CheckBox a um ItemContainerStyle que é definido em um controle ListView. Em vez disso, especifique as propriedades e os modelos que afetam a largura da coluna diretamente em classes que definem uma visualização GridView.
Por exemplo, para adicionar um CheckBox às linhas no modo de visualização GridView, adicione a CheckBox a um DataTemplate e em seguida, defina a propriedade CellTemplate como aquele DataTemplate. Para ver um exemplo de como adicionar um CheckBox a uma coluna em uma visualização GridView, consulte Exibição em Lista com GridView e CheckBoxes exemplo.
Interações do usuário com um GridView
Quando você usar um GridView no seu aplicativo, os usuários podem interagir com e modificar a formatação do GridView. Por exemplo, os usuários podem reordenar colunas, redimensionar uma coluna, selecionar itens em uma tabela, e rolar o conteúdo. Você também pode definir um tratador de eventos que responde quando um usuário clica no botão de cabeçalho de coluna. O tratador de eventos pode realizar operações como a classificação dos dados que são exibidos na GridView de acordo com o conteúdo de uma coluna.
A lista a seguir discute mais detalhadamente os recursos do uso de GridView para interação com o usuário:
Reordenar colunas usando o método do tipo arrastar e soltar.
Os usuários podem reordenar colunas em uma GridView pressionando o botão esquerdo do mouse enquanto ele está sobre um cabeçalho de coluna e, em seguida, arrastando essa coluna para uma nova posição. Enquanto o usuário arrasta o cabeçalho da coluna, uma versão flutuante do cabeçalho é exibida, bem como uma linha preta sólida que mostra onde inserir a coluna.
Se você desejar modificar o estilo padrão para a versão de um cabeçalho flutuante, especifique um ControlTemplate para um tipo GridViewColumnHeader que é disparado quando a propriedade Role é definida como Floating. Para obter mais informações, consulte Como: Create a Style for a Dragged GridView Column Header.
Redimensione uma coluna para o seu conteúdo.
Os usuários podem clicar duas vezes na alça à direita de um cabeçalho de coluna para redimensionar uma coluna de modo sua largura adaptse-se ao seu conteúdo.
Observação:Você pode conjunto o Width propriedade para Double.NaN para produzir o mesmo efeito.
selecionar os itens de linha.
Os usuários podem selecionar um ou mais itens em um GridView.
Se você desejar alterar o Style de um item selecionado, consulte Como: Usar acionadores para estilizar itens selecionados em um ListView.
Role para exibir o conteúdo que não é inicialmente visível na tela.
Se o tamanho do GridView não é grande o suficiente para exibir todos os itens, os usuários podem rolar horizontalmente ou verticalmente usando barras de rolagem, que são fornecidas por um controle ScrollViewer. Um ScrollBar fica oculto se todo o conteúdo estiver visível em uma direção específica. Cabeçalhos de coluna não rolam com um barra de rolagem vertical, mas rolam horizontalmente.
Interagir com colunas clicando nos botões de cabeçalho de coluna.
Quando os usuários clicam um botão de cabeçalho de coluna, eles podem classificar os dados que são exibidos na coluna se você tiver fornecido um algoritmo de classificação.
Você pode tratar o evento Click para botões de cabeçalho de coluna para fornecer funcionalidade como um algoritmo de classificação. Para tratar o evento Click para um cabeçalho de coluna única, defina um tratador de eventos no GridViewColumnHeader. Para definir um tratador de eventos que trata o evento Click para todos os cabeçalhos de coluna, defina o tratador no controle ListView. Para mais informações e um exemplo, consulte Exemplo de dados que classifica Exibição em Lista.
Obtendo outros modos de visualização personalizados
A classe GridView, que é derivada da classe abstrata ViewBase, é apenas uma dos modos de exibição possíveis para a classe ListView. Você pode criar outros modos de visualização personalizados para ListView ao derivar da classe ViewBase. Para um exemplo de um modo de exibição personalizado, consulte Como: Criar um Modo de Visualização Personalizado para um ListView.
Classes de apoio a GridView
As seguintes classes oferecem suporte para o modo de visualização GridView.
Consulte também
Tarefas
Como: Sort a GridView Column When a Header Is Clicked