Bagikan melalui

Panduan: Menghosting Kontrol Komposit WPF di Windows Forms

Windows Presentation Foundation (WPF) menyediakan lingkungan yang kaya untuk membuat aplikasi. Namun, ketika Anda memiliki investasi besar dalam kode Windows Forms, bisa lebih efektif untuk memperluas aplikasi Windows Forms yang ada dengan WPF daripada menulis ulang dari awal. Skenario umum adalah ketika Anda ingin menyematkan satu atau beberapa kontrol yang diterapkan dengan WPF dalam aplikasi Windows Forms Anda. Untuk informasi selengkapnya tentang menyesuaikan kontrol WPF, lihat Kustomisasi Kontrol.

Panduan ini memandu Anda melalui aplikasi yang menghosting kontrol komposit WPF untuk melakukan entri data dalam aplikasi Windows Forms. Kontrol komposit dikemas dalam DLL. Prosedur umum ini dapat diperluas ke aplikasi dan kontrol yang lebih kompleks. Panduan ini dirancang agar hampir identik dalam penampilan dan fungsionalitas dengan Walkthrough: Menghosting Kontrol Komposit Formulir Windows di WPF. Perbedaan utamanya adalah bahwa skenario hostingnya terbalik.

Panduan dibagi menjadi dua bagian. Bagian pertama secara singkat menjelaskan implementasi kontrol komposit WPF. Bagian kedua membahas secara rinci cara menghosting kontrol komposit dalam aplikasi Windows Forms, menerima peristiwa dari kontrol, dan mengakses beberapa properti kontrol.

Tugas yang diilustrasikan dalam panduan ini meliputi:

  • Menerapkan kontrol komposit WPF.

  • Menerapkan aplikasi host Windows Forms.

Untuk daftar kode lengkap tugas yang diilustrasikan dalam panduan ini, lihat Menghosting Kontrol Komposit WPF di Sampel Formulir Windows.

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan panduan ini.

Menerapkan Kontrol Komposit WPF

Kontrol komposit WPF yang digunakan dalam contoh ini adalah formulir entri data sederhana yang mengambil nama dan alamat pengguna. Saat pengguna mengklik salah satu dari dua tombol untuk menunjukkan bahwa tugas selesai, kontrol akan menaikkan peristiwa kustom untuk mengembalikan informasi tersebut ke host. Ilustrasi berikut menunjukkan kontrol yang telah dihasilkan.

Gambar berikut menunjukkan kontrol komposit WPF:

Cuplikan layar yang menunjukkan kontrol WPF sederhana.

Membuat Proyek

Untuk memulai proyek:

  1. Luncurkan Visual Studio, dan buka kotak dialog Proyek Baru.

  2. Di Visual C# dan kategori Windows, pilih templat Pustaka Kontrol Pengguna WPF.

  3. Beri nama proyek baru MyControls.

  4. Untuk lokasi, tentukan folder tingkat atas dengan nama yang nyaman, seperti WindowsFormsHostingWpfControl. Nantinya, Anda akan menempatkan aplikasi host di folder ini.

  5. Klik OK untuk membuat proyek. Proyek default berisi kontrol tunggal bernama UserControl1.

  6. Di Penjelajah Solusi, ganti nama UserControl1 menjadi MyControl1.

Proyek Anda harus memiliki referensi ke DLL sistem berikut. Jika salah satu DLL ini tidak disertakan secara default, tambahkan ke proyek Anda.

  • PresentationCore

  • PresentationFramework

  • Sistem

  • WindowsBase

Membuat Antarmuka Pengguna

Antarmuka pengguna (UI) untuk kontrol komposit diimplementasikan dengan Extensible Application Markup Language (XAML). UI kontrol komposit terdiri dari lima elemen TextBox. Setiap elemen TextBox memiliki elemen TextBlock terkait yang berfungsi sebagai label. Ada dua elemen Button di bagian bawah, OK dan Batalkan. Saat pengguna mengklik salah satu tombol, kontrol akan menaikkan peristiwa kustom untuk mengembalikan informasi ke host.

Tata Letak Dasar

Berbagai elemen UI terkandung dalam elemen Grid. Anda dapat menggunakan Grid untuk mengatur konten kontrol komposit dengan cara yang sama seperti Anda akan menggunakan elemen Table dalam HTML. WPF juga memiliki elemen Table, tetapi Grid lebih ringan dan lebih cocok untuk tugas tata letak sederhana.

XAML berikut menunjukkan tata letak dasar. XAML ini mendefinisikan struktur kontrol secara keseluruhan dengan menentukan jumlah kolom dan baris dalam elemen Grid.

Di MyControl1.xaml, ganti XAML yang ada dengan XAML berikut.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="MyControls.MyControl1"
      Background="#DCDCDC"
      Width="375"
      Height="250"
      Name="rootElement"
      Loaded="Init">

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

</Grid>

Menambahkan Elemen TextBlock dan TextBox ke Kisi

Anda menempatkan elemen UI di kisi dengan mengatur atribut RowProperty dan ColumnProperty elemen ke baris dan nomor kolom yang sesuai. Ingat bahwa penomoran baris dan kolom berbasis nol. Anda dapat memiliki elemen yang mencakup beberapa kolom dengan mengatur atribut ColumnSpanProperty. Untuk informasi selengkapnya tentang elemen Grid, lihat Membuat Elemen Kisi.

XAML berikut menunjukkan elemen TextBox dan TextBlock dari kontrol gabungan dengan atribut RowProperty dan ColumnProperty, yang diatur untuk secara tepat menempatkan elemen-elemen pada kisi.

Di MyControl1.xaml, tambahkan XAML berikut dalam elemen Grid.

  <TextBlock Grid.Column="0"
        Grid.Row="0" 
        Grid.ColumnSpan="4"
        Margin="10,5,10,0"
        HorizontalAlignment="Center"
        Style="{StaticResource titleText}">Simple WPF Control</TextBlock>

  <TextBlock Grid.Column="0"
        Grid.Row="1"
        Style="{StaticResource inlineText}"
        Name="nameLabel">Name</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="1"
        Grid.ColumnSpan="3"
        Name="txtName"/>

  <TextBlock Grid.Column="0"
        Grid.Row="2"
        Style="{StaticResource inlineText}"
        Name="addressLabel">Street Address</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="2"
        Grid.ColumnSpan="3"
        Name="txtAddress"/>

  <TextBlock Grid.Column="0"
        Grid.Row="3"
        Style="{StaticResource inlineText}"
        Name="cityLabel">City</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="3"
        Width="100"
        Name="txtCity"/>

  <TextBlock Grid.Column="2"
        Grid.Row="3"
        Style="{StaticResource inlineText}"
        Name="stateLabel">State</TextBlock>
  <TextBox Grid.Column="3"
        Grid.Row="3"
        Width="50"
        Name="txtState"/>

  <TextBlock Grid.Column="0"
        Grid.Row="4"
        Style="{StaticResource inlineText}"
        Name="zipLabel">Zip</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="4"
        Width="100"
        Name="txtZip"/>

Pengayaan Elemen-Elemen UI

Banyak elemen pada formulir entri data memiliki penampilan yang sama, yang berarti bahwa mereka memiliki pengaturan yang identik untuk beberapa properti mereka. Daripada mengatur atribut setiap elemen secara terpisah, XAML sebelumnya menggunakan elemen Style untuk menentukan pengaturan properti standar untuk kelas elemen. Pendekatan ini mengurangi kompleksitas kontrol dan memungkinkan Anda mengubah tampilan beberapa elemen melalui atribut gaya tunggal.

Elemen Style terkandung dalam properti Grid elemen Resources, sehingga dapat digunakan oleh semua elemen dalam kontrol. Jika suatu gaya memiliki nama, Anda menerapkannya pada elemen dengan menambahkan elemen berupa Style yang disesuaikan dengan nama gaya tersebut. Gaya yang tidak dinamai menjadi gaya default untuk elemen . Untuk informasi selengkapnya tentang gaya WPF, lihat gaya dan Templating.

XAML berikut menunjukkan elemen Style untuk kontrol komposit. Untuk melihat bagaimana gaya diterapkan ke elemen, lihat XAML sebelumnya. Misalnya, elemen TextBlock terakhir memiliki gaya inlineText, dan elemen TextBox terakhir menggunakan gaya default.

Di MyControl1.xaml, tambahkan XAML berikut tepat setelah elemen mulai Grid.

<Grid.Resources>
  <Style x:Key="inlineText" TargetType="{x:Type TextBlock}">
    <Setter Property="Margin" Value="10,5,10,0"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="12"/>
  </Style>
  <Style x:Key="titleText" TargetType="{x:Type TextBlock}">
    <Setter Property="DockPanel.Dock" Value="Top"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Margin" Value="10,5,10,0"/>
  </Style>
  <Style TargetType="{x:Type Button}">
    <Setter Property="Margin" Value="10,5,10,0"/>
    <Setter Property="Width" Value="60"/>
  </Style>
  <Style TargetType="{x:Type TextBox}">
    <Setter Property="Margin" Value="10,5,10,0"/>
  </Style>
</Grid.Resources>

Menambahkan Tombol OK dan Batal

Elemen akhir pada kontrol komposit adalah elemen OK dan BatalkanButton, yang menempati dua kolom pertama dari baris terakhir Grid. Elemen-elemen ini menggunakan penanganan aktivitas umum, ButtonClicked, dan gaya Button default yang ditentukan dalam XAML sebelumnya.

Di MyControl1.xaml, tambahkan XAML berikut setelah elemen TextBox terakhir. Bagian XAML dari kontrol komposit sekarang selesai.

<Button Grid.Row="5"
        Grid.Column="0"
        Name="btnOK"
        Click="ButtonClicked">OK</Button>
<Button Grid.Row="5"
        Grid.Column="1"
        Name="btnCancel"
        Click="ButtonClicked">Cancel</Button>

Menerapkan File Code-Behind

File code-behind, MyControl1.xaml.cs, melaksanakan tiga tugas utama yang penting:

  1. Menangani peristiwa yang terjadi saat pengguna mengklik salah satu tombol.

  2. Mengambil data dari elemen TextBox, dan mengemasnya dalam objek argumen peristiwa kustom.

  3. Memicu peristiwa khusus OnButtonClick, yang memberi tahu host bahwa pengguna telah selesai dan meneruskan data kembali ke host.

Kontrol ini juga mengekspos sejumlah properti warna dan font yang memungkinkan Anda mengubah tampilan. Tidak seperti kelas WindowsFormsHost, yang digunakan untuk menghosting kontrol Windows Forms, kelas ElementHost hanya mengekspos properti Background kontrol. Untuk mempertahankan kesamaan antara contoh kode ini dan contoh yang dibahas dalam Walkthrough: Menghosting Kontrol Komposit Formulir Windows di WPF, kontrol mengekspos properti yang tersisa secara langsung.

Struktur Dasar File Code-Behind

File code-behind terdiri dari namespace tunggal, MyControls, yang akan berisi dua kelas, MyControl1 dan MyControlEventArgs.

namespace MyControls
{
  public partial class MyControl1 : Grid
  {
    //...
  }
  public class MyControlEventArgs : EventArgs
  {
    //...
  }
}

Kelas pertama, MyControl1, adalah kelas parsial yang berisi kode yang mengimplementasikan fungsionalitas UI yang ditentukan dalam MyControl1.xaml. Ketika MyControl1.xaml diurai, XAML dikonversi ke kelas parsial yang sama, dan dua kelas parsial digabungkan untuk membentuk kontrol yang dikompilasi. Oleh karena itu, nama kelas dalam file code-behind harus cocok dengan nama kelas yang ditetapkan ke MyControl1.xaml, dan harus mewarisi dari elemen akar dari kontrol tersebut. Kelas kedua, MyControlEventArgs, adalah kelas argumen peristiwa yang digunakan untuk mengirim data kembali ke host.

Buka MyControl1.xaml.cs. Ubah deklarasi kelas yang ada sehingga memiliki nama berikut dan mewarisi dari Grid.

public partial class MyControl1 : Grid

Menginisialisasi Pengendalian

Kode berikut mengimplementasikan beberapa tugas dasar:

  • Mendeklarasikan sebuah event privat, OnButtonClick, dan delegasi terkait, MyControlEventHandler.

  • Membuat beberapa variabel global privat yang menyimpan data pengguna. Data ini diekspos melalui properti yang sesuai.

  • Menerapkan handler, Init, untuk peristiwa Loaded kontrol. Handler ini menginisialisasi variabel global dengan menetapkan nilai yang ditentukan dalam MyControl1.xaml. Untuk melakukan ini, ia menggunakan Name yang ditetapkan ke elemen TextBlock umum, nameLabel, untuk mengakses pengaturan properti elemen tersebut.

Hapus konstruktor yang ada dan tambahkan kode berikut ke kelas MyControl1 Anda.

public delegate void MyControlEventHandler(object sender, MyControlEventArgs args);
public event MyControlEventHandler OnButtonClick;
private FontWeight _fontWeight;
private double _fontSize;
private FontFamily _fontFamily;
private FontStyle _fontStyle;
private SolidColorBrush _foreground;
private SolidColorBrush _background;

private void Init(object sender, EventArgs e)
{
    //They all have the same style, so use nameLabel to set initial values.
    _fontWeight = nameLabel.FontWeight;
    _fontSize = nameLabel.FontSize;
    _fontFamily = nameLabel.FontFamily;
    _fontStyle = nameLabel.FontStyle;
    _foreground = (SolidColorBrush)nameLabel.Foreground;
    _background = (SolidColorBrush)rootElement.Background;
}

Menangani Peristiwa Klik Tombol

Pengguna menunjukkan bahwa tugas entri data selesai dengan mengklik tombol OK atau tombol Batalkan. Kedua tombol menggunakan penanganan aktivitas Click yang sama, ButtonClicked. Kedua tombol memiliki nama, btnOK atau btnCancel, yang memungkinkan handler menentukan tombol mana yang diklik dengan memeriksa nilai argumen sender. Handler melakukan hal berikut:

  • Membuat objek MyControlEventArgs yang berisi data dari elemen TextBox.

  • Jika pengguna mengklik tombol Batalkan, atur properti MyControlEventArgs dari objek IsOK ke false.

  • Mengaktifkan peristiwa OnButtonClick untuk memberitahu host bahwa pengguna telah selesai, dan mengirimkan kembali data yang dikumpulkan.

Tambahkan kode berikut ke kelas MyControl1 Anda, setelah metode Init.

private void ButtonClicked(object sender, RoutedEventArgs e)
{
    MyControlEventArgs retvals = new MyControlEventArgs(true,
                                                        txtName.Text,
                                                        txtAddress.Text,
                                                        txtCity.Text,
                                                        txtState.Text,
                                                        txtZip.Text);
    if (sender == btnCancel)
    {
        retvals.IsOK = false;
    }
    if (OnButtonClick != null)
        OnButtonClick(this, retvals);
}

Membuat Properti

Sisa kelas hanya mengekspos properti yang sesuai dengan variabel global yang dibahas sebelumnya. Ketika properti berubah, aksesor set memodifikasi tampilan kontrol dengan mengubah properti elemen yang sesuai dan memperbarui variabel global yang mendasar.

Tambahkan kode berikut ke kelas MyControl1 Anda.

public FontWeight MyControl_FontWeight
{
    get { return _fontWeight; }
    set
    {
        _fontWeight = value;
        nameLabel.FontWeight = value;
        addressLabel.FontWeight = value;
        cityLabel.FontWeight = value;
        stateLabel.FontWeight = value;
        zipLabel.FontWeight = value;
    }
}
public double MyControl_FontSize
{
    get { return _fontSize; }
    set
    {
        _fontSize = value;
        nameLabel.FontSize = value;
        addressLabel.FontSize = value;
        cityLabel.FontSize = value;
        stateLabel.FontSize = value;
        zipLabel.FontSize = value;
    }
}
public FontStyle MyControl_FontStyle
{
    get { return _fontStyle; }
    set
    {
        _fontStyle = value;
        nameLabel.FontStyle = value;
        addressLabel.FontStyle = value;
        cityLabel.FontStyle = value;
        stateLabel.FontStyle = value;
        zipLabel.FontStyle = value;
    }
}
public FontFamily MyControl_FontFamily
{
    get { return _fontFamily; }
    set
    {
        _fontFamily = value;
        nameLabel.FontFamily = value;
        addressLabel.FontFamily = value;
        cityLabel.FontFamily = value;
        stateLabel.FontFamily = value;
        zipLabel.FontFamily = value;
    }
}

public SolidColorBrush MyControl_Background
{
    get { return _background; }
    set
    {
        _background = value;
        rootElement.Background = value;
    }
}
public SolidColorBrush MyControl_Foreground
{
    get { return _foreground; }
    set
    {
        _foreground = value;
        nameLabel.Foreground = value;
        addressLabel.Foreground = value;
        cityLabel.Foreground = value;
        stateLabel.Foreground = value;
        zipLabel.Foreground = value;
    }
}

Mengirim Data Kembali ke Host

Komponen akhir dalam file adalah kelas MyControlEventArgs, yang digunakan untuk mengirim data yang dikumpulkan kembali ke host.

Tambahkan kode berikut ke namespace MyControls Anda. Implementasinya mudah, dan tidak dibahas lebih lanjut.

public class MyControlEventArgs : EventArgs
{
    private string _Name;
    private string _StreetAddress;
    private string _City;
    private string _State;
    private string _Zip;
    private bool _IsOK;

    public MyControlEventArgs(bool result,
                              string name,
                              string address,
                              string city,
                              string state,
                              string zip)
    {
        _IsOK = result;
        _Name = name;
        _StreetAddress = address;
        _City = city;
        _State = state;
        _Zip = zip;
    }

    public string MyName
    {
        get { return _Name; }
        set { _Name = value; }
    }
    public string MyStreetAddress
    {
        get { return _StreetAddress; }
        set { _StreetAddress = value; }
    }
    public string MyCity
    {
        get { return _City; }
        set { _City = value; }
    }
    public string MyState
    {
        get { return _State; }
        set { _State = value; }
    }
    public string MyZip
    {
        get { return _Zip; }
        set { _Zip = value; }
    }
    public bool IsOK
    {
        get { return _IsOK; }
        set { _IsOK = value; }
    }
}

Bangun solusinya. Build akan menghasilkan DLL bernama MyControls.dll.

Menerapkan Aplikasi Host Formulir Windows

Aplikasi host Windows Forms menggunakan objek ElementHost untuk menghosting kontrol komposit WPF. Aplikasi menangani peristiwa OnButtonClick untuk menerima data dari kontrol komposit. Aplikasi ini juga memiliki serangkaian tombol opsi yang dapat Anda gunakan untuk memodifikasi tampilan kontrol. Ilustrasi berikut menunjukkan aplikasi.

Gambar berikut menunjukkan kontrol komposit WPF yang dihosting dalam aplikasi Windows Forms

Cuplikan layar yang memperlihatkan kontrol Windows Form Hosting Avalon.

Membuat Proyek

Untuk memulai proyek:

  1. Luncurkan Visual Studio, dan buka kotak dialog Proyek Baru.

  2. Di Visual C# dan kategori Windows, pilih templat Aplikasi Windows Forms.

  3. Beri nama proyek baru WFHost.

  4. Untuk lokasi, tentukan folder tingkat atas yang sama yang berisi proyek MyControls.

  5. Klik OK untuk membuat proyek.

Anda juga perlu menambahkan referensi ke DLL yang berisi MyControl1 dan komponen lainnya.

  1. Klik kanan nama proyek di Penjelajah Solusi, dan pilih Tambahkan Referensi.

  2. Klik tab Telusuri, dan telusuri ke folder yang berisi MyControls.dll. Untuk panduan ini, folder ini adalah MyControls\bin\Debug.

  3. Pilih MyControls.dll, lalu klik OK.

  4. Tambahkan referensi ke kumpulan rakitan berikut.

    • PresentationCore

    • PresentationFramework

    • System.Xaml

    • WindowsBase

    • WindowsFormsIntegration

Menerapkan Antarmuka Pengguna untuk Aplikasi

UI untuk aplikasi Formulir Windows berisi beberapa kontrol untuk berinteraksi dengan kontrol komposit WPF.

  1. Buka Formulir1 di Windows Form Designer.

  2. Perbesar formulir untuk mengakomodasi kontrol.

  3. Di sudut kanan atas formulir, tambahkan kontrol System.Windows.Forms.Panel untuk menahan kontrol komposit WPF.

  4. Tambahkan kontrol System.Windows.Forms.GroupBox berikut ke formulir.

    Nama Teks
    groupBox1 Warna Latar Belakang
    groupBox2 Warna Latar Depan
    groupBox3 Ukuran Huruf
    groupBox4 Keluarga Font
    groupBox5 Gaya Font
    groupBox6 Ketebalan Font
    groupBox7 Data dari kontrol

  5. Tambahkan kontrol System.Windows.Forms.RadioButton berikut ke kontrol System.Windows.Forms.GroupBox.

    Kotak Kelompok Nama Teks
    groupBox1 radioBackgroundOriginal Versi Asli
    groupBox1 radioLatarBelakangHijauTerang Hijau Muda
    groupBox1 radioLatarBelakangSalmonMuda LightSalmon
    groupBox2 radioLatarDepanAsli Versi Asli
    groupBox2 radioForegroundRed Merah
    groupBox2 radioForegroundYellow Kuning
    groupBox3 ukuranRadioAsli Versi Asli
    groupBox3 radioSizeTen 10
    groupBox3 radioSizeTwelve 12
    groupBox4 radioKeluargaOriginal Versi Asli
    groupBox4 radioFamilyTimes Times Romawi Baru
    groupBox4 radioFamilyWingDings WingDings
    groupBox5 radioStyleOriginal Biasa
    groupBox5 radioStyleItalic Cetak miring
    groupBox6 radioWeightOriginal Versi Asli
    groupBox6 radioWeightBold Tebal

  6. Tambahkan kontrol System.Windows.Forms.Label berikut ke System.Windows.Forms.GroupBoxterakhir . Kontrol ini menampilkan data yang dikembalikan oleh kontrol komposit WPF.

    Kotak Kelompok Nama Teks
    groupBox7 lblNama Nama:
    groupBox7 lblAlamat Alamat Jalan:
    groupBox7 lblCity Kota:
    groupBox7 lblState Negara:
    groupBox7 lblZip Zip:

Menginisialisasi Formulir

Anda umumnya menerapkan kode hosting dalam penanganan aktivitas Load formulir. Kode berikut menunjukkan penangan kejadian Load, handler untuk kejadian Loaded pada kontrol komposit WPF, dan deklarasi untuk beberapa variabel global yang akan digunakan kemudian.

Di Windows Forms Designer, klik dua kali formulir untuk membuat penanganan aktivitas Load. Di bagian atas Form1.cs, tambahkan pernyataan using berikut.

using System.Windows;
using System.Windows.Forms.Integration;
using System.Windows.Media;

Ganti konten kelas Form1 yang ada dengan kode berikut.

private ElementHost ctrlHost;
private MyControls.MyControl1 wpfAddressCtrl;
System.Windows.FontWeight initFontWeight;
double initFontSize;
System.Windows.FontStyle initFontStyle;
System.Windows.Media.SolidColorBrush initBackBrush;
System.Windows.Media.SolidColorBrush initForeBrush;
System.Windows.Media.FontFamily initFontFamily;

public Form1()
{
    InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)
{
    ctrlHost = new ElementHost();
    ctrlHost.Dock = DockStyle.Fill;
    panel1.Controls.Add(ctrlHost);
    wpfAddressCtrl = new MyControls.MyControl1();
    wpfAddressCtrl.InitializeComponent();
    ctrlHost.Child = wpfAddressCtrl;

    wpfAddressCtrl.OnButtonClick +=
        new MyControls.MyControl1.MyControlEventHandler(
        avAddressCtrl_OnButtonClick);
    wpfAddressCtrl.Loaded += new RoutedEventHandler(
        avAddressCtrl_Loaded);
}

void avAddressCtrl_Loaded(object sender, EventArgs e)
{
    initBackBrush = (SolidColorBrush)wpfAddressCtrl.MyControl_Background;
    initForeBrush = wpfAddressCtrl.MyControl_Foreground;
    initFontFamily = wpfAddressCtrl.MyControl_FontFamily;
    initFontSize = wpfAddressCtrl.MyControl_FontSize;
    initFontWeight = wpfAddressCtrl.MyControl_FontWeight;
    initFontStyle = wpfAddressCtrl.MyControl_FontStyle;
}

Metode Form1_Load dalam kode sebelumnya menunjukkan prosedur umum untuk menghosting kontrol WPF:

  1. Buat objek ElementHost baru.

  2. Atur properti Dock kontrol ke DockStyle.Fill.

  3. Tambahkan kontrol ElementHost ke koleksi Panel kontrol Controls.

  4. Buat instansi kontrol WPF.

  5. Tempatkan kontrol komposit pada formulir dengan menetapkan kontrol ke properti ElementHost dari kontrol Child.

Dua baris yang tersisa dalam metode Form1_Load melampirkan handler ke dua event kontrol:

  • OnButtonClick adalah peristiwa kustom yang diaktifkan oleh kontrol komposit saat pengguna mengklik tombol OK atau Batalkan. Anda menangani peristiwa untuk mendapatkan respons pengguna dan untuk mengumpulkan data apa pun yang ditentukan pengguna.

  • Loaded adalah peristiwa standar yang dipicu oleh kontrol WPF ketika sudah sepenuhnya dimuat. Peristiwa ini digunakan di sini karena contoh perlu menginisialisasi beberapa variabel global menggunakan properti dari kontrol. Pada peristiwa Load formulir, kontrol belum sepenuhnya dimuat dan nilai-nilai tersebut masih diatur ke null. Anda perlu menunggu sampai peristiwa Loaded pada kontrol terjadi sebelum Anda dapat mengakses properti tersebut.

Pengendali acara Loaded ditunjukkan dalam kode sebelumnya. Handler OnButtonClick dibahas di bagian berikutnya.

Penanganan OnButtonClick

Peristiwa terjadi ketika pengguna mengklik tombol OK atau Batalkan.

Penangan peristiwa memeriksa bidang IsOK dari argumen acara untuk menentukan tombol mana yang diklik. Variabel data sesuai dengan kontrol yang dibahas sebelumnya. Jika pengguna mengklik tombol OK, data dari kontrol TextBox ditetapkan ke kontrol Label yang sesuai. Jika pengguna mengklik Batalkan, nilai Text diatur ke string default.

Tambahkan kode penanganan acara klik tombol berikut ke kelas Form1.

void avAddressCtrl_OnButtonClick(
    object sender,
    MyControls.MyControl1.MyControlEventArgs args)
{
    if (args.IsOK)
    {
        lblAddress.Text = "Street Address: " + args.MyStreetAddress;
        lblCity.Text = "City: " + args.MyCity;
        lblName.Text = "Name: " + args.MyName;
        lblState.Text = "State: " + args.MyState;
        lblZip.Text = "Zip: " + args.MyZip;
    }
    else
    {
        lblAddress.Text = "Street Address: ";
        lblCity.Text = "City: ";
        lblName.Text = "Name: ";
        lblState.Text = "State: ";
        lblZip.Text = "Zip: ";
    }
}

Bangun dan jalankan aplikasi. Tambahkan beberapa teks dalam kontrol komposit WPF lalu klik OK. Teks muncul di label. Pada titik ini, kode belum ditambahkan untuk menangani tombol radio.

Memodifikasi Tampilan Kontrol

Kontrol RadioButton pada formulir akan memungkinkan pengguna untuk mengubah warna latar depan dan latar belakang kontrol komposit WPF serta beberapa properti font. Warna latar belakang diekspos oleh objek ElementHost. Properti yang tersisa ditampilkan sebagai properti kustom dari elemen kontrol.

Klik dua kali setiap kontrol RadioButton pada formulir untuk membuat penanganan aktivitas CheckedChanged. Ganti penanganan aktivitas CheckedChanged dengan kode berikut.

private void radioBackgroundOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Background = initBackBrush;
}

private void radioBackgroundLightGreen_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Background = new SolidColorBrush(Colors.LightGreen);
}

private void radioBackgroundLightSalmon_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Background = new SolidColorBrush(Colors.LightSalmon);
}

private void radioForegroundOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Foreground = initForeBrush;
}

private void radioForegroundRed_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Foreground = new System.Windows.Media.SolidColorBrush(Colors.Red);
}

private void radioForegroundYellow_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Foreground = new System.Windows.Media.SolidColorBrush(Colors.Yellow);
}

private void radioFamilyOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontFamily = initFontFamily;
}

private void radioFamilyTimes_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontFamily = new System.Windows.Media.FontFamily("Times New Roman");
}

private void radioFamilyWingDings_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontFamily = new System.Windows.Media.FontFamily("WingDings");
}

private void radioSizeOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontSize = initFontSize;
}

private void radioSizeTen_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontSize = 10;
}

private void radioSizeTwelve_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontSize = 12;
}

private void radioStyleOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontStyle = initFontStyle;
}

private void radioStyleItalic_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontStyle = System.Windows.FontStyles.Italic;
}

private void radioWeightOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontWeight = initFontWeight;
}

private void radioWeightBold_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontWeight = FontWeights.Bold;
}

Bangun dan jalankan aplikasi. Klik tombol radio yang berbeda untuk melihat efek pada kontrol komposit WPF.

Lihat juga

  • Last updated on