Windows Dev Center

Como adicionar uma exibição em grade (XAML)

Este tutorial guia você pelas etapas para adicionar uma exibição em grade a um aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic.

Você normalmente adiciona um GridView usando o editor de linguagem XAML ou uma ferramenta de design, como Blend para Visual Studio. Também é possível adicionar um GridView usando código em tempo de execução.

Mapa: Como este tópico está relacionado aos outros? Veja:

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Etapa 1: Adicionar uma exibição em grade ao XAML

Hh943061.wedge(pt-br,WIN.10).gifPara adicionar uma exibição em grade ao XAML

  1. Adicione um controle GridView a um contêiner pai.
  2. Para atribuir um nome à exibição em grade, defina o atributo x:Name como um valor de cadeia de caracteres.

    Para fazer referência a um controle no código, ele deve ter um nome. Caso contrário, um nome não será necessário.

  3. Adicione itens à exibição em grade populando a coleção Items ou associando a propriedade ItemsSource a uma fonte de dados.

    Aqui está um exemplo de como popular a coleção Items no XAML.

    
    <GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
        <x:String>Item 1</x:String>
        <x:String>Item 2</x:String>
    </GridView>
    
    
    

    Aqui está um exemplo de como associar uma ItemsSource a uma coleção no XAML. A ItemsSource é associada ao DataContext da GridView, que é definida em código.

    
    <GridView ItemsSource="{Binding}" SelectionChanged="GridView_SelectionChanged"/>
    
    
    
  4. Para executar uma ação quando a exibição em grade muda, adicione um manipulador para o evento SelectionChanged. No manipulador de eventos SelectionChanged, adicione código para executar algumas ações.
    
    private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    Para verificar o item selecionado do controle externo ao evento SelectionChanged, use a propriedade SelectedItem ou SelectedIndex.

Etapa 2: Adicionar uma exibição em grade em código

Hh943061.wedge(pt-br,WIN.10).gifPara adicionar uma exibição em grade em código

  1. Crie uma nova GridView.
  2. Adicione itens à exibição em grade populando a coleção Items ou definindo a propriedade ItemsSource como uma coleta de dados.
  3. Para executar uma ação quando a exibição em grade muda, adicione um manipulador para o evento SelectionChanged. No manipulador de eventos SelectionChanged, adicione código para executar algumas ações.
  4. Adicione a GridView a um contêiner pai na árvore visual. Isso é necessário para mostrar a exibição em grade na interface do usuário.

    Aqui está um exemplo de como adicionar uma GridView e popular a coleção Items em código.

    
    // Create a new grid view, add content, 
    // and add a SelectionChanged event handler.
    GridView gridView1 = new GridView();
    gridView1.Items.Add("Item 1");
    gridView1.Items.Add("Item 2");
    gridView1.SelectionChanged += GridView_SelectionChanged;
    
    // Add the grid view to a parent container in the visual tree.
    stackPanel1.Children.Add(gridView1);
    
    
    

    Aqui está um exemplo de como adicionar uma GridView e definir a ItemsSource em código.

    
    // Data source.
    List<String> itemsList = new List<string>();
    itemsList.Add("Item 1");
    itemsList.Add("Item 2");
    
    // Create a new grid view, add content, 
    // and add a SelectionChanged event handler.
    GridView gridView1 = new GridView();
    gridView1.ItemsSource = itemsList;
    gridView1.SelectionChanged += GridView_SelectionChanged;
    
    // Add the grid view to a parent container in the visual tree.
    stackPanel1.Children.Add(gridView1);
    
    
    
  5. Para executar uma ação quando a exibição em grade muda, adicione um manipulador para o evento SelectionChanged. No manipulador de eventos SelectionChanged, adicione código para executar algumas ações.
    
    private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    Para verificar o item selecionado do controle externo ao evento SelectionChanged, use a propriedade SelectedItem ou SelectedIndex.

Etapa 3: Adicionar uma exibição em grade usando uma ferramenta de design

Hh943061.wedge(pt-br,WIN.10).gifPara adicionar uma exibição em grade usando uma ferramenta de design

  1. Selecione o controle GridView.
    • No Microsoft Visual Studio, selecione o GridView no painel Caixa de Ferramentas.
    • No Blend para Visual Studio, escolha o GridView no painel Ativos.

      Selecione Controles no lado esquerdo do painel Ativos, se ainda não estiver selecionado.

  2. Adicione uma GridView à superfície de design. Execute uma das seguintes ações:
    • Clique duas vezes na exibição em grade. A exibição em grade é adicionada ao contêiner pai selecionado com as configurações padrão de posição e tamanho.
    • Arraste o modo de exibição de grade para a superfície de design e o solte. A exibição em grade é adicionada na posição onde você a solta com as configurações padrão de tamanho.
    • Desenhe o modo de exibição de grade na superfície de design. A exibição em grade é adicionada com as configurações de tamanho e posição que você desenha.
  3. Se precisar, atribua um nome à GridView. Com a exibição em grade selecionada, digite o nome na caixa de texto da propriedade Nome.

    A caixa de texto da propriedade Nome está na parte superior do painel Propriedades. Para fazer referência a um controle no código, ele deve ter um nome. Caso contrário, um nome não será necessário.

  4. Adicione itens à exibição em grade populando a coleção Items ou associando a propriedade ItemsSource a uma coleta de dados.
  5. Para executar uma ação quando a exibição em grade muda, adicione um manipulador para o evento SelectionChanged. No manipulador de eventos SelectionChanged, adicione código para executar algumas ações.
    1. Selecione a exibição Evento no painel Propriedade.
    2. Com a exibição em grade selecionada na superfície de design, execute um dos seguintes procedimentos:
      • Clique duas vezes na caixa de texto do evento SelectionChanged para adicionar um manipulador com um nome padrão.
      • Digite um nome na caixa de texto do evento SelectionChanged e pressione Enter para adicionar um manipulador com um nome personalizado.

Tópicos relacionados

GridView
Guia de início rápido: adicionando controles ListView e GridView
Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Mapa de aplicativos do Tempo de Execução do Windows em C++

 

 

Mostrar:
© 2015 Microsoft