Instruções passo a passo: associando a dados em aplicativos híbridos

Artigo
10/18/2023

Associar uma fonte de dados a um controle é essencial para fornecer aos usuários acesso aos dados subjacentes, independentemente de você estar 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 Windows Forms e WPF.

As tarefas ilustradas neste passo a passo incluem:

Criação do projeto.
Definir o modelo de dados.
Especificar o layout do formulário.
Especificar associações de dados.
Exibir dados usando interoperação.
Adicionar a fonte de dados ao projeto.
Criar uma associação à fonte de dados.

Para uma listagem de código completa das tarefas ilustradas neste passo a passo, consulte Exemplo de associação de dados em aplicativos híbridos.

Quando tiver terminado, você terá um entendimento dos recursos de associação de dados em aplicativos híbridos.

Pré-requisitos

Você precisará dos seguintes componentes para concluir este passo a passo:

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

Criando o Projeto

Criar e configurar o projeto

Crie um projeto de aplicativo WPF chamado WPFWithWFAndDatabinding.
No Gerenciador de Soluções, adicione referências aos assemblies a seguir.
- WindowsFormsIntegration
- System.Windows.Forms
Abra o MainWindow.xaml no WPF Designer.
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 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 à ListBox propriedade do ItemTemplate controle.

Para definir o modelo de dados

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

<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 controles são fornecidos para identificar cada coluna na tabela Clientes.

Para configurar o layout de grade

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

<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 de Rótulo

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

<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 controle. O anexo ListItemsTemplate vincula um TextBlock controle ao ContactName campo 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 Grid declaração do elemento.

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 interoperação

Os pedidos correspondentes ao cliente selecionado são exibidos em um System.Windows.Forms.DataGridView controle chamado dataGridView1. O dataGridView1 controle está associado à fonte de dados no arquivo code-behind. Um WindowsFormsHost controle é o pai desse controle do Windows Forms.

Para exibir dados no controle DataGridView

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

<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 ao banco de dados Northwind usando um conjunto de dados. Para obter mais informações, consulte Como conectar-se a dados em um banco de dados.
Quando for solicitado pelo Assistente de Configuração de Fonte de Dados, salve a cadeia de conexão como NorthwindConnectionString.

Importante

O armazenamento das informações confidenciais, como uma senha, dentro da cadeia de conexão pode afetar a segurança do aplicativo. O uso da 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 Customers tabelas e Orders e nomeie o conjunto NorthwindDataSetde dados gerado.

Criando uma associação à fonte de dados

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

Para associar à fonte de dados

Abra o arquivo code-behind, que se chama 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 seguinte código 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 no modo XAML, selecione o Window elemento.
Na janela Propriedades, clique na guia Eventos.
Clique duas vezes no Loaded evento.

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

Esse código atribui o BindingSource componente como o contexto de dados e preenche os objetos e Customers do Orders adaptador.

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.

Confira também