Panduan: Mengatur Kontrol Formulir Windows di WPF

Panduan ini menunjukkan kepada Anda cara menggunakan fitur tata letak WPF untuk mengatur kontrol Formulir Windows dalam aplikasi hibrid.

Tugas yang diilustrasikan dalam panduan ini meliputi:

• Membuat proyek.
• Menggunakan pengaturan tata letak default.
• Mengatur ukuran sesuai konten.
• Menggunakan posisi absolut.
• Menentukan ukuran secara eksplisit.
• Mengatur properti tata letak.
• Memahami batasan z-order.
• Pemasangan
• Mengatur keterlihatan.
• Hosting kontrol yang tidak meregang.
• Penskalaan.
• Berputar.
• Mengatur padding dan margin.
• Menggunakan kontainer tata letak dinamis.

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

Setelah selesai, Anda akan memiliki pemahaman tentang fitur tata letak Formulir Windows dalam aplikasi berbasis WPF.

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan panduan ini.

Membuat Proyek

Untuk membuat dan menyiapkan proyek, ikuti langkah-langkah berikut:

1. Buat proyek Aplikasi WPF bernama WpfLayoutHostingWf.

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

   • WindowsFormsIntegration
   • System.Windows.Forms
   • System.Drawing

3. Klik dua kali MainWindow.xaml untuk membukanya dalam tampilan XAML.

4. Dalam elemen Window, tambahkan pemetaan namespace Windows Forms berikut ini.

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

5. Dalam elemen Grid atur properti ShowGridLines ke true dan tentukan lima baris dan tiga kolom.

   <Grid ShowGridLines="true">
     <Grid.RowDefinitions>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
     </Grid.RowDefinitions>
   
     <Grid.ColumnDefinitions>
       <ColumnDefinition/>
       <ColumnDefinition/>
       <ColumnDefinition/>
     </Grid.ColumnDefinitions>
   

Menggunakan Pengaturan Tata Letak Default

Secara default, elemen WindowsFormsHost menangani tata letak untuk kontrol Windows Forms yang dihosting.

Untuk menggunakan pengaturan tata letak default, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Default layout. -->
   <Canvas Grid.Row="0" Grid.Column="0">
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Kontrol Windows Forms System.Windows.Forms.Button muncul di Canvas. Kontrol yang dihosting berukuran berdasarkan kontennya, dan elemen WindowsFormsHost berukuran untuk mengakomodasi kontrol yang dihosting.

Mengatur Ukuran Berdasarkan Konten

Elemen WindowsFormsHost memastikan bahwa kontrol yang dihosting berukuran untuk menampilkan kontennya dengan benar.

Untuk menyesuaikan dengan konten, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Sizing to content. -->
   <Canvas Grid.Row="1" Grid.Column="0">
     <WindowsFormsHost Background="Orange">
       <wf:Button Text="Windows Forms control with more content" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   
   <Canvas Grid.Row="2" Grid.Column="0">
     <WindowsFormsHost FontSize="24" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Dua kontrol tombol baru disesuaikan ukurannya untuk menampilkan string teks yang lebih panjang dan ukuran font yang lebih besar dengan benar, dan elemen WindowsFormsHost diskalakan ulang untuk mengakomodasi kontrol yang dimuat.

Menggunakan Posisi Absolut

Anda dapat menggunakan penempatan absolut untuk menempatkan elemen WindowsFormsHost di mana saja di antarmuka pengguna (UI).

Untuk menggunakan penempatan absolut, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Absolute positioning. -->
   <Canvas Grid.Row="3" Grid.Column="0">
     <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control with absolute positioning" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Elemen WindowsFormsHost ditempatkan 20 piksel dari sisi atas sel kisi dan 20 piksel dari kiri.

Menentukan Ukuran Secara Eksplisit

Anda dapat menentukan ukuran elemen WindowsFormsHost menggunakan properti Width dan Height.

Untuk menentukan ukuran secara eksplisit, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Explicit sizing. -->
   <Canvas Grid.Row="4" Grid.Column="0">
     <WindowsFormsHost Width="50" Height="70" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Elemen WindowsFormsHost diatur ke ukuran lebar 50 piksel dengan tinggi 70 piksel, yang lebih kecil dari pengaturan tata letak default. Konten kontrol Windows Forms disusun ulang sesuai kebutuhan.

Mengatur Properti Tata Letak

Selalu atur properti terkait tata letak pada kontrol yang dihosting dengan menggunakan properti elemen WindowsFormsHost. Mengatur properti tata letak langsung pada kontrol yang dihosting akan menghasilkan hasil yang tidak diinginkan.

Mengatur properti terkait tata letak pada kontrol yang dihosting di XAML tidak berpengaruh.

Untuk melihat efek pengaturan properti pada kontrol yang dihosting, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Setting hosted control properties directly. -->
   <Canvas Grid.Row="0" Grid.Column="1">
     <WindowsFormsHost Width="160" Height="50" Background="Yellow">
       <wf:Button Name="button1" Click="button1_Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Di Solution Explorer, klik dua kali MainWindow.xaml.vb atau MainWindow.xaml.cs untuk membukanya di Editor Kode.

3. Salin kode berikut ke dalam definisi kelas MainWindow:

   private void button1_Click(object sender, EventArgs e )
   {
       System.Windows.Forms.Button b = sender as System.Windows.Forms.Button;
   
       b.Top = 20;
       b.Left = 20;
   }
   

   Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
       Dim b As System.Windows.Forms.Button = sender
   
       b.Top = 20
       b.Left = 20
   
   End Sub
   

4. Tekan F5 untuk membangun dan menjalankan aplikasi.

5. Klik tombol Klik di sini. Pengendali acara button1_Click mengatur properti Top dan Left pada kontrol terhosting. Ini menyebabkan kontrol yang dihosting diposisikan ulang dalam elemen WindowsFormsHost. Host mempertahankan area layar yang sama, tetapi kontrol yang dihosting dipotong. Sebaliknya, kontrol yang dihosting harus selalu mengisi elemen WindowsFormsHost.

Memahami Batasan Z-Order

Elemen WindowsFormsHost yang terlihat selalu digambar di atas elemen WPF lainnya, dan tidak terpengaruh oleh z-order. Untuk melihat perilaku z-order ini, lakukan hal berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Z-order demonstration. -->
   <Canvas Grid.Row="1" Grid.Column="1">
     <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     <Label Content="A WPF label" FontSize="24"/>
   </Canvas>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Elemen WindowsFormsHost dicat di atas elemen label.

Penambatan

elemen WindowsFormsHost mendukung docking WPF. Atur properti terlampir Dock untuk menambatkan kontrol yang dihosting dalam elemen DockPanel.

Untuk menautkan kontrol yang dihosting, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Docking a WindowsFormsHost element. -->
   <DockPanel LastChildFill="false"  Grid.Row="2" Grid.Column="1">
     <WindowsFormsHost DockPanel.Dock="Right"  Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </DockPanel>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Elemen WindowsFormsHost ditempatkan di sisi kanan elemen DockPanel.

Mengatur Visibilitas

Anda dapat membuat kontrol Windows Forms Anda tidak terlihat atau menciutkannya dengan mengatur properti Visibility pada elemen WindowsFormsHost. Ketika kontrol tidak terlihat, itu tidak ditampilkan, tetapi menempati ruang tata letak. Ketika kontrol diciutkan, kontrol tersebut tidak ditampilkan dan juga tidak menempati ruang tata letak.

Untuk mengatur visibilitas kontrol yang dihosting, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Setting Visibility to hidden and collapsed. -->
   <StackPanel Grid.Row="3" Grid.Column="1">
     <Button Name="button2" Click="button2_Click" Content="Click to make invisible" Background="OrangeRed"/>
     <WindowsFormsHost Name="host1"  Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     <Button Name="button3" Click="button3_Click" Content="Click to collapse" Background="OrangeRed"/>
   </StackPanel>
   

2. Di MainWindow.xaml.vb atau MainWindow.xaml.cs, salin kode berikut ke dalam definisi kelas:

   private void button2_Click(object sender, EventArgs e)
   {
       this.host1.Visibility = Visibility.Hidden;
   }
   
   private void button3_Click(object sender, EventArgs e)
   {
       this.host1.Visibility = Visibility.Collapsed;
   }
   

   Private Sub button2_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
       Me.host1.Visibility = Windows.Visibility.Hidden
   End Sub
   
   
   Private Sub button3_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
       Me.host1.Visibility = Windows.Visibility.Collapsed
   End Sub
   

3. Tekan F5 untuk membangun dan menjalankan aplikasi.

4. Klik tombol Klik untuk membuat tidak terlihat agar elemen WindowsFormsHost menjadi tidak terlihat.

5. Klik tombol Klik untuk menyusutkan untuk sepenuhnya menyembunyikan elemen WindowsFormsHost dari tata letak. Ketika kontrol Windows Forms dikompresi, elemen di sekitarnya diatur ulang untuk menempati ruang tersebut.

Mengelola Kontrol yang Tidak Fleksibel

Beberapa kontrol Windows Forms memiliki ukuran tetap dan tidak membentang untuk mengisi ruang yang tersedia dalam tata letak. Misalnya, kontrol MonthCalendar menampilkan sebulan dalam ruang tetap.

Untuk menghosting kontrol yang tidak meregang, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Hosting a control that does not stretch. -->
   <!-- The MonthCalendar has a discrete size. -->
   <StackPanel Grid.Row="4" Grid.Column="1">
     <Label Content="A WPF element" Background="OrangeRed"/>
     <WindowsFormsHost Background="Yellow">
       <wf:MonthCalendar/>
     </WindowsFormsHost>
     <Label Content="Another WPF element" Background="OrangeRed"/>
   </StackPanel>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Elemen WindowsFormsHost diposisikan di tengah baris kisi, tetapi tidak direntangkan untuk mengisi ruang yang tersedia. Jika jendela cukup besar, Anda mungkin melihat dua bulan atau lebih ditampilkan oleh kontrol MonthCalendar yang dihosting, tetapi bulan-bulan ini diatur agar berpusat di baris tampilan. Mesin tata letak WPF memusatkan elemen yang ukurannya tidak dapat disesuaikan untuk mengisi ruang yang tersedia.

Skalabilitas

Tidak seperti elemen WPF, sebagian besar kontrol Windows Forms tidak terus-menerus dapat diskalakan. Untuk menyediakan penskalakan kustom, Anda mengambil alih metode WindowsFormsHost.ScaleChild.

Untuk menskalakan kontrol yang dihosting dengan menggunakan perilaku default, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Scaling transformation. -->
   <StackPanel Grid.Row="0" Grid.Column="2">
     
     <StackPanel.RenderTransform>
       <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" />
     </StackPanel.RenderTransform>
   
     <Label Content="A WPF UIElement" Background="OrangeRed"/>
     
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     
     <Label Content="Another WPF UIElement" Background="OrangeRed"/>
     
   </StackPanel>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Kontrol yang dihosting dan elemen di sekitarnya diskalakan dengan faktor 0,5. Namun, font pada kontrol yang dihosting tidak diskalakan.

Berputar

Tidak seperti elemen WPF, kontrol Windows Forms tidak mendukung rotasi. Elemen WindowsFormsHost tidak berputar dengan elemen WPF lainnya saat transformasi rotasi diterapkan. Nilai rotasi apa pun selain 180 derajat memicu peristiwa LayoutError.

Untuk melihat efek rotasi dalam aplikasi hibrid, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Rotation transformation. -->
   <StackPanel Grid.Row="1" Grid.Column="2">
   
     <StackPanel.RenderTransform>
       <RotateTransform CenterX="200" CenterY="50" Angle="180" />
     </StackPanel.RenderTransform>
   
     <Label Content="A WPF element" Background="OrangeRed"/>
   
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   
     <Label Content="Another WPF element" Background="OrangeRed"/>
   
   </StackPanel>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Kontrol yang dihosting tidak diputar, tetapi elemen di sekitarnya diputar sebesar sudut 180 derajat. Anda mungkin harus mengubah ukuran jendela untuk melihat elemen.

Mengatur Padding dan Margin

Padding dan margin dalam tata letak WPF mirip dengan padding dan margin di Formulir Windows. Cukup atur properti Padding dan Margin pada elemen WindowsFormsHost.

Untuk mengatur padding dan margin untuk kontrol yang dihosting, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Padding. -->
   <Canvas Grid.Row="2" Grid.Column="2">
     <WindowsFormsHost Padding="0, 20, 0, 0" Background="Yellow">
       <wf:Button Text="Windows Forms control with padding" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

   <!-- Margin. -->
   <Canvas Grid.Row="3" Grid.Column="2">
     <WindowsFormsHost Margin="20, 20, 0, 0" Background="Yellow">
       <wf:Button Text="Windows Forms control with margin" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Tekan F5 untuk membangun dan menjalankan aplikasi. Pengaturan padding dan margin diterapkan ke kontrol Windows Forms yang dihosting dengan cara yang sama seperti diterapkan pada Windows Forms.

Menggunakan Kontainer Tata Letak Dinamis

Windows Forms menyediakan dua kontainer tata letak dinamis, FlowLayoutPanel dan TableLayoutPanel. Anda juga dapat menggunakan kontainer ini dalam tata letak WPF.

Untuk menggunakan kontainer tata letak dinamis, ikuti langkah-langkah berikut:

1. Salin XAML berikut ke dalam elemen Grid:

   <!-- Flow layout. -->
   <DockPanel Grid.Row="4" Grid.Column="2">
     <WindowsFormsHost Name="flowLayoutHost" Background="Yellow">
       <wf:FlowLayoutPanel/>
     </WindowsFormsHost>
   </DockPanel>
   

2. Di MainWindow.xaml.vb atau MainWindow.xaml.cs, salin kode berikut ke dalam definisi kelas:

   private void InitializeFlowLayoutPanel()
   {
       System.Windows.Forms.FlowLayoutPanel flp =
           this.flowLayoutHost.Child as System.Windows.Forms.FlowLayoutPanel;
   
       flp.WrapContents = true;
   
       const int numButtons = 6;
   
       for (int i = 0; i < numButtons; i++)
       {
           System.Windows.Forms.Button b = new System.Windows.Forms.Button();
           b.Text = "Button";
           b.BackColor = System.Drawing.Color.AliceBlue;
           b.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
   
           flp.Controls.Add(b);
       }
   }
   

   Private Sub InitializeFlowLayoutPanel()
       Dim flp As System.Windows.Forms.FlowLayoutPanel = Me.flowLayoutHost.Child
   
       flp.WrapContents = True
   
       Const numButtons As Integer = 6
   
       Dim i As Integer
       For i = 0 To numButtons
           Dim b As New System.Windows.Forms.Button()
           b.Text = "Button"
           b.BackColor = System.Drawing.Color.AliceBlue
           b.FlatStyle = System.Windows.Forms.FlatStyle.Flat
   
           flp.Controls.Add(b)
       Next i
   
   End Sub
   

3. Tambahkan panggilan ke metode InitializeFlowLayoutPanel di konstruktor:

   public MainWindow()
   {
       InitializeComponent();
   
       this.InitializeFlowLayoutPanel();
   }
   

   Public Sub New()
       InitializeComponent()
   
       Me.InitializeFlowLayoutPanel()
   
   End Sub
   

4. Tekan F5 untuk membangun dan menjalankan aplikasi. Elemen WindowsFormsHost mengisi DockPanel, dan FlowLayoutPanel mengatur kontrol turunannya dalam FlowDirectiondefault .

Lihat juga

• ElementHost
• WindowsFormsHost
• Mendesain XAML di Visual Studio
• Pertimbangan Tata Letak untuk Elemen WindowsFormsHost
• Mengatur Kontrol Windows Forms pada Contoh WPF
• Panduan Langkah demi Langkah : Menghosting Kontrol Komposit Windows Forms di WPF
• Panduan Langkah-demi-Langkah: Menghosting Kontrol Komposit WPF di Windows Forms