Útmutató: Windows Forms-vezérlők rendezése a WPF-ben

Ez az útmutató bemutatja, hogyan rendezheti a Windows Forms vezérlőket hibrid alkalmazásokban a WPF elrendezési funkcióival.

Az ebben az útmutatóban bemutatott feladatok a következők:

• A projekt létrehozása.
• Alapértelmezett elrendezési beállítások használata.
• A méret igazítása a tartalomhoz.
• Abszolút pozicionálás használata.
• A méret explicit megadása.
• Elrendezés tulajdonságainak beállítása.
• A z-order korlátainak ismertetése.
• Dokkolás.
• Láthatóság beállítása.
• Olyan vezérlő kezelése, amely nem tágul.
• Skálázás.
• Forgatás.
• A padding és a margók beállítása.
• Dinamikus elrendezésű tárolók használata.

Az ebben az útmutatóban bemutatott feladatok teljes kódlistájáért lásd A Windows űrlapvezérlőinek rendezése a WPF-minta.

Ha végzett, megismerheti a Windows Forms WPF-alapú alkalmazások elrendezési funkcióit.

Előfeltételek

Az útmutató elvégzéséhez a Visual Studióra van szüksége.

A projekt létrehozása

A projekt létrehozásához és beállításához kövesse az alábbi lépéseket:

1. Hozzon létre egy WpfLayoutHostingWfnevű WPF-alkalmazásprojektet.

2. A Megoldáskezelőben adjon hozzá hivatkozásokat a következő szerelvényekhez:

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

3. Kattintson duplán MainWindow.xaml xAML nézetben való megnyitásához.

4. A Window elemben adja hozzá a következő Windows Forms-névtérleképezést.

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

5. A Grid elemben állítsa a ShowGridLines tulajdonságot úgy, hogy true és definiáljon öt sort és három oszlopot.

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

Alapértelmezett elrendezési beállítások használata

Alapértelmezés szerint a WindowsFormsHost elem kezeli az üzemeltetett Windows Forms vezérlő elrendezését.

Az alapértelmezett elrendezési beállítások használatához kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

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

2. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A System.Windows.Forms.Buttonhelyen jelenik meg a Windows Forms Canvas vezérlő. Az üzemeltetett vezérlő mérete a tartalma alapján van méretezve, és a WindowsFormsHost elem mérete az üzemeltetett vezérlőnek megfelelően van méretezve.

A tartalomhoz igazított méretezés

A WindowsFormsHost elem biztosítja, hogy az üzemeltetett vezérlő mérete megfelelő a tartalom helyes megjelenítéséhez.

A tartalom méretének megtekintéséhez kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A két új gomb úgy van méretezve, hogy megfelelően jelenítse meg a hosszabb karaktersorozatot és a nagyobb betűméretet, és a WindowsFormsHost elemek újraméretezve vannak, hogy befogadják a gazda vezérlőket.

Abszolút pozicionálás használata

Az abszolút elhelyezés használatával a WindowsFormsHost elemet bárhol elhelyezheti a felhasználói felületen.

Az abszolút pozicionálás használatához kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A WindowsFormsHost elem a rácscella felső oldalától 20 képpont, és bal oldalon is 20 képpont távolságra van elhelyezve.

A méret explicit megadása

A WindowsFormsHost elem méretét a Width és Height tulajdonságok használatával adhatja meg.

A méret explicit megadásához kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A WindowsFormsHost elem mérete 50 képpont szélességű és 70 képpont magas, ami kisebb az alapértelmezett elrendezési beállításoknál. A Windows Forms vezérlő tartalma ennek megfelelően lesz átrendezve.

Elrendezés tulajdonságainak beállítása

Az elrendezéssel kapcsolatos tulajdonságokat mindig a WindowsFormsHost elem tulajdonságaival állítsa be a üzemeltetett vezérlőn. Ha közvetlenül az üzemeltetett vezérlőre állítja az elrendezési tulajdonságokat, az nem kívánt eredményeket fog eredményezni.

Az XAML-ben a hosztolt vezérlőn elrendezéssel kapcsolatos tulajdonságok beállítása nincs hatással.

A tulajdonságoknak az üzemeltetett vezérlőre gyakorolt hatásának megtekintéséhez kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. A Megoldáskezelőbenkattintson duplán a MainWindow.xaml.vb vagy a MainWindow.xaml.cs elemre a Kódszerkesztőben való megnyitásra.

3. Másolja a következő kódot a MainWindow osztálydefinícióba:

   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. Az alkalmazás létrehozásához és futtatásához nyomja le F5.

5. Kattintson a Kattints rám gombra. Az button1_Click eseménykezelő beállítja az üzemeltetett vezérlő Top és Left tulajdonságait. Ez azt eredményezi, hogy az üzemeltetett vezérlő a WindowsFormsHost elemen belül lesz áthelyezve. A gazdagép ugyanazt a képernyőterületet tartja fenn, de az üzemeltetett vezérlő ki van vágva. Ehelyett a üzemeltetett vezérlőnek mindig ki kell töltenie a WindowsFormsHost elemet.

A Z-Order korlátainak ismertetése

A látható WindowsFormsHost elemek mindig más WPF-elemekre vannak rajzolva, és z-sorrend nem érinti őket. A z-order viselkedésének megfigyeléséhez hajtsa végre a következő lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A WindowsFormsHost elem a címkeelemre van festve.

Dokkolás

WindowsFormsHost elem támogatja a WPF-dokkolást. Állítsa be a Dock csatolt tulajdonságot, hogy a tárolt vezérlőt egy DockPanel elemben rögzítse.

Üzemeltetett vezérlő rögzítéséhez kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A WindowsFormsHost elem a DockPanel elem jobb oldalához van rögzítve.

Láthatóság beállítása

A Windows Forms-vezérlőt láthatatlanná teheti vagy összecsukhatja a Visibility elem WindowsFormsHost tulajdonságának beállításával. Ha egy vezérlő nem látható, akkor nem jelenik meg, de helyet foglal el az elrendezésben. Ha egy vezérlő összecsukva van, az nem jelenik meg, és nem foglal el elrendezési területet sem.

Egy üzemeltetett vezérlő láthatóságának beállításához kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. MainWindow.xaml.vb vagy MainWindow.xaml.csmásolja a következő kódot az osztálydefinícióba:

   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. Az alkalmazás létrehozásához és futtatásához nyomja le F5.

4. Kattintson a Láthatatlanná teszi gombra, hogy láthatatlanná tegye a WindowsFormsHost elemet.

5. Kattintson a Kattintás gombra a összecsukásához, hogy teljesen elrejtse a WindowsFormsHost elemet az elrendezésből. A Windows Forms vezérlő összecsukásakor a rendszer átrendezi a környező elemeket, hogy elfoglalja a helyet.

Olyan vezérlő használata, amely nem terjed ki

Egyes Windows Forms-vezérlők rögzített méretűek, és nem nyúlnak, hogy kitöltsék a rendelkezésre álló helyet az elrendezésben. A MonthCalendar vezérlőelem például egy hónapot jelenít meg rögzített helyen.

Ha nem nyújtható vezérlőelemet szeretne üzemeltetni, kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A WindowsFormsHost eleme középre van igazítva a rácssorban, de nincs kifeszítve a rendelkezésre álló terület kitöltéséhez. Ha az ablak elég nagy, előfordulhat, hogy a üzemeltetett MonthCalendar vezérlőelem két vagy több hónapot jelenít meg, de ezek a sor közepén vannak. A WPF elrendezési motor olyan elemeket központosít, amelyek nem méretezhetők a rendelkezésre álló terület kitöltéséhez.

Skálázás

A WPF-elemekkel ellentétben a Legtöbb Windows Forms-vezérlő nem skálázható folyamatosan. Az egyéni skálázás biztosításához felül kell írnia a WindowsFormsHost.ScaleChild metódust.

Ha egy üzemeltetett vezérlőt az alapértelmezett viselkedéssel szeretne skálázni, kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. Az üzemeltetett vezérlő és a környező elemek 0,5-ös tényezővel vannak skálázva. Az üzemeltetett vezérlő betűtípusa azonban nincs skálázva.

Forgatás

A WPF-elemekkel ellentétben a Windows Forms-vezérlők nem támogatják a forgatást. A WindowsFormsHost elem nem forog együtt más WPF-elemekkel, amikor egy forgatási transzformáció történik. A 180 foktól eltérő forgatási érték növeli a LayoutError eseményt.

A hibrid alkalmazások rotációjának hatásának megtekintéséhez kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A vezérlő nincs elforgatva, de a környező elemek 180 fokos szögben el vannak forgatva. Előfordulhat, hogy az elemek megtekintéséhez át kell méreteznie az ablakot.

A párnázás és a margók beállítása

A WPF-elrendezésben a padding és a margók hasonlóak a Windows Formsban lévő párnázáshoz és margókhoz. Egyszerűen állítsa be a Padding és Margin tulajdonságokat a WindowsFormsHost elemen.

Ha egy üzemeltetett vezérlőelemhez szeretné beállítani a párnázást és a margókat, kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

   <!-- 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. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A kipárnázási és margóbeállítások ugyanúgy lesznek alkalmazva az üzemeltetett Windows Forms-vezérlőkre, mint a Windows Formsban.

Dinamikus elrendezésű tárolók használata

A Windows Forms két dinamikus elrendezésű tárolót biztosít, FlowLayoutPanel és TableLayoutPanel. Ezeket a tárolókat WPF-elrendezésekben is használhatja.

Dinamikus elrendezéstároló használatához kövesse az alábbi lépéseket:

1. Másolja a következő XAML-t a Grid elembe:

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

2. MainWindow.xaml.vb vagy MainWindow.xaml.csmásolja a következő kódot az osztálydefinícióba:

   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. Adjon hozzá egy hívást a konstruktor InitializeFlowLayoutPanel metódusához:

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

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

4. Az alkalmazás létrehozásához és futtatásához nyomja le F5. A WindowsFormsHost elem kitölti a DockPanel, és FlowLayoutPanel a gyermekvezérlőket az alapértelmezett FlowDirectionrendezi.

Lásd még

• ElementHost
• WindowsFormsHost
• XAML-tervezés a Visual Studio-ban
• WindowsFormsHost elem elrendezésével kapcsolatos szempontok
• Windows Forms-vezérlők rendezése egy WPF mintában
• Útmutató: Windows Forms összetett vezérlőinek üzemeltetése a WPF-ben
• Lépésről lépésre: WPF kompozit vezérlő üzemeltetése Windows Forms-ben