Dela via

Genomgång: Ordna Windows Forms-kontroller i WPF

Den här genomgången visar hur du använder WPF-layoutfunktioner för att ordna Windows Forms-kontroller i ett hybridprogram.

Uppgifter som illustreras i den här genomgången är:

  • Skapa projektet.
  • Använda standardlayoutinställningar.
  • Storlek på innehåll.
  • Använda absolut positionering.
  • Ange storlek explicit.
  • Ange layoutegenskaper.
  • Förstå z-orderbegränsningar.
  • Dockning.
  • Ställa in synlighet.
  • Värd för en kontroll som inte sträcker sig.
  • Skalning.
  • Roterande.
  • Ange utfyllnad och marginaler.
  • Använda dynamiska layoutcontainrar.

En fullständig kodlista över de uppgifter som visas i den här genomgången finns i Ordna Windows Forms-kontroller i WPF-exempel.

När du är klar har du en förståelse för layoutfunktioner i Windows Forms i WPF-baserade program.

Förutsättningar

Du behöver Visual Studio för att slutföra den här genomgången.

Skapa projektet

Följ dessa steg för att skapa och konfigurera projektet:

  1. Skapa ett WPF-programprojekt med namnet WpfLayoutHostingWf.

  2. I Solution Explorer lägger du till referenser till följande sammansättningar:

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

  3. Dubbelklicka på MainWindow.xaml för att öppna det i XAML-vyn.

  4. Lägg till följande Windows Forms-namnområdesmappning i elementet Window .

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

  5. I elementet Grid anger du ShowGridLines egenskapen till true och definierar fem rader och tre kolumner.

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

  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

Använda standardlayoutinställningar

Som standard hanterar elementet WindowsFormsHost layouten för den värdbaserade Windows Forms-kontrollen.

Följ dessa steg om du vill använda standardlayoutinställningar:

  1. Kopiera följande XAML till -elementet Grid :

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

  2. Tryck på F5 för att skapa och köra programmet. Windows Forms-kontrollen System.Windows.Forms.Button visas i Canvas. Den värdbaserade kontrollen är storleksanpassad baserat på dess innehåll och elementet WindowsFormsHost är storleksanpassat för den värdbaserade kontrollen.

Anpassa storlek efter innehåll

Elementet WindowsFormsHost ser till att den värdbaserade kontrollen är storleksanpassad för att visa innehållet korrekt.

Om du vill ändra storlek på innehåll följer du dessa steg:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. De två nya knappkontrollerna är storleksanpassade för att visa den längre textsträngen och större teckenstorlek korrekt, och elementen WindowsFormsHost ändras så att de passar de värdbaserade kontrollerna.

Använda absolut positionering

Du kan använda absolut positionering för att placera elementet WindowsFormsHost var som helst i användargränssnittet (UI).

Följ dessa steg om du vill använda absolut positionering:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Elementet WindowsFormsHost placeras 20 bildpunkter från den övre sidan av rutnätscellen och 20 bildpunkter från vänster.

Ange storlek uttryckligen

Du kan ange storleken på WindowsFormsHost-elementet med hjälp av egenskaperna Width och Height.

Följ dessa steg för att uttryckligen ange storlek:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Elementet WindowsFormsHost är inställt på en storlek på 50 bildpunkter brett och 70 bildpunkter högt, vilket är mindre än standardlayoutinställningarna. Innehållet i Windows Forms-kontrollen ordnas om i enlighet med detta.

Ange layoutegenskaper

Ange alltid layoutrelaterade egenskaper för den värdbaserade kontrollen med hjälp av elementets WindowsFormsHost egenskaper. Om du ställer in layoutegenskaper direkt på den värdbaserade kontrollen får du oavsiktliga resultat.

Det har ingen effekt att ange layoutrelaterade egenskaper för den värdbaserade kontrollen i XAML.

Följ dessa steg om du vill se effekterna av att ange egenskaper på den värdbaserade kontrollen:

  1. Kopiera följande XAML till -elementet 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. I Solution Explorer dubbelklickar du på MainWindow.xaml.vb eller MainWindow.xaml.cs för att öppna den i kodredigeraren.

  3. Kopiera följande kod till klassdefinitionen 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. Tryck på F5 för att skapa och köra programmet.

  5. Klicka på knappen Klicka på mig . Händelsehanteraren button1_Click anger Top egenskaperna och Left på den värdbaserade kontrollen. Detta gör att den värdbaserade kontrollen flyttas inom elementet WindowsFormsHost . Värden har samma skärmområde, men den värdbaserade kontrollen klipps av. I stället bör den värdbaserade kontrollen alltid fylla elementet WindowsFormsHost .

Förstå Z-orderbegränsningar

Synliga WindowsFormsHost element ritas alltid ovanpå andra WPF-element, och de påverkas inte av z-ordning. Om du vill se det här z-orderbeteendet gör du följande:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Elementet WindowsFormsHost målas över etikettelementet.

Dockning

WindowsFormsHost -elementet stöder WPF-dockning. Ställ in den Dock bifogade egenskapen för att docka den värdbaserade kontrollen i ett DockPanel element.

Om du vill docka en värdbaserad kontroll följer du dessa steg:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Elementet WindowsFormsHost dockas till höger om elementet DockPanel .

Ange synlighet

Du kan göra Windows Forms-kontrollen osynlig eller kollapsa den genom att ange egenskapen Visibility på elementet WindowsFormsHost. När en kontroll är osynlig visas den inte, men den upptar layoututrymme. När en kontroll har komprimerats visas den inte och den upptar inte heller layoututrymme.

Följ dessa steg för att ställa in synligheten för en värdbaserad kontroll:

  1. Kopiera följande XAML till -elementet 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. I MainWindow.xaml.vb eller MainWindow.xaml.cs kopierar du följande kod till klassdefinitionen:

    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. Tryck på F5 för att skapa och köra programmet.

  4. Klicka på knappen Klicka för att göra osynlig för att göra elementet WindowsFormsHost osynligt.

  5. Klicka på knappen Klicka för att komprimera för att dölja elementet WindowsFormsHost helt från layouten. När Windows Forms-kontrollen fälls ihop, ordnas de omgivande elementen om för att uppta dess utrymme.

Hantera en komponent som inte sträcker sig

Vissa Windows Forms-kontroller har en fast storlek och sträcker sig inte för att fylla det tillgängliga utrymmet i layouten. Kontrollen visar till exempel MonthCalendar en månad på en bestämd plats.

Följ dessa steg för att vara värd för en kontroll som inte sträcker sig:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Elementet WindowsFormsHost är centrerat i rutnätsraden, men det är inte utsträckt för att fylla det tillgängliga utrymmet. Om fönstret är tillräckligt stort kan du se två eller flera månader som visas av värdkontrollen MonthCalendar, men de är centrerade i raden. WPF-layoutmotorn centrerar element som inte kan storleksanpassas för att fylla det tillgängliga utrymmet.

Skalning

Till skillnad från WPF-element är de flesta Windows Forms-kontroller inte kontinuerligt skalbara. För att tillhandahålla anpassad skalning åsidosätter WindowsFormsHost.ScaleChild du metoden.

Följ dessa steg om du vill skala en värdbaserad kontroll med hjälp av standardbeteendet:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Den värdbaserade kontrollen och dess omgivande element skalas med en faktor 0,5. Den värdbaserade kontrollens teckensnitt skalas dock inte.

Roterande

Till skillnad från WPF-element stöder Windows Forms-kontroller inte rotation. Elementet WindowsFormsHost roterar inte med andra WPF-element när en rotationstransformation tillämpas. Alla rotationsvärden som inte är 180 grader höjer LayoutError händelsen.

Följ dessa steg för att se effekten av rotation i ett hybridprogram:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Den värdbaserade kontrollen roteras inte, men dess omgivande element roteras med en vinkel på 180 grader. Du kan behöva ändra storlek på fönstret för att se elementen.

Ange utfyllnad och marginaler

Utfyllnad och marginaler i WPF-layouten liknar utfyllnad och marginaler i Windows Forms. Ställ helt enkelt in egenskaperna Padding och Margin på elementet WindowsFormsHost.

Följ dessa steg om du vill ange utfyllnad och marginaler för en värdbaserad kontroll:

  1. Kopiera följande XAML till -elementet 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. Tryck på F5 för att skapa och köra programmet. Inställningarna för utfyllnad och marginal tillämpas på de värdbaserade Windows Forms-kontrollerna på samma sätt som de skulle tillämpas i Windows Forms.

Använda dynamiska layoutcontainrar

Windows Forms innehåller två dynamiska layoutcontainrar FlowLayoutPanel och TableLayoutPanel. Du kan också använda dessa containrar i WPF-layouter.

Följ dessa steg om du vill använda en container med dynamisk layout:

  1. Kopiera följande XAML till -elementet Grid :

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

  2. I MainWindow.xaml.vb eller MainWindow.xaml.cs kopierar du följande kod till klassdefinitionen:

    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. Lägg till ett anrop till InitializeFlowLayoutPanel metoden i konstruktorn:

    public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

    Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

  4. Tryck på F5 för att skapa och köra programmet. Elementet WindowsFormsHost fyller i DockPaneloch FlowLayoutPanel ordnar sina underordnade kontroller i standardinställningen FlowDirection.

Se även

  • Last updated on