Handleiding: binding van gegevens in hybride toepassingen

Artikel
12/19/2024

Het binden van een gegevensbron aan een besturingselement is essentieel voor het bieden van toegang tot onderliggende gegevens, ongeacht of u Windows Forms of WPF gebruikt. In dit overzicht ziet u hoe u gegevensbinding kunt gebruiken in hybride toepassingen die zowel Windows Forms als WPF-besturingselementen bevatten.

Taken die in deze stapsgewijze handleiding worden geïllustreerd, zijn:

Het project wordt gecreëerd.
De gegevenssjabloon definiëren.
De formulierindeling opgeven.
Gegevensbindingen opgeven.
Gegevens weergeven met behulp van interoperation.
De gegevensbron toevoegen aan het project.
Binding met de gegevensbron.

Zie voor een volledige codelijst van de taken die in deze handleiding worden geïllustreerd, Data Binding in Hybrid Applications Sample.

Wanneer u klaar bent, hebt u inzicht in de functies voor gegevensbinding in hybride toepassingen.

Voorwaarden

U hebt de volgende onderdelen nodig om dit scenario te voltooien:

Visual Studio.
Toegang tot de Northwind-voorbeelddatabase die wordt uitgevoerd op Microsoft SQL Server.

Het project maken

Het project maken en instellen

Maak een WPF-toepassingsproject met de naam WPFWithWFAndDatabinding.
Voeg in Solution Explorer verwijzingen toe aan de volgende assembly's.
- WindowsFormsIntegration
- System.Windows.Forms
Open MainWindow.xaml in de WPF Designer.
Voeg in het Window-element de volgende toewijzingsmapping van Windows Forms-naamruimten toe.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Geef het standaardelement Grid een naam mainGrid door de eigenschap Name toe te wijzen.
```
<Grid x:Name="mainGrid">
```

De gegevenssjabloon definiëren

De hoofdlijst met klanten wordt weergegeven in een ListBox besturingselement. In het volgende codevoorbeeld wordt een DataTemplate-object genaamd ListItemsTemplate gedefinieerd, waarmee de visuele boomstructuur van het ListBox-besturingselement wordt beheerst. Deze DataTemplate is toegewezen aan de eigenschap ItemTemplate van het ListBox besturingselement.

De gegevenssjabloon definiëren

Kopieer de volgende XAML naar de declaratie van het Grid element.

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

De formulierindeling opgeven

De indeling van het formulier wordt gedefinieerd door een raster met drie rijen en drie kolommen. Label bedieningselementen worden verstrekt om elke kolom in de tabel 'Klanten' te benoemen.

De rasterindeling instellen

Kopieer de volgende XAML naar de declaratie van het Grid element.

<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>

De besturingselementen voor labels instellen

Kopieer de volgende XAML naar de declaratie van het Grid element.

<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>

Gegevensbindingen opgeven

De hoofdlijst met klanten wordt weergegeven in een ListBox besturingselement. De gekoppelde ListItemsTemplate koppelt een TextBlock-besturingselement aan het ContactName-veld uit de database.

De details van elke klantrecord worden weergegeven in verschillende TextBox besturingselementen.

Gegevensbindingen opgeven

Kopieer de volgende XAML naar de declaratie van het Grid element.

De Binding klasse verbindt de TextBox besturingselementen met de juiste velden in de database.

<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>

Gegevens weergeven met behulp van interoperation

De orders die overeenkomen met de geselecteerde klant, worden weergegeven in een System.Windows.Forms.DataGridView besturingselement met de naam dataGridView1. Het besturingselement dataGridView1 is gebonden aan de gegevensbron in het code-behind-bestand. Een WindowsFormsHost-controle is het bovenliggende element van dit Windows Forms-besturingselement.

Gegevens weergeven in de DataGridView-besturingselementen

Kopieer de volgende XAML naar de declaratie van het Grid element.

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

De gegevensbron toevoegen aan het project

Met Visual Studio kunt u eenvoudig een gegevensbron aan uw project toevoegen. Met deze procedure wordt een sterk getypte gegevensset toegevoegd aan uw project. Er worden ook verschillende andere ondersteuningsklassen, zoals tabeladapters voor elk van de gekozen tabellen, toegevoegd.

De gegevensbron toevoegen

In het menu Gegevens, selecteer Nieuwe gegevensbron toevoegen.
Maak in de wizard Configuratie van gegevensbroneen verbinding met de Northwind-database met behulp van een gegevensset. Zie How to: Connect to Data in a Database(Verbinding maken met gegevens in een database) voor meer informatie.
Wanneer de wizard Configuratie van gegevensbronom uw invoer vraagt, slaat u de connectiestring op als NorthwindConnectionString.

Belangrijk

Het opslaan van gevoelige informatie, zoals een wachtwoord, binnen de verbindingsreeks kan van invloed zijn op de beveiliging van uw toepassing. Het gebruik van Windows-verificatie, ook wel geïntegreerde beveiliging genoemd, is een veiligere manier om de toegang tot een database te beheren. Zie Verbindingsinformatie beveiligenvoor meer informatie.
Wanneer u wordt gevraagd uw databaseobjecten te kiezen, selecteert u de Customers- en Orders tabellen en geeft u de gegenereerde gegevensset een naam NorthwindDataSet.

Binding met de gegevensbron

Het System.Windows.Forms.BindingSource onderdeel biedt een uniforme interface voor de gegevensbron van de toepassing. Binding met de gegevensbron wordt geïmplementeerd in het code-behind-bestand.

Verbinding maken met de gegevensbron

Open het code-behind-bestand met de naam MainWindow.xaml.vb of MainWindow.xaml.cs.

Kopieer de volgende code naar de MainWindow klassedefinitie.

Deze code declareert het BindingSource-onderdeel en de bijbehorende helperklassen die verbinding maken met de database.

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()

Kopieer de volgende code naar de constructor.

Met deze code wordt het BindingSource onderdeel gemaakt en geïnitialiseerd.

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

Open MainWindow.xaml.
Selecteer in de ontwerpweergave of de XAML-weergave het element Window.
Klik in het venster Eigenschappen op het tabblad Gebeurtenissen.
Dubbelklik op de gebeurtenis Loaded.

Kopieer de volgende code naar de Loaded gebeurtenis-handler.

Met deze code wordt het BindingSource-onderdeel toegewezen als de gegevenscontext en worden de Customers- en Orders adapterobjecten gevuld.

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

Kopieer de volgende code naar de MainWindow klassedefinitie.

Deze methode verwerkt de CurrentChanged gebeurtenis en werkt het huidige item van de gegevensbinding bij.

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

Druk op F5 om de toepassing te bouwen en uit te voeren.

Zie ook