Partilhar via

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

  • Artigo

Vincular uma fonte de dados a um controle é essencial para fornecer aos usuários acesso aos dados subjacentes, quer você esteja usando Windows Forms ou WPF. Este passo a passo mostra como você pode usar a vinculaçã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.

  • Definição do modelo de dados.

  • Especificando o layout do formulário.

  • Especificação de associações de dados.

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

  • Adicionando a fonte de dados ao projeto.

  • Vinculação à fonte de dados.

Para obter uma lista de código completa das tarefas ilustradas nesta explicação passo a passo, consulte Exemplo de vinculação de dados em aplicativos híbridos.

Quando terminar, você terá uma compreensão dos recursos de vinculaçã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

  1. Crie um projeto de aplicativo WPF chamado WPFWithWFAndDatabinding.

  2. No Explorador de Soluções, adicione referências aos seguintes assemblies.

    • Integração do WindowsForms

    • System.Windows.Forms

  3. Abra MainWindow.xaml no WPF Designer.

  4. No elemento Window, adicione o seguinte mapeamento de namespaces do Windows Forms.

    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

  5. Nomeie o elemento Grid padrão mainGrid atribuindo a propriedade Name.

    <Grid x:Name="mainGrid">

Definindo o modelo de dados

A lista mestra de clientes é apresentada num controlo 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 XAML para a 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 de grelha

  • Copie o seguinte XAML 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>

Para configurar os controlos do Label

  • Copie o seguinte XAML 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>

Especificando associações de dados

A lista principal de clientes é exibida num controlo de ListBox. O ListItemsTemplate anexado vincula 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 XAML para a declaração do elemento Grid.

    A classe Binding vincula 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>

Apresentação de Dados usando Interoperabilidade

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

Para exibir dados no controle DataGridView

  • Copie o seguinte XAML 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>

Adicionando a fonte de dados ao projeto

Com o 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 adicionadas.

Para adicionar a fonte de dados

  1. No menu Dados, selecione Adicionar Nova Fonte de Dados.

  2. No Data Source Configuration Wizard, crie uma conexão com o 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.

  3. Quando for solicitado pelo Assistente de Configuração da Fonte de Dados , guarde a cadeia de ligação como NorthwindConnectionString.

    Importante

    O armazenamento de informações confidenciais, como uma senha, na cadeia de conexão pode afetar a segurança do seu 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.

  4. Quando for solicitado a escolher 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 componente System.Windows.Forms.BindingSource fornece uma interface uniforme para a fonte de dados do aplicativo. A vinculação à fonte de dados é implementada no arquivo code-behind.

Para vincular à fonte de dados

  1. Abra o arquivo code-behind, chamado MainWindow.xaml.vb ou MainWindow.xaml.cs.

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

    Este código declara o componente BindingSource e as 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()

  3. Copie o código a seguir para o construtor.

    Este código cria e inicializa o componente BindingSource.

    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

  4. Abra MainWindow.xaml.

  5. No modo Design ou XAML, selecione o elemento Window.

  6. Na janela Propriedades, clique na guia Eventos.

  7. Clique duas vezes no evento Loaded.

  8. 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 preenche os objetos Customers e 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

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

    Esse método manipula o evento CurrentChanged 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

  10. Pressione F5 para criar e executar o aplicativo.

Ver também