Demonstra Passo a passo: Construindo um layout dinâmico controlado por dados

Windows Presentation Foundation (WPF) fornece controles que suportam orientado a dados dinâmicos layouts.Usando esses controles com a Windows Presentation Foundation (WPF) Designer for Visual Studio torna fácil para você criar esses tipos de layouts.Você pode usar os seguintes controles em seus aplicativos:

O controle ListView fornece a infraestrutura para exibir um conjunto de itens de dados em diferentes layouts ou modos de exibição.Normalmente você usar um GridView em conjunto com o controle ListView para exibir dados em colunas.Para obter mais informações, consulte Visão geral de ListView e GridView Overview.

Nesta explicação passo a passo, você executa as seguintes tarefas:

  • Prepare um fonte de dados.

  • Criar um aplicativo WPF.

  • Configurar o padrão Grid painel de controle.

  • Adicionar e configurar um ListView controle.

  • Adicionar e configurar uma GridView em XAML.

  • Adicionar e configurar um Button controle.

  • Adicione código de associação de dados.

  • Teste o aplicativo.

A ilustração a seguir mostra como o aplicativo será exibido.

Observação:

As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

  • Visual Studio 2008

Preparando a Fonte de dados

Para essa explicação passo a passo, será necessário um fonte de dados de exemplo para ligar.Você criará um simples arquivo fonte de dados CSV.

Preparar a fonte de dados

  1. Crie uma nova pasta e nomeie de dados .

  2. Na pasta Data, crie um novo arquivo de texto e nomeie de employees.csv .

    Observação:

    Você pode usar qualquer editor de texto, por exemplo o Bloco de Notas, para criar o arquivo.

  3. Adicione o seguinte para o arquivo de texto:

    LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

  4. Salve e feche o arquivo.

    Dica:

    Você pode abrir o arquivo no Excel e confirmar se os dados separados por vírgulas aparecem em colunas separadas.

  5. Na pasta Data, crie um novo arquivo de texto e nomeie de Schema.ini .O arquivo de esquema descreve o formato dos arquivos de texto na sua pasta de dados.

  6. Adicione o seguinte para o arquivo de texto:

    [employees.csv]
Format=CSVDelimited
ColNameHeader=True
    Dica:

    Essa explicação passo a passo no seu arquivo CSV tem títulos de coluna.Para vincular a um arquivo CSV que não tenha títulos de coluna, altere ColNameHeader=True para ColNameHeader=False.

  7. Salve e feche o arquivo.

Criando o projeto

O próximo procedimento é criar um Visual Studio projeto para o aplicativo.

Para criar o projeto

  1. Criar um novo projeto de Aplicativo WPF em Visual Basic ou Visual C# chamado DataDrivenLayout.Para obter mais informações, consulte Como: Criar um novo projeto de aplicativo do WPF.

    Window1.xaml é aberto no WPF Designer.

  2. No menu File, clique em Save All.

Configurando o Controle do Painel de Grade Padrão

Por padrão, o novo aplicativo WPF contém um Window com um painel Grid.Nesse procedimento você adiciona duas linhas à grade.Você define a altura de uma linha para automaticamente, de modo que ela é dimensionada para caber o conteúdo.Você define a altura da outra linha para *, que ele use a altura disponível restante.

Configurar o controle do painel de grade padrão

  1. No modo Design, selecione Grid.Para obter mais informações, consulte Como: Selecionar e mover elementos na área de design.

  2. Na janela Properties,localize a propriedade RowDefinitions e clique no botão de reticências na coluna valor da propriedade.

    O Editor de coleção aparece.

  3. Clique em Adicionar duas vezes para adicionar duas linhas.

  4. Defina a propriedade de altura da primeira linha para *.

  5. Defina a propriedade Altura da segunda linha para Automático.

  6. Clique em OK para fechar o Editor de coleção e retornar para a WPF Designer.

    Agora há duas linhas na grade, mas aparece apenas uma linha.A linha cuja propriedade altura estiver definida como automática está temporariamente oculta porque ela não tem qualquer conteúdo.Para essa explicação passo a passo, está tudo bem.Para evitar que isso aconteça no futuro, você pode usar dimensionamento de estrela enquanto você trabalha, e alterar para automático quando tiver terminado.

  7. No menu File, clique em Save All.

Adicionando e configurando um banco de dados

Nesse procedimento você adiciona um ListView.Você fornecer o ListView um nome para que você possa consultá-lo a partir do arquivo code-behind.Você configura suas propriedades de layout.

Para adicionar e configurar um ListView.

  1. No modo Design, selecione Grid.

  2. Da Caixa de Ferramentas ,no grupo de Controls, arraste um ListView controle para o Grid.

  3. Na janela Properties, defina as propriedades a seguir ListView:

    Propriedade

    Valor

    Nome

    lvEmployees

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. No menu File, clique em Save All.

Adicionando e configurando um banco de dados

Nesse procedimento você adiciona um GridView com três colunas para exibir os dados a partir do arquivo de texto.Você dá nomes às colunas pois você irá se referir à elas a partir do code-behind para vincular os dados às colunas individualmente.Para obter mais informações, consulte Como: Exibir conteúdo de um ListView usando um GridView.

Para adicionar e configurar um ListView.

  1. No editor do XAML localize um elemento ListView.O elemento tem a seguinte forma:

    <ListView <ATTRIBUTES> />
    Dica:

    Para facilmente realçar elementos no modo de exibição em XAML , clique no controle no modo de Design ou use a janelaEstrutura de Tópicos do Documento

  2. Substitua o elemento ListView com a marcação a seguir.

    <ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

  3. No menu File, clique em Save All.

Adicionando e Configurando um Botão

Nesse procedimento você adiciona um Button e especifica o evento Click.

Para adicionar e configurar um Botão

  1. No modo Design, selecione Grid.

    Dica:

    Como o ListView está encobrindo a Grid, talvez seja difícil selecionar o Grid.Você pode usar a tecla TAB ou a janela Estrutura de Tópicos de Documento para selecionar o Grid.

  2. Da Caixa de Ferramentas ,no grupo de Controls, arraste um Button controle para o Grid.

  3. Na janela Properties, defina as propriedades a seguir Button:

    Propriedade

    Valor

    Nome

    btnGetData

    Conteúdo

    Obter dados

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    75

    Height

    23

    HorizontalAlignment

    Direita

    VerticalAlignment

    Parte Inferior

    Margin

    5

  4. No editor do XAML localize um elemento Button.O elemento tem a seguinte forma:

    <Button <ATTRIBUTES>>Button</Button>
    Dica:

    Para facilmente realçar elementos no modo de exibição em XAML , clique no controle no modo de Design ou use a janelaEstrutura de Tópicos do Documento

  5. Edite o XAML para adicionar um atributo Click do evento.O código deve se parecer com o seguinte:

    <Button Click="btnGetData_Click"<ATTRIBUTES>>Button</Button>

  6. No menu File, clique em Save All.

Adicionando o código de Associação de Dados

Neste procedimento você adiciona o código para o Click evento de Button.Em tempo de execução você cliqua no botão para obter os dados e liga os para o ListView e o GridView.

Para adicionar o código associação de dados

  1. Abra o arquivo code-behind; também o Window1.xaml.cs ou Window1.xaml.vb, dependendo do idioma que você selecionou para seu projeto.

  2. No início do editor de códigos, adicione o seguinte código.Para vincular aos dados você precisa acessar o System.Data e System.Data.OleDb namespaces.

    Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

    using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

  3. Adicione o seguinte código à classe Window1:Você usa um DataTable para armazenar os dados.

    Dim dtEmployees As DataTable

    DataTable dtEmployees;

  4. Adicione o seguinte código à classe Window1:Quando o usuário clica no botão, você obtém os dados, e em seguida liga os para o ListView.

    Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

    private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

  5. Na classe Window1, adicione o código a seguir e especifique o caminho para a pasta de Dados.Para obter os dados, use um OleDbDataAdapter.

    Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

    DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

  6. Adicione o seguinte código à classe Window1:Para vincular os dados para o ListView, você definir sua DataContext como o DataTable.Você exibe as colunas de dados em colunas de GridView.

    Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

    void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

  7. No menu File, clique em Save All.

Definindo a janela como tamanho dinamicamente

A propriedade SizeToContent especifica como o tamanho de um Window altera quando altera o tamanho do seu conteúdo.Por padrão, essa propriedade estiver definida como Manual, o que significa que o usuário pode redimensionar manualmente a janela para caber o conteúdo.Nesse procedimento você definir essa propriedade para WidthAndHeight, o que significa que a janela é redimensionada dinamicamente quando seu conteúdo é alterado.

Definindo a janela como tamanho dinamicamente

  1. Abra Window1.XAML no designer.

  2. No modo Design, selecione Window.

  3. Na janela Properties, defina as propriedades a seguir Window:

    Propriedade

    Valor

    SizeToContent

    WidthAndHeight

    Width

    Auto

    Height

    Auto

  4. No menu File, clique em Save All.

Testando o aplicativo

Para testar o aplicativo

  1. No menu Depuração, clique em Iniciar Depuração.

    Inicia o aplicativo e a janela é exibida.Como você define a propriedade SizeToContentWidthAndHeight, a janela é apenas grande o suficiente para os GridView cabeçalhos e os Button.

  2. Clique em Obter Dados.

    O aplicativo obtém os dados e os vincula à GridView.O GridView, ListView e Window todos redimensionam dinamicamente para caber o conteúdo novo.

  3. Feche a janela.

Colocando tudo junto

Este é o arquivo Window1.xaml concluído:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

Próximas etapas

Nessa explicação passo a passo é usado um GridView com três colunas para exibir dados.Você acopla dados diretamente a cada coluna individualmente.Você também pode usar modelos de dados para organizar e os dados em um ListView ou um GridView estilo.Para obter mais informações, consulte Visão geral sobre Templating de dados.

Você pode experimentar usando modelos de dados nessa explicação passo a passo.Por exemplo, você pode criar um modelo como o seguinte:

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

Em seguida, use o modelo de dados na GridView com um código como o seguinte:

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

Remova ou comente sobre o código do code-behind a seguir:

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

Consulte também

Tarefas

Como: Construir um layout dinâmico controlado por dados

Conceitos

O sistema de layout

Visão geral do designer WPF

Outros recursos

Walkthroughs de layout

Trabalhando com o designer WPF

  • Last updated on