Wskazówki: powiązanie z danymi w aplikacjach hybrydowych

Powiązanie źródła danych z kontrolką jest niezbędne do zapewnienia użytkownikom dostępu do danych bazowych niezależnie od tego, czy używasz formularzy systemu Windows, czy WPF. W tym przewodniku pokazano, jak można używać powiązania danych w aplikacjach hybrydowych, które obejmują zarówno kontrolki Windows Forms, jak i WPF.

Zadania przedstawione w tym przewodniku obejmują:

  • Tworzenie projektu.

  • Definiowanie szablonu danych.

  • Określanie układu formularza.

  • Określanie powiązań danych.

  • Wyświetlanie danych przy użyciu współdziałania.

  • Dodawanie źródła danych do projektu.

  • Wiązanie ze źródłem danych.

Aby uzyskać pełną listę kodu zadań przedstawionych w tym przewodniku, zobacz Przykład powiązania danych w aplikacjach hybrydowych.

Po zakończeniu będziesz mieć wiedzę na temat funkcji powiązania danych w aplikacjach hybrydowych.

Wymagania wstępne

Następujące składniki są wymagane do przeprowadzenia tego instruktażu:

  • Programu Visual Studio.

  • Dostęp do przykładowej bazy danych Northwind działającej w programie Microsoft SQL Server.

Tworzenie projektu

Aby utworzyć i skonfigurować projekt

  1. Utwórz projekt aplikacji WPF o nazwie WPFWithWFAndDatabinding.

  2. W Eksplorator rozwiązań dodaj odwołania do następujących zestawów.

    • WindowsFormsIntegration

    • System.Windows.Forms

  3. Otwórz plik MainWindow.xaml w Projektant WPF.

  4. W elememencie Window dodaj następujące mapowanie przestrzeni nazw formularzy systemu Windows.

    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    
  5. Nadaj nazwę domyślnemu Grid elementowi mainGrid , przypisując Name właściwość .

    <Grid x:Name="mainGrid">
    

Definiowanie szablonu danych

Główna lista klientów jest wyświetlana w kontrolce ListBox . Poniższy przykład kodu definiuje DataTemplate obiekt o nazwie ListItemsTemplate , który kontroluje drzewo wizualne kontrolki ListBox . Jest to DataTemplate przypisane do ListBox właściwości kontrolki ItemTemplate .

Aby zdefiniować szablon danych

  • Skopiuj następujący kod XAML do Grid deklaracji elementu.

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

Określanie układu formularza

Układ formularza jest definiowany przez siatkę z trzema wierszami i trzema kolumnami. Label dostępne są kontrolki służące do identyfikowania każdej kolumny w tabeli Customers.

Aby skonfigurować układ siatki

  • Skopiuj następujący kod XAML do Grid deklaracji elementu.

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

Aby skonfigurować kontrolki Etykieta

  • Skopiuj następujący kod XAML do Grid deklaracji elementu.

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

Określanie powiązań danych

Główna lista klientów jest wyświetlana w kontrolce ListBox . Dołączony ListItemsTemplate element wiąże kontrolkę TextBlock z polem ContactName z bazy danych.

Szczegóły każdego rekordu klienta są wyświetlane w kilku TextBox kontrolkach.

Aby określić powiązania danych

  • Skopiuj następujący kod XAML do Grid deklaracji elementu.

    Klasa Binding wiąże kontrolki TextBox z odpowiednimi polami w bazie danych.

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

Wyświetlanie danych przy użyciu współdziałania

Zamówienia odpowiadające wybranemu klientowi są wyświetlane w kontrolce System.Windows.Forms.DataGridView o nazwie dataGridView1. Kontrolka dataGridView1 jest powiązana ze źródłem danych w pliku za pomocą kodu. Kontrolka WindowsFormsHost jest elementem nadrzędnym tej kontrolki Windows Forms.

Aby wyświetlić dane w kontrolce DataGridView

  • Skopiuj następujący kod XAML do Grid deklaracji elementu.

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

Dodawanie źródła danych do projektu

Program Visual Studio umożliwia łatwe dodawanie źródła danych do projektu. Ta procedura powoduje dodanie silnie typizowanego zestawu danych do projektu. Dodano również kilka innych klas obsługi, takich jak karty tabel dla każdej z wybranych tabel.

Aby dodać źródło danych

  1. W menu Dane wybierz pozycję Dodaj nowe źródło danych.

  2. W Kreatorze konfiguracji źródła danych utwórz połączenie z bazą danych Northwind przy użyciu zestawu danych. Aby uzyskać więcej informacji, zobacz How to: Połączenie to Data in a Database (Instrukcje: Połączenie do danych w bazie danych).

  3. Po wyświetleniu monitu przez Kreatora konfiguracji źródła danych zapisz parametry połączenia jako NorthwindConnectionString.

  4. Po wyświetleniu monitu o wybranie obiektów bazy danych wybierz tabele i Orders i nadaj Customers wygenerowanemu zestawowi NorthwindDataSetdanych nazwę .

Wiązanie ze źródłem danych

Składnik System.Windows.Forms.BindingSource udostępnia jednolity interfejs dla źródła danych aplikacji. Powiązanie ze źródłem danych jest implementowane w pliku za pomocą kodu.

Aby powiązać ze źródłem danych

  1. Otwórz plik code-behind o nazwie MainWindow.xaml.vb lub MainWindow.xaml.cs.

  2. Skopiuj następujący kod do MainWindow definicji klasy.

    Ten kod deklaruje BindingSource składnik i skojarzone klasy pomocnicze, które łączą się z bazą danych.

    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. Skopiuj następujący kod do konstruktora.

    Ten kod tworzy i inicjuje BindingSource składnik.

    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. Otwórz plik MainWindow.xaml.

  5. W widoku projektu lub widoku XAML wybierz Window element.

  6. W okno Właściwości kliknij kartę Zdarzenia.

  7. Loaded Kliknij dwukrotnie zdarzenie.

  8. Skopiuj następujący kod do Loaded programu obsługi zdarzeń.

    Ten kod przypisuje BindingSource składnik jako kontekst danych i wypełnia Customers obiekty adaptera i 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
    
  9. Skopiuj następujący kod do MainWindow definicji klasy.

    Ta metoda obsługuje CurrentChanged zdarzenie i aktualizuje bieżący element powiązania danych.

    // 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. Naciśnij klawisz F5, aby skompilować i uruchomić aplikację.

Zobacz też