Partilhar via


Visão Geral do GridView

GridView O modo de visualização é uma das configurações disponíveis para um ListView controlo. A GridView classe e as suas classes de suporte permitem que você e os seus utilizadores vejam coleções de itens numa tabela que normalmente utiliza botões como cabeçalhos de coluna interativos. Este tópico apresenta a GridView disciplina e descreve a sua utilização.

O que é uma vista GridView?

O GridView modo de visualização apresenta uma lista de itens de dados ligando campos de dados a colunas e mostrando um cabeçalho de coluna para identificar o campo. O estilo padrão GridView implementa botões como cabeçalhos de coluna. Ao usar botões para cabeçalhos de colunas, pode implementar capacidades importantes de interação com o utilizador; Por exemplo, os utilizadores podem clicar no cabeçalho da coluna para ordenar GridView dados de acordo com o conteúdo de uma coluna específica.

Observação

Os controlos de botões que GridView usam para cabeçalhos de coluna derivam de ButtonBase.

A ilustração seguinte mostra uma GridView visão do ListView conteúdo.

Captura de ecrã mostrando um ListView com saída GridView a mostrar informações do ficheiro.

GridView As colunas são representadas por GridViewColumn objetos, que podem automaticamente dimensionar-se ao seu conteúdo. Opcionalmente, podes definir explicitamente a GridViewColumn para uma largura específica. Podes redimensionar colunas arrastando o gripper entre cabeçalhos de coluna. Também pode adicionar, remover, substituir e reordenar dinamicamente colunas porque esta funcionalidade está integrada em GridView. No entanto, GridView não é possível atualizar diretamente os dados que apresenta.

O exemplo seguinte mostra como definir um GridView que exibe os dados dos colaboradores. Neste exemplo, ListView define o EmployeeInfoDataSource como o ItemsSource. As definições de propriedades de DisplayMemberBinding vinculam o conteúdo de GridViewColumn às categorias de dados de EmployeeInfoDataSource.


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

Disposição e Estilo do GridView

As células da coluna e o cabeçalho da coluna de a GridViewColumn têm a mesma largura. Por defeito, cada coluna dimensiona a sua largura para se ajustar ao seu conteúdo. Opcionalmente, podes definir uma coluna com uma largura fixa.

Conteúdos de dados relacionados são exibidos em linhas horizontais. Por exemplo, na ilustração anterior, o apelido, o primeiro nome e o número de identificação de cada funcionário são apresentados como um conjunto porque aparecem numa linha horizontal.

Definindo e Estilizando Colunas numa GridView

Ao definir o campo de dados a mostrar num GridViewColumn, use as DisplayMemberBinding, as CellTemplate, ou as CellTemplateSelector propriedades. A DisplayMemberBinding propriedade tem precedência sobre qualquer uma das propriedades do modelo.

Para especificar o alinhamento do conteúdo numa coluna de um GridView, define-se um CellTemplate. Não use as propriedades HorizontalContentAlignment e VerticalContentAlignment para conteúdo ListView que são apresentados através de um GridView.

Para especificar propriedades de template e estilo para cabeçalhos de colunas, use as classes GridView, GridViewColumn e GridViewColumnHeader. Para mais informações, consulte Resumo Geral dos Estilos de Cabeçalho e Modelos de Coluna GridView.

Adição de Elementos Visuais a uma GridView

Para adicionar elementos visuais, como CheckBox e Button controlos, a um GridView modo de visualização, use modelos ou estilos.

Se definir explicitamente um elemento visual como um elemento de dados, ele só pode aparecer uma vez num GridView. Esta limitação existe porque um elemento pode ter apenas um progenitor e, portanto, pode aparecer apenas uma vez na árvore visual.

Estilização das Linhas numa GridView

Utilize as classes GridViewRowPresenter e GridViewHeaderRowPresenter para formatar e mostrar as linhas de um GridView. Para um exemplo de como estilizar linhas num GridView modo de visualização, veja Estilizar uma Linha num ListView que Implementa um GridView.

Problemas de alinhamento quando usa o ItemContainerStyle

Para evitar problemas de alinhamento entre cabeçalhos de coluna e células, não defina uma propriedade nem especifique um modelo que afete a largura de um item num ItemContainerStylearquivo . Por exemplo, não defina a propriedade Margin nem especifique um ControlTemplate que adicione um CheckBox a um ItemContainerStyle que esteja definido num controlo ListView. Em vez disso, especifique as propriedades e os templates que afetam diretamente a largura da coluna nas classes que definem um GridView modo de visualização.

Por exemplo, para adicionar um CheckBox às linhas no modo de visualização GridView, adicione o CheckBox a um DataTemplate e, em seguida, defina a propriedade CellTemplate para esse DataTemplate.

Interações do Utilizador com um GridView

Quando utiliza a GridView na sua aplicação, os utilizadores podem interagir e modificar a formatação do GridView. Por exemplo, os utilizadores podem reordenar colunas, redimensionar uma coluna, selecionar itens numa tabela e percorrer o conteúdo. Também pode definir um gestor de eventos que responda quando um utilizador clica no botão do cabeçalho da coluna. O gestor de eventos pode realizar operações como ordenar os dados que são exibidos em , GridView de acordo com o conteúdo de uma coluna.

A lista seguinte discute com mais detalhe as capacidades de utilização GridView para interação com o utilizador:

  • Reordenar as colunas usando o método de arrastar e largar.

    Os utilizadores podem reordenar as colunas ao pressionarem o botão esquerdo do rato GridView enquanto estão sobre um cabeçalho de coluna e, em seguida, arrastarem essa coluna para uma nova posição. Enquanto o utilizador arrasta o cabeçalho da coluna, é apresentada uma versão flutuante do cabeçalho, bem como uma linha preta sólida que indica onde inserir a coluna.

    Se quiser modificar o estilo padrão para a versão flutuante de um cabeçalho, especifique a ControlTemplate para um GridViewColumnHeader tipo que é ativado quando a Role propriedade é definida como Floating. Para mais informações, consulte Criar um Estilo para Cabeçalho de Coluna Arrastada do GridView.

  • Redimensione uma coluna ao seu conteúdo.

    Os utilizadores podem fazer duplo clique na garra à direita de um cabeçalho de coluna para redimensionar uma coluna e ajustá-la ao seu conteúdo.

    Observação

    Podes definir a propriedade Width para Double.NaN e produzir o mesmo efeito.

  • Selecione os elementos da linha.

    Os utilizadores podem selecionar um ou mais itens num GridViewarquivo .

    Se quiser alterar o Style de um item selecionado, consulte Usar Gatilhos para Estilizar Itens Selecionados numa Vista de Lista.

  • Desloce-se para ver conteúdos que inicialmente não são visíveis no ecrã.

    Se o tamanho do GridView não for suficientemente grande para exibir todos os itens, os utilizadores podem deslocar-se horizontal ou verticalmente usando barras de deslocamento, que são fornecidas por um ScrollViewer controlo. A ScrollBar está oculto se o conteúdo estiver totalmente visível numa direção específica. Os cabeçalhos das colunas não rolam com a barra de rolagem vertical, mas rolam horizontalmente.

  • Interaja com as colunas clicando nos botões de cabeçalho da coluna.

    Quando os utilizadores clicam num botão de cabeçalho de coluna, podem ordenar os dados exibidos na coluna se tiver fornecido um algoritmo de ordenação.

    Pode gerir o Click evento para botões de cabeçalho de coluna para fornecer funcionalidades como um algoritmo de ordenação. Para tratar o Click evento para um cabeçalho de uma única coluna, defina um gestor de eventos no GridViewColumnHeader. Para configurar um manipulador de eventos que trate o evento Click para todos os cabeçalhos das colunas, configure o manipulador no controlo ListView.

Como Obter Outras Vistas Personalizadas

A GridView classe, que deriva da ViewBase classe abstrata, é apenas um dos modos de visualização possíveis para a ListView classe. Podes criar outras vistas personalizadas derivando ListView da ViewBase classe. Para um exemplo de modo de vista personalizada, veja Criar um Modo de Vista Personalizada para uma Vista de Lista.

Classes de Suporte do GridView

As seguintes classes suportam o GridView modo de visualização.

Estilos e modelos

Pode personalizar a aparência dos GridView cabeçalhos das colunas modificando os seus estilos e modelos. Esta secção discute a ordem de precedência das propriedades que utiliza para personalizar um cabeçalho de coluna no GridView modo de visualização de um ListView controlo. Para mais informações, veja O que são estilos e modelos? e Como criar um modelo para um controlo.

Personalizar um cabeçalho de coluna numa GridView

As propriedades que definem o conteúdo, o layout e o estilo de um cabeçalho de coluna em a GridView encontram-se em muitas classes relacionadas. Algumas destas propriedades têm funcionalidades semelhantes ou iguais.

As linhas na tabela seguinte mostram grupos de propriedades que desempenham a mesma função. Pode usar estas propriedades para personalizar os cabeçalhos das colunas num GridViewarquivo . A ordem de precedência para propriedades relacionadas é da direita para a esquerda, onde a propriedade na coluna mais à direita tem a precedência mais alta. Por exemplo, se a ContentTemplate for definida no objeto GridViewColumnHeader e o HeaderTemplateSelector for definida no objeto associado GridViewColumn, o ContentTemplate tem precedência. Neste cenário, o HeaderTemplateSelector não tem nenhum efeito.

Propriedades relacionadas para cabeçalhos de coluna num GridView

GridView GridViewColumn GridViewColumnHeader
Propriedades do Menu de Contexto ColumnHeaderContextMenu Não aplicável ContextMenu
ToolTip

Propriedades
ColumnHeaderToolTip Não aplicável ToolTip
Modelo de cabeçalho

Propriedades
ColumnHeaderTemplate 1/

ColumnHeaderTemplateSelector
HeaderTemplate 1/

HeaderTemplateSelector
ContentTemplate 1/

ContentTemplateSelector
Propriedades do estilo ColumnHeaderContainerStyle HeaderContainerStyle Style

1Para as Propriedades do Modelo de Cabeçalho, se definires tanto as propriedades do modelo como as do seletor de templates, a propriedade do template tem prioridade. Por exemplo, se definir as propriedades ContentTemplate e ContentTemplateSelector, a propriedade ContentTemplate tem prioridade.

Consulte também