Passo a passo: Vinculação de dados em aplicativos híbridos

Associar uma fonte de dados a um controle é essencial para fornecer aos usuários acesso a dados subjacentes, seja você usando o Windows Forms ou o WPF. Este passo a passo mostra como você pode usar a associação de dados em aplicativos híbridos que incluem controles do Windows Forms e do WPF.

As tarefas ilustradas neste passo a passo incluem:

Criar o projeto.
Definindo o modelo de dados.
Especificando o layout do formulário.
Especificando associações de dados.
Exibindo dados usando a interoperabilidade.
Adicionando a fonte de dados ao projeto.
Vinculação à fonte de dados.

Para obter uma listagem de código completa das tarefas ilustradas neste passo a passo, consulte a Associação de Dados no Exemplo de Aplicativos Híbridos.

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

Pré-requisitos

Você precisa dos seguintes componentes para concluir este passo a passo:

Visual Studio.
Acesso ao banco de dados de exemplo Northwind em execução no Microsoft SQL Server.

Criando o projeto

Para criar e configurar o projeto

Criar um projeto de aplicativo WPF chamado WPFWithWFAndDatabinding.
No Gerenciador de Soluções, adicione referências aos assemblies a seguir.
- WindowsFormsIntegration
- System.Windows.Forms
Abra MainWindow.xaml no Designer do WPF.
Window No elemento, adicione o seguinte mapeamento de namespaces do Windows Forms.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Nomeie o elemento Grid padrão mainGrid atribuindo a Name propriedade.
```
<Grid x:Name="mainGrid">
```

Definindo o modelo de dados

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

Para definir o modelo de dados

Copie o XAML a seguir na declaração do elemento Grid.

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

Especificando o layout do formulário

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

Para configurar o layout da grade

Copie o XAML a seguir na 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>

Para configurar o controle de rótulos

Copie o XAML a seguir na 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>

Especificando associações de dados

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

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

Para especificar associações de dados

Copie o XAML a seguir na declaração do elemento Grid.

A Binding classe associa os TextBox controles 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>

Exibindo dados usando a interoperação

Os pedidos correspondentes ao cliente selecionado são exibidos em um System.Windows.Forms.DataGridView controle chamado dataGridView1. O dataGridView1 controle está vinculado à fonte de dados no arquivo de código subjacente. Um WindowsFormsHost controle é o pai desse controle do Windows Forms.

Para exibir dados no controle DataGridView

Copie o XAML a seguir na 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>

Adicionando a fonte de dados ao projeto

Com o Visual Studio, você pode adicionar facilmente 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 adicionadas.

Para adicionar a fonte de dados

No menu Dados , selecione Adicionar Nova Fonte de Dados.
No Assistente de Configuração da Fonte de Dados, crie uma conexão com o banco de dados Northwind usando um conjunto de dados. Para obter mais informações, consulte Como se conectar a dados em um banco de dados.
Quando você for solicitado pelo Assistente de Configuração da Fonte de Dados, salve a cadeia de conexão como NorthwindConnectionString.

Importante

Armazenar informações confidenciais, como uma senha, dentro da cadeia de conexão pode afetar a segurança do aplicativo. Usar a Autenticação do Windows, também conhecida como segurança integrada, é uma maneira mais segura de controlar o acesso a um banco de dados. Para obter mais informações, consulte Protegendo informações de conexão.
Quando for solicitado que você escolha seus objetos de banco de dados, selecione as tabelas Customers e Orders e nomeie o conjunto de dados gerado NorthwindDataSet.

Vinculação à fonte de dados

O System.Windows.Forms.BindingSource componente fornece uma interface uniforme para a fonte de dados do aplicativo. A associação à fonte de dados é implementada no arquivo code-behind.

Para vincular à fonte de dados

Abra o arquivo code-behind, que é nomeado MainWindow.xaml.vb ou MainWindow.xaml.cs.

Copie o código a seguir para a definição de MainWindow classe.

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

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

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

Copie o código a seguir para o construtor.

Esse código cria e inicializa o BindingSource componente.

public MainWindow()
{
    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;
}

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

Abra MainWindow.xaml.
No modo design ou exibição XAML, selecione o elemento Window.
Na janela Propriedades, clique na guia Eventos.
Clique duas vezes no evento Loaded.

Copie o código a seguir para o manipulador de eventos Loaded.

Esse código atribui o componente BindingSource como o contexto de dados e popula os objetos adaptadores Customers e Orders.

private void Window_Loaded(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);
}

Private Sub Window_Loaded( _
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

Copie o código a seguir para a definição de MainWindow classe.

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

// 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;
}

' 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

Pressione F5 para compilar e executar o aplicativo.

Consulte também

Comentários

Esta página foi útil?

Last updated on 2025-05-07