Bagikan melalui

Panduan: Mengikat Data di Aplikasi Hibrid

Mengikat sumber data ke kontrol sangat penting untuk memberi pengguna akses ke data yang mendasar, baik Anda menggunakan Formulir Windows atau WPF. Panduan ini menunjukkan bagaimana Anda dapat menggunakan pengikatan data dalam aplikasi hibrid yang mencakup kontrol Formulir Windows dan WPF.

Tugas yang diilustrasikan dalam panduan ini meliputi:

  • Membuat proyek.

  • Menentukan templat data.

  • Menentukan tata letak formulir.

  • Menentukan pengikatan data.

  • Menampilkan data dengan menggunakan interoperabilitas.

  • Menambahkan sumber data ke proyek.

  • Mengikat ke sumber data.

Untuk daftar kode lengkap tugas yang diilustrasikan dalam panduan ini, lihat Pengikatan Data dalam Sampel Aplikasi Hibrid.

Setelah selesai, Anda akan memiliki pemahaman tentang fitur pengikatan data dalam aplikasi hibrid.

Prasyarat

Anda memerlukan komponen berikut untuk menyelesaikan panduan ini:

  • Visual Studio.

  • Akses ke database sampel Northwind yang berjalan di Microsoft SQL Server.

Membuat Proyek

Untuk membuat dan menyiapkan proyek

  1. Buat proyek Aplikasi WPF bernama WPFWithWFAndDatabinding.

  2. Di Penjelajah Solusi, tambahkan referensi ke rakitan berikut.

    • WindowsFormsIntegration

    • System.Windows.Forms

  3. Buka MainWindow.xaml di WPF Designer.

  4. Window Dalam elemen , tambahkan pemetaan namespace Formulir Windows berikut.

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

  5. Beri nama elemen Grid default mainGrid dengan menetapkan Name properti .

    <Grid x:Name="mainGrid">

Menentukan Templat Data

Daftar master pelanggan ditampilkan dalam ListBox kontrol. Contoh kode berikut mendefinisikan DataTemplate objek bernama ListItemsTemplate yang mengontrol pohon ListBox visual kontrol. Ini DataTemplate ditetapkan ke ListBox properti kontrol ItemTemplate .

Untuk menentukan templat data

  • Salin XAML berikut ke Grid dalam deklarasi elemen.

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

Menentukan Tata Letak Formulir

Tata letak formulir ditentukan oleh kisi dengan tiga baris dan tiga kolom. Label kontrol disediakan untuk mengidentifikasi setiap kolom dalam tabel Pelanggan.

Untuk menyiapkan tata letak Kisi

  • Salin XAML berikut ke Grid dalam deklarasi elemen.

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

Untuk menyiapkan kontrol Label

  • Salin XAML berikut ke Grid dalam deklarasi elemen.

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

Menentukan Pengikatan Data

Daftar master pelanggan ditampilkan dalam ListBox kontrol. Terlampir mengikat ListItemsTemplateTextBlock kontrol ke ContactName bidang dari database.

Detail setiap catatan pelanggan ditampilkan dalam beberapa TextBox kontrol.

Untuk menentukan pengikatan data

  • Salin XAML berikut ke Grid dalam deklarasi elemen.

    Kelas Binding mengikat TextBox kontrol ke bidang yang sesuai dalam 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>

Menampilkan Data dengan Menggunakan Interoperabilitas

Pesanan yang sesuai dengan pelanggan yang dipilih ditampilkan dalam System.Windows.Forms.DataGridView kontrol bernama dataGridView1. Kontrol dataGridView1 terikat ke sumber data dalam file code-behind. WindowsFormsHost Kontrol adalah induk kontrol Formulir Windows ini.

Untuk menampilkan data dalam kontrol DataGridView

  • Salin XAML berikut ke Grid dalam deklarasi elemen.

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

Menambahkan Sumber Data ke Proyek

Dengan Visual Studio, Anda dapat dengan mudah menambahkan sumber data ke proyek Anda. Prosedur ini menambahkan himpunan data yang sangat ditik ke proyek Anda. Beberapa kelas dukungan lainnya, seperti adaptor tabel untuk setiap tabel yang dipilih, juga ditambahkan.

Untuk menambahkan sumber data

  1. Dari menu Data , pilih Tambahkan Sumber Data Baru.

  2. Di Panduan Konfigurasi Sumber Data, buat koneksi ke database Northwind dengan menggunakan himpunan data. Untuk informasi selengkapnya, lihat Cara: Menyambungkan ke Data dalam Database.

  3. Saat Anda diminta oleh Panduan Konfigurasi Sumber Data, simpan string koneksi sebagai NorthwindConnectionString.

    Penting

    Menyimpan informasi sensitif, seperti kata sandi, dalam string koneksi dapat memengaruhi keamanan aplikasi Anda. Menggunakan Autentikasi Windows, juga dikenal sebagai keamanan terintegrasi, adalah cara yang lebih aman untuk mengontrol akses ke database. Untuk informasi selengkapnya, lihat Melindungi Informasi Koneksi.

  4. Saat Anda diminta untuk memilih objek database Anda, pilih Customers tabel dan Orders , dan beri nama himpunan NorthwindDataSetdata yang dihasilkan .

Pengikatan ke Sumber Data

Komponen ini System.Windows.Forms.BindingSource menyediakan antarmuka yang seragam untuk sumber data aplikasi. Pengikatan ke sumber data diimplementasikan dalam file code-behind.

Untuk mengikat ke sumber data

  1. Buka file code-behind, yang diberi nama MainWindow.xaml.vb atau MainWindow.xaml.cs.

  2. Salin kode berikut ke MainWindow dalam definisi kelas.

    Kode ini mendeklarasikan BindingSource komponen dan kelas pembantu terkait yang tersambung ke 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()

  3. Salin kode berikut ke konstruktor.

    Kode ini membuat dan menginisialisasi BindingSource komponen.

    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. Buka MainWindow.xaml.

  5. Dalam tampilan Desain atau tampilan XAML, pilih elemen Window.

  6. Di jendela Properti, klik tab Peristiwa.

  7. Klik dua kali acara Loaded.

  8. Salin kode berikut ke dalam Loaded penanganan aktivitas.

    Kode ini menetapkan BindingSource komponen sebagai konteks data dan mengisi Customers objek adaptor dan 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. Salin kode berikut ke MainWindow dalam definisi kelas.

    Metode ini menangani CurrentChanged peristiwa dan memperbarui item pengikatan data saat ini.

    // 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. Tekan F5 untuk membangun dan menjalankan aplikasi.

Lihat juga

  • Last updated on