Partilhar via

Visão geral do GridView

GridView O modo de visualização é um dos modos de visualização de um ListView controlador. A GridView classe e suas classes de suporte permitem que você e seus usuários visualizem coleções de itens em uma tabela que normalmente usa botões como cabeçalhos de coluna interativos. Este tópico apresenta a GridView classe e descreve seu uso.

O que é uma vista GridView?

O GridView modo de exibição exibe uma lista de itens de dados vinculando campos de dados a colunas e exibindo um cabeçalho de coluna para identificar o campo. O estilo padrão 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 do usuário; Por exemplo, os usuários podem clicar no cabeçalho da coluna para classificar GridView os dados de acordo com o conteúdo de uma coluna específica.

Observação

Os controles de botão usados GridView para cabeçalhos de coluna são derivados de ButtonBase.

A ilustração a seguir mostra uma GridView visão de ListView conteúdo.

Captura de tela que mostra o modo de exibição GridView do conteúdo ListView.

GridView As colunas são representadas por GridViewColumn objetos, que podem ser dimensionados automaticamente de acordo com seu conteúdo. Opcionalmente, você pode definir explicitamente a GridViewColumn para uma largura específica. Você pode redimensionar colunas arrastando o seletor entre os cabeçalhos das colunas. Você também pode adicionar, remover, substituir e reordenar colunas dinamicamente porque essa funcionalidade está incorporada ao GridView. No entanto, GridView não é possível atualizar diretamente os dados que ele exibe.

O exemplo a seguir mostra como definir um GridView que exibe dados de funcionários. Neste exemplo, ListView define o EmployeeInfoDataSource como o ItemsSource. As definições de propriedade de DisplayMemberBinding vinculam GridViewColumn conteúdo a EmployeeInfoDataSource categorias de dados.


<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 criada pelo exemplo anterior. O controle GridView exibe dados de um objeto ItemsSource:

Captura de tela que mostra um ListView com saída GridView.

Layout e estilo do GridView

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

O conteúdo de dados relacionados é exibido em linhas horizontais. Por exemplo, na ilustração anterior, o sobrenome, o nome e o número de ID de cada funcionário são exibidos como um conjunto porque aparecem em uma linha horizontal.

Definindo e estilizando colunas em um GridView

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

Para especificar o alinhamento do conteúdo em uma coluna de um GridView, defina uma CellTemplate. Não use as propriedades HorizontalContentAlignment e VerticalContentAlignment para conteúdo ListView que é exibido usando um GridView.

Para especificar propriedades de modelo e estilo para cabeçalhos de coluna, use as classes GridView, GridViewColumn, e GridViewColumnHeader. Para obter mais informações, consulte Visão geral de estilos e modelos de cabeçalho de coluna GridView.

Adicionando elementos visuais a um GridView

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

Se você definir explicitamente um elemento visual como um item de dados, ele poderá aparecer apenas uma vez em um GridViewarquivo . Essa limitação existe porque um elemento pode ter apenas um pai e, portanto, pode aparecer apenas uma vez na árvore visual.

Estilizando linhas em um GridView

Utilize as classes GridViewRowPresenter e GridViewHeaderRowPresenter para formatar e exibir as linhas de um GridView. Para obter um exemplo de como estilizar linhas em um GridView modo de exibição, consulte Estilizar uma linha em um ListView que implementa um GridView.

Problemas de alinhamento ao usar 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 em um ItemContainerStyle. Por exemplo, não defina a Margin propriedade ou especifique um ControlTemplate que adicione um CheckBox a um ItemContainerStyle que está definido num controlo ListView. Em vez disso, especifique as propriedades e os modelos que afetam a largura da coluna diretamente nas classes que definem um modo de GridView exibição.

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

Interações do usuário com um GridView

Quando você usa um GridView em seu aplicativo, os usuários podem interagir e modificar a formatação do GridView. Por exemplo, os usuários podem reordenar colunas, redimensionar uma coluna, selecionar itens em uma tabela e percorrer o conteúdo. Você também pode definir um manipulador de eventos que responde quando um usuário clica no botão de cabeçalho da coluna. O manipulador de eventos pode executar operações como classificar os dados que são exibidos no GridView de acordo com o conteúdo de uma coluna.

A lista a seguir discute com mais detalhes os recursos de uso GridView para interação do usuário:

  • Reordene colunas usando o método de arrastar e soltar.

    Os usuários podem reordenar colunas em um 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 desejar modificar o estilo padrão para a versão flutuante de um cabeçalho, especifique um ControlTemplate para um GridViewColumnHeader tipo que é acionado quando a Role propriedade é definida como Floating. Para obter mais informações, consulte Criar um estilo para um cabeçalho de coluna GridView arrastado.

  • Redimensione uma coluna para o seu conteúdo.

    Utilizadores podem clicar duas vezes na alça de ajuste à direita do cabeçalho da coluna para redimensionar a coluna para ajustar ao seu conteúdo.

    Observação

    Você pode definir a Width propriedade para Double.NaN produzir o mesmo efeito.

  • Selecione itens da linha.

    Os utilizadores podem selecionar um ou mais itens em um GridView.

    Se você quiser alterar o Style de um item selecionado, consulte Usar gatilhos para estilizar itens selecionados em um ListView.

  • Desloque-se para ver o conteúdo que não está inicialmente visível no ecrã.

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

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

    Quando os usuários clicam em um botão de cabeçalho de coluna, eles podem classificar os dados exibidos na coluna se você tiver fornecido um algoritmo de classificação.

    Você pode manipular o Click evento para botões de cabeçalho de coluna para fornecer funcionalidade como um algoritmo de classificação. Para manipular o Click evento para um cabeçalho de coluna única, defina um manipulador de eventos no GridViewColumnHeader. Para definir um manipulador de eventos que manipula o Click evento para todos os cabeçalhos de coluna, defina o manipulador no ListView controle.

Obtenção de outras perspetivas personalizadas

A GridView classe, que é derivada da ViewBase classe abstrata, é apenas um dos modos de exibição possíveis para a ListView classe. Você pode criar outros modos de exibição personalizados para ListView derivando da ViewBase classe. Para obter um exemplo de um modo de exibição personalizado, consulte Criar um modo de exibição personalizado para um ListView.

Classes de suporte do GridView

As classes a seguir suportam o GridView modo de exibição.

Ver também

  • Last updated on