Bagikan melalui


Panduan: Menghosting Kontrol Komposit WPF di Formulir Windows

Windows Presentation Foundation (WPF) menyediakan lingkungan yang kaya untuk membuat aplikasi. Namun, ketika Anda memiliki investasi besar dalam kode Formulir Windows, bisa lebih efektif untuk memperluas aplikasi Formulir Windows 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 Formulir Windows 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 Formulir Windows. 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 skenario hosting dibalik.

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 Formulir Windows, menerima peristiwa dari kontrol, dan mengakses beberapa properti kontrol.

Tugas yang diilustrasikan dalam panduan ini meliputi:

  • Menerapkan kontrol komposit WPF.

  • Menerapkan aplikasi host Formulir Windows.

Untuk daftar kode lengkap tugas yang diilustrasikan dalam panduan ini, lihat Menghosting Kontrol Komposit WPF dalam 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 dirender.

Gambar berikut menunjukkan kontrol komposit WPF:

Screenshot that shows a simple WPF control.

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

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

  5. Pilih OK untuk membuat proyek. Proyek default berisi satu kontrol 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 TextBox elemen. Setiap TextBox elemen memiliki elemen terkait TextBlock yang berfungsi sebagai label. Ada dua Button elemen di bagian bawah, OK dan Batal. Saat pengguna mengklik salah satu tombol, kontrol akan menaikkan peristiwa kustom untuk mengembalikan informasi ke host.

Tata Letak Dasar

Berbagai elemen UI terkandung dalam Grid elemen . Anda dapat menggunakan Grid untuk mengatur konten kontrol komposit dengan cara yang sama seperti Anda akan menggunakan Table elemen dalam HTML. WPF juga memiliki Table elemen, 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 Grid elemen .

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 elemen RowProperty dan ColumnProperty atribut 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 atributnya ColumnSpanProperty . Untuk informasi selengkapnya tentang Grid elemen, lihat Membuat Elemen Kisi.

XAML berikut menunjukkan elemen dan TextBlock kontrol TextBox komposit dengan atribut dan ColumnProperty merekaRowProperty, yang diatur untuk menempatkan elemen dengan benar di kisi.

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

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

Menata 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 Style elemen 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 Grid properti elemen Resources , sehingga dapat digunakan oleh semua elemen dalam kontrol. Jika gaya diberi nama, Anda menerapkannya ke elemen dengan menambahkan elemen yang Style diatur ke nama gaya. Gaya yang tidak dinamai menjadi gaya default untuk elemen . Untuk informasi selengkapnya tentang gaya WPF, lihat Gaya dan Templat.

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

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

<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 CancelButton , yang menempati dua kolom pertama dari baris terakhir dari Grid. Elemen-elemen ini menggunakan penanganan aktivitas umum, ButtonClicked, dan gaya default Button yang ditentukan dalam XAML sebelumnya.

Di MyControl1.xaml, tambahkan XAML berikut setelah elemen terakhir TextBox . 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, mengimplementasikan tiga tugas penting:

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

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

  3. Menaikkan peristiwa kustom OnButtonClick , yang memberi tahu host bahwa pengguna selesai dan meneruskan data kembali ke host.

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

Struktur Dasar File Code-Behind

File code-behind terdiri dari satu namespace, 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. Untuk alasan ini, nama kelas dalam file code-behind harus cocok dengan nama kelas yang ditetapkan ke MyControl1.xaml, dan harus mewarisi dari elemen akar kontrol. 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 Kontrol

Kode berikut mengimplementasikan beberapa tugas dasar:

  • Mendeklarasikan peristiwa privat, OnButtonClick, dan delegasi terkait, MyControlEventHandler.

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

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

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

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 yang sama Click , ButtonClicked. Kedua tombol memiliki nama, btnOK atau btnCancel, yang memungkinkan handler untuk menentukan tombol mana yang diklik dengan memeriksa nilai sender argumen. Handler melakukan hal berikut:

  • MyControlEventArgs Membuat objek yang berisi data dari TextBox elemen.

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

  • OnButtonClick Menaikkan peristiwa untuk menunjukkan kepada host bahwa pengguna selesai, dan meneruskan kembali data yang dikumpulkan.

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

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 Anda MyControl1 .

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 MyControlEventArgs kelas , yang digunakan untuk mengirim data yang dikumpulkan kembali ke host.

Tambahkan kode berikut ke namespace Anda MyControls . 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 Formulir Windows menggunakan ElementHost objek untuk menghosting kontrol komposit WPF. Aplikasi menangani OnButtonClick peristiwa 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 Formulir Windows

Screenshot that shows a Windows Form Hosting Avalon control.

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 Formulir Windows.

  3. Beri nama proyek WFHostbaru .

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

  5. Pilih OK untuk membuat proyek.

Anda juga perlu menambahkan referensi ke DLL yang berisi MyControl1 dan rakitan 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 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 System.Windows.Forms.Panel kontrol untuk menahan kontrol komposit WPF.

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

    Nama Teks
    groupBox1 Warna Latar Belakang
    groupBox2 Warna Latar Depan
    groupBox3 Ukuran Font
    groupBox4 Keluarga Font
    groupBox5 Gaya Font
    groupBox6 Bobot Font
    groupBox7 Data dari kontrol
  5. Tambahkan kontrol berikut System.Windows.Forms.RadioButton ke System.Windows.Forms.GroupBox kontrol.

    GroupBox Nama Teks
    groupBox1 radioBackgroundOriginal Original
    groupBox1 radioBackgroundLightGreen LightGreen
    groupBox1 radioBackgroundLightSalmon LightSalmon
    groupBox2 radioForegroundOriginal Original
    groupBox2 radioForegroundRed Merah
    groupBox2 radioForegroundYellow Kuning
    groupBox3 radioSizeOriginal Original
    groupBox3 radioSizeTen 10
    groupBox3 radioSizeTwelve 12
    groupBox4 radioFamilyOriginal Original
    groupBox4 radioFamilyTimes Times New Roman
    groupBox4 radioFamilyWingDings WingDings
    groupBox5 radioStyleOriginal Normal
    groupBox5 radioStyleItalic Italic
    groupBox6 radioWeightOriginal Original
    groupBox6 radioWeightBold Bold
  6. Tambahkan kontrol berikut System.Windows.Forms.Label ke yang terakhir System.Windows.Forms.GroupBox. Kontrol ini menampilkan data yang dikembalikan oleh kontrol komposit WPF.

    GroupBox Nama Teks
    groupBox7 lblName Nama:
    groupBox7 lblAddress Alamat Jalan:
    groupBox7 lblCity Kota:
    groupBox7 lblState Kondisi:
    groupBox7 lblZip Zip:

Menginisialisasi Formulir

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

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

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

Ganti konten kelas yang ada Form1 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. Membuat objek ElementHost baru.

  2. Atur properti kontrol Dock ke DockStyle.Fill.

  3. ElementHost Tambahkan kontrol ke Panel koleksi kontrolControls.

  4. Buat instans kontrol WPF.

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

Dua baris tersisa dalam Form1_Load penangan lampiran metode ke dua peristiwa kontrol:

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

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

Penanganan Loaded aktivitas ditampilkan dalam kode sebelumnya. Handler OnButtonClick dibahas di bagian berikutnya.

Menangani OnButtonClick

Peristiwa OnButtonClick terjadi ketika pengguna mengklik tombol OK atau Batal .

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

Tambahkan tombol berikut klik kode penanganan aktivitas ke Form1 kelas .

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: ";
    }
}

Membuat dan menjalankan 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

RadioButton Kontrol 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 ElementHost objek. Properti yang tersisa diekspos sebagai properti kustom kontrol.

Klik dua kali setiap RadioButton kontrol pada formulir untuk membuat CheckedChanged penanganan aktivitas. Ganti penanganan CheckedChanged aktivitas 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;
}

Membuat dan menjalankan aplikasi. Klik tombol radio yang berbeda untuk melihat efek pada kontrol komposit WPF.

Baca juga