Demonstra Passo a passo: Vinculando a dados em aplicativos híbrido

Artigo
08/25/2010

Associar uma fonte de dados a um controle é essencial para fornecer aos usuários acesso a dados subjacentes, quer você esteja usando Windows Forms ou WPF. Essa explicação passo a passo mostra como você pode usar associação de dados em aplicativos que incluam tanto controles Windows Forms quanto WPF.

Tarefas ilustradas nesta explicação passo a passo incluem:

Criando o projeto
Definir o modelo de dados.
Especificar o layout do formulário.
Especificar associações de dados.
Exibição de dados usando interoperação.
Adicionar uma fonte de dados ao projeto
Fazer associação com uma fonte de dados

For a complete code listing of the tasks illustrated in this walkthrough, see Ligação de dados no híbrido aplicativos de exemplo.

Quando você terminar, você terá uma compreensão dos recursos de associação de dados em aplicativos híbridos.

Observação:
As caixas de diálogo e comandos de menu que você vê podem diferir das descritas no Help, dependendo de suas configurações ativas ou 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.
Acesso ao banco de dados Northwind de exemplo, no Microsoft SQL Server.

Criando o projeto

Para criar e configurar o projeto

Crie um projeto de aplicativo WPF chamado WPFWithWFAndDatabinding.
No Solution Explorer, acrescente uma referência ao assembly WindowsFormsIntegration, que é chamado WindowsFormsIntegration.dll.
No Solution Explorer, acrescente uma referência ao assembly Windows Forms, que é chamado System.Windows.Forms.dll.
Abra Window1.xaml no WPF Designer.

No início do arquivo, mapeie os espaços de nomes Windows Forms com o código a seguir.

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

<Window x:Class="WPFWithWFAndDatabinding.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

De um nome ao elemento Grid padrão mainGrid atribuindo um valor a sua propriedade Name.
```
<Grid x:Name="mainGrid">
```
```
 <Grid x:Name="mainGrid">
```

Defina o modelo de dados.

A lista mestra de clientes é exibida em um controle ListBox. O exemplo de código a seguir define um objeto DataTemplate chamado ListItemsTemplate que controla a árvore visual do controle ListBox. Esse DataTemplate é atribuído à propriedade ItemTemplate do controle ListBox.

Para definir o modelo de dados

Copie o seguinte código para a declaração do elemento Grid.

<Grid.Resources>
  <DataTemplate x:Key="ListItemsTemplate">
    <TextBlock Text="{Binding Path=ContactName}"/>
  </DataTemplate>
</Grid.Resources>

     <Grid.Resources>
            <DataTemplate x:Key="ListItemsTemplate">
                <TextBlock Text="{Binding Path=ContactName}"/>
            </DataTemplate>
        </Grid.Resources>

Especificar o layout do formulário.

O layout do formulário é definido por uma grade com três linhas e três colunas. Label são fornecidos controles para identificar cada coluna na tabela Customers.

Para configurar o layout da grade

Copie o seguinte código para a declaração do elemento Grid.

<Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

     <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

Para configurar os controles Label

Copie o seguinte código para a declaração do elemento Grid.

<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
  <Label Margin="20,38,5,2">First Name:</Label>
  <Label Margin="20,0,5,2">Company Name:</Label>
  <Label Margin="20,0,5,2">Phone:</Label>
  <Label Margin="20,0,5,2">Address:</Label>
  <Label Margin="20,0,5,2">City:</Label>
  <Label Margin="20,0,5,2">Region:</Label>
  <Label Margin="20,0,5,2">Postal Code:</Label>
</StackPanel>

     <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
            <Label Margin="20,38,5,2">First Name:</Label>
            <Label Margin="20,0,5,2">Company Name:</Label>
            <Label Margin="20,0,5,2">Phone:</Label>
            <Label Margin="20,0,5,2">Address:</Label>
            <Label Margin="20,0,5,2">City:</Label>
            <Label Margin="20,0,5,2">Region:</Label>
            <Label Margin="20,0,5,2">Postal Code:</Label>
        </StackPanel>

Especificar associações de dados.

A lista mestra de clientes é exibida em um controle ListBox. O ListItemsTemplate anexado associa um controle TextBlock ao campo ContactName do banco de dados.

Os detalhes de cada registro de cliente são exibidos em vários controles TextBox.

Para especificar associações de dados

Copie o seguinte código para a declaração do elemento Grid.

A classe Binding associa os controles TextBox aos campos apropriados no banco de dados.

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
      <Label Margin="20,5,5,0">List of Customers:</Label>
      <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
               ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
      <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
      <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
      <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
    </StackPanel>

     <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
            <Label Margin="20,5,5,0">List of Customers:</Label>
            <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
               ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
            <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
            <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
            <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
        </StackPanel>

Exibição de dados usando interoperação.

Os pedidos correspondentes ao cliente selecionado são exibidos em um controle System.Windows.Forms.DataGridView chamado dataGridView1. O controle dataGridView1 é associado à fonte de dados no arquivo de código de apoio. Um controle WindowsFormsHost é o pai deste controle Windows Forms.

Para exibir dados no controle DataGridView

Copie o seguinte código para a declaração do elemento Grid.

<WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
  <wf:DataGridView x:Name="dataGridView1"/>
</WindowsFormsHost>

     <WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
            <wf:DataGridView x:Name="dataGridView1"/>
        </WindowsFormsHost>

Adicionar uma fonte de dados ao projeto

Com Visual Studio, você pode facilmente adicionar uma fonte de dados ao seu projeto. Este procedimento adiciona um conjunto de dados fortemente tipado ao seu projeto. Várias outras classes de suporte, como adaptadores de tabela para cada uma das tabelas escolhidas, também são adicionados.

Para criar a fonte de dados

No menu Project, selecione Add New Data Source….
No Data Source Configuration Wizard, clique em New Connection para criar uma conexão com o banco de dados Northwind. Para obter mais informações, consulte Como: Conectar-se a Dados em um Banco de Dados.
Quando solicitado pelo Data Source Configuration Wizard, salve a sequência de caracteres de conexão como NorthwindConnectionString.
Selecione as tabelas Clientes e Pedidos e nomeie o conjunto de dados gerado como NorthwindDataSet.

Fazer associação com a fonte de dados

O componente System.Windows.Forms.BindingSource fornece uma interface uniforme para a fonte de dados do aplicativo. A associação com a fonte de dados é implementada no arquivo de código de apoio.

Para fazer associação à fonte de dados

Abra o arquivo de código de apoio, que é chamado Window1.xaml.cs ou Window1.xaml.vb.

Copie o seguinte código na definição da classe Window1.

Esse código declara o componente BindingSource e classes auxiliares associadas que se conectam ao banco de dados.

Private nwBindingSource As System.Windows.Forms.BindingSource
Private nwDataSet As NorthwindDataSet
Private customersTableAdapter As New NorthwindDataSetTableAdapters.CustomersTableAdapter()
Private ordersTableAdapter As New NorthwindDataSetTableAdapters.OrdersTableAdapter()

private System.Windows.Forms.BindingSource nwBindingSource;
private NorthwindDataSet nwDataSet;
private NorthwindDataSetTableAdapters.CustomersTableAdapter customersTableAdapter = 
    new NorthwindDataSetTableAdapters.CustomersTableAdapter();
private NorthwindDataSetTableAdapters.OrdersTableAdapter ordersTableAdapter = 
    new NorthwindDataSetTableAdapters.OrdersTableAdapter();

Copie o código a seguir para o construtor de Window1, imediatamente após a chamada ao método InitializeComponent.

Esse código cria e inicializa o componente BindingSource.

Public Sub New()
    InitializeComponent()

    ' Create a DataSet for the Customers data.
    Me.nwDataSet = New NorthwindDataSet()
    Me.nwDataSet.DataSetName = "nwDataSet"

    ' Create a BindingSource for the Customers data.
    Me.nwBindingSource = New System.Windows.Forms.BindingSource()
    Me.nwBindingSource.DataMember = "Customers"
    Me.nwBindingSource.DataSource = Me.nwDataSet

End Sub

public Window1()
{
    InitializeComponent();

    // Create a DataSet for the Customers data.
    this.nwDataSet = new NorthwindDataSet();
    this.nwDataSet.DataSetName = "nwDataSet";

    // Create a BindingSource for the Customers data.
    this.nwBindingSource = new System.Windows.Forms.BindingSource();
    this.nwBindingSource.DataMember = "Customers";
    this.nwBindingSource.DataSource = this.nwDataSet;
}

Copie o código a seguir para a definição da classe Window1, após o contrutor.

Esse código define o manipulador de eventos Loaded, que atribui o componente BindingSource como o contexto de dados e preenche os objetos adaptadores Customers e Orders.

Private Sub WindowLoaded( _
ByVal sender As Object, _
ByVal e As RoutedEventArgs)

    ' Fill the Customers table adapter with data.
    Me.customersTableAdapter.ClearBeforeFill = True
    Me.customersTableAdapter.Fill(Me.nwDataSet.Customers)

    ' Fill the Orders table adapter with data.
    Me.ordersTableAdapter.Fill(Me.nwDataSet.Orders)

    ' Assign the BindingSource to 
    ' the data context of the main grid.
    Me.mainGrid.DataContext = Me.nwBindingSource

    ' Assign the BindingSource to 
    ' the data source of the list box.
    Me.listBox1.ItemsSource = Me.nwBindingSource

    ' Because this is a master/details form, the DataGridView
    ' requires the foreign key relating the tables.
    Me.dataGridView1.DataSource = Me.nwBindingSource
    Me.dataGridView1.DataMember = "FK_Orders_Customers"

    ' Handle the currency management aspect of the data models.
    ' Attach an event handler to detect when the current item 
    ' changes via the WPF ListBox. This event handler synchronizes
    ' the list collection with the BindingSource.
    '

    Dim cv As BindingListCollectionView = _
        CollectionViewSource.GetDefaultView(Me.nwBindingSource)

    AddHandler cv.CurrentChanged, AddressOf WPF_CurrentChanged

End Sub

private void WindowLoaded(object sender, RoutedEventArgs e)
{
    // Fill the Customers table adapter with data.
    this.customersTableAdapter.ClearBeforeFill = true;
    this.customersTableAdapter.Fill(this.nwDataSet.Customers);

    // Fill the Orders table adapter with data.
    this.ordersTableAdapter.Fill(this.nwDataSet.Orders);

    // Assign the BindingSource to 
    // the data context of the main grid.
    this.mainGrid.DataContext = this.nwBindingSource;

    // Assign the BindingSource to 
    // the data source of the list box.
    this.listBox1.ItemsSource = this.nwBindingSource;

    // Because this is a master/details form, the DataGridView
    // requires the foreign key relating the tables.
    this.dataGridView1.DataSource = this.nwBindingSource;
    this.dataGridView1.DataMember = "FK_Orders_Customers";

    // Handle the currency management aspect of the data models.
    // Attach an event handler to detect when the current item 
    // changes via the WPF ListBox. This event handler synchronizes
    // the list collection with the BindingSource.
    //

    BindingListCollectionView cv = CollectionViewSource.GetDefaultView(
        this.nwBindingSource) as BindingListCollectionView;

    cv.CurrentChanged += new EventHandler(WPF_CurrentChanged);
}

Copie o seguinte código para a definição da classe Window1, logo após o método WindowLoaded.

Este método trata o evento CurrentChanged e atualiza o item atual da associação de dados.

' This event handler updates the current item 
' of the data binding.
Private Sub WPF_CurrentChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim cv As BindingListCollectionView = sender
    Me.nwBindingSource.Position = cv.CurrentPosition
End Sub

// This event handler updates the current item 
// of the data binding.
void WPF_CurrentChanged(object sender, EventArgs e)
{
    BindingListCollectionView cv = sender as BindingListCollectionView;
    this.nwBindingSource.Position = cv.CurrentPosition;
}

Pressione F5 para criar e executar o aplicativo.

Consulte também

Partilhar via

Demonstra Passo a passo: Vinculando a dados em aplicativos híbrido

Pré-requisitos

Criando o projeto

Para criar e configurar o projeto

Defina o modelo de dados.

Para definir o modelo de dados

Especificar o layout do formulário.

Para configurar o layout da grade

Para configurar os controles Label

Especificar associações de dados.

Para especificar associações de dados

Exibição de dados usando interoperação.

Para exibir dados no controle DataGridView

Adicionar uma fonte de dados ao projeto

Para criar a fonte de dados

Fazer associação com a fonte de dados

Para fazer associação à fonte de dados

Consulte também

Tarefas

Conceitos

Referência

Outros recursos

Recursos adicionais