Overzicht: Besturingselementen voor Windows-formulieren rangschikken in WPF

Artikel
12/19/2024

In dit overzicht ziet u hoe u WPF-indelingsfuncties kunt gebruiken om Besturingselementen van Windows Forms in een hybride toepassing te rangschikken.

Taken die in deze walkthrough worden geïllustreerd, zijn:

Het project aanmaken.
Standaardindelingsinstellingen gebruiken.
Grootte aanpassen aan inhoud.
Het gebruik van absolute positionering.
De grootte expliciet opgeven.
Eigenschappen voor indeling instellen.
Inzicht in z-orderbeperkingen.
Aanmeren.
Zichtbaarheid instellen.
Het hosten van een controle-element dat niet meebeweegt.
Schaalvergroting
Roterend.
Opvulling en marges instellen.
Dynamische indelingscontainers gebruiken.

Zie Het rangschikken van Besturingselementen voor Windows Forms in WPF Samplevoor een volledige code van de taken die in dit scenario worden geïllustreerd.

Wanneer u klaar bent, hebt u inzicht in de indelingsfuncties van Windows Forms in WPF-toepassingen.

Voorwaarden

U hebt Visual Studio nodig om deze handleiding te voltooien.

Het project maken

Voer de volgende stappen uit om het project te maken en in te stellen:

Maak een WPF-toepassingsproject met de naam WpfLayoutHostingWf.
Voeg in Solution Explorer verwijzingen toe naar de volgende assembly's:
- WindowsFormsIntegration
- System.Windows.Forms
- System.Drawing
Dubbelklik op MainWindow.xaml om deze te openen in de XAML-weergave.
Voeg in het element Window de volgende naamruimtetoewijzing van Windows Forms toe.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```

Stel in het element Grid de eigenschap ShowGridLines in op true en definieer vijf rijen en drie kolommen.

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

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

Standaardinstellingen voor indeling gebruiken

Het element WindowsFormsHost verwerkt standaard de indeling voor het gehoste Besturingselement Windows Forms.

Voer de volgende stappen uit om de standaardindelingsinstellingen te gebruiken:

Kopieer de volgende XAML naar het Grid-element:

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

Druk op F5- om de toepassing te bouwen en uit te voeren. Het besturingselement Windows Forms System.Windows.Forms.Button verschijnt in de Canvas. De grootte van het gehoste besturingselement is gebaseerd op de inhoud en het element WindowsFormsHost is geschikt voor het gehoste besturingselement.

Grootte aanpassen aan inhoud

Het WindowsFormsHost-element zorgt ervoor dat het gehoste besturingselement de juiste grootte heeft om de inhoud ervan weer te geven.

Voer de volgende stappen uit om de grootte van de inhoud aan te passen:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. De twee nieuwe knopbesturingselementen zijn van formaat om de langere tekststring en grotere lettergrootte correct weer te geven; de WindowsFormsHost elementen worden aangepast aan de gehoste bedieningselementen.

Het gebruik van absolute positionering

U kunt absolute positionering gebruiken om het WindowsFormsHost element overal in de gebruikersinterface (UI) te plaatsen.

Volg deze stappen om absolute positionering te gebruiken:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het WindowsFormsHost element wordt 20 pixels vanaf de bovenzijde van de rastercel en 20 pixels vanaf de linkerkant geplaatst.

Expliciet grootte opgeven

U kunt de grootte van het WindowsFormsHost-element opgeven met behulp van de eigenschappen Width en Height.

Voer de volgende stappen uit om de grootte expliciet op te geven:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het element WindowsFormsHost is ingesteld op een grootte van 50 pixels breed met 70 pixels hoog, wat kleiner is dan de standaardinstellingen voor de indeling. De inhoud van het Windows Forms-besturingselement wordt dienovereenkomstig herschikt.

Indelingseigenschappen instellen

Stel altijd indelingsgerelateerde eigenschappen in op het gehoste besturingselement met behulp van de eigenschappen van het WindowsFormsHost-element. Het instellen van indelingseigenschappen rechtstreeks op het gehoste besturingselement levert onbedoelde resultaten op.

Het instellen van indelingsgerelateerde eigenschappen op het gehoste besturingselement in XAML heeft geen effect.

Voer de volgende stappen uit om de effecten van het instellen van eigenschappen op het gehoste besturingselement te bekijken:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Dubbelklik in Solution Explorer-op MainWindow.xaml.vb of MainWindow.xaml.cs om deze te openen in de Code-editor.

Kopieer de volgende code naar de MainWindow klassedefinitie:

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

Druk op F5- om de toepassing te bouwen en uit te voeren.
Klik op de knop Klik op. De button1_Click-gebeurtenishandler stelt de Top- en Left-eigenschappen in op het gehoste besturingselement. Dit zorgt ervoor dat het gehoste besturingselement binnen het WindowsFormsHost-element wordt verplaatst. De host behoudt hetzelfde schermgebied, maar het gehoste besturingselement wordt afgeknipt. In plaats daarvan moet het gehoste besturingselement altijd het WindowsFormsHost-element vullen.

Inzicht in Z-orderbeperkingen

Zichtbare WindowsFormsHost elementen worden altijd op andere WPF-elementen getekend en worden niet beïnvloed door z-volgorde. Volg de volgende stappen om dit z-ordergedrag te bekijken:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het WindowsFormsHost element wordt over het labelelement geschilderd.

Aankoppeling

WindowsFormsHost element ondersteunt WPF-docking. Stel de gekoppelde eigenschap Dock in om het gehoste besturingselement in een DockPanel-element te docken.

Voer de volgende stappen uit om een gehoste bedieningselement te docken:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het WindowsFormsHost element wordt aan de rechterkant van het DockPanel-element gedokt.

Zichtbaarheid instellen

U kunt het Windows Forms-besturingselement onzichtbaar maken of samenvouwen door de eigenschap Visibility van het WindowsFormsHost-element in te stellen. Wanneer een besturingselement onzichtbaar is, wordt het niet weergegeven, maar neemt het de indelingsruimte in beslag. Wanneer een besturingselement is samengevouwen, wordt het niet weergegeven en neemt het geen indelingsruimte in beslag.

Voer de volgende stappen uit om de zichtbaarheid van een gehost besturingselement in te stellen:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Kopieer in MainWindow.xaml.vb of MainWindow.xaml.csde volgende code naar de klassedefinitie:

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

Druk op F5- om de toepassing te bouwen en uit te voeren.
Klik op de knop Klik om onzichtbaar te maken om het WindowsFormsHost element onzichtbaar te maken.
Klik op de knop Klik om volledig samen te vouwen om het WindowsFormsHost element volledig uit de weergave te verbergen. Wanneer het besturingselement Windows Forms is samengevouwen, worden de omringende elementen opnieuw gerangschikt om de ruimte in te nemen.

Hosting van een bedieningselement dat niet uitrekt

Sommige Besturingselementen van Windows Forms hebben een vaste grootte en kunnen niet worden uitgerekt om de beschikbare ruimte in de indeling op te vullen. Het besturingselement MonthCalendar geeft bijvoorbeeld een maand weer in een vaste ruimte.

Als u een besturingselement wilt hosten dat niet uitrekt, voert u de volgende stappen uit:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het element WindowsFormsHost is gecentreerd in de rasterrij, maar wordt niet uitgerekt om de beschikbare ruimte te vullen. Als het venster groot genoeg is, kunt u mogelijk twee of meer maanden zien die worden weergegeven door het ingebedde MonthCalendar-besturingselement, waarbij deze in het midden van de rij zijn gepositioneerd. De WPF-indelingsengine centreert elementen die niet kunnen worden aangepast om de beschikbare ruimte te vullen.

Schaalvergroting

In tegenstelling tot WPF-elementen zijn de meeste Besturingselementen voor Windows Forms niet continu schaalbaar. Als u aangepaste schaalaanpassing wilt bieden, overschrijft u de methode WindowsFormsHost.ScaleChild.

Als u een gehost besturingselement wilt schalen met behulp van het standaardgedrag, voert u de volgende stappen uit:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het gehoste besturingselement en de omringende elementen worden geschaald met een factor van 0,5. Het lettertype van het gehoste besturingselement wordt echter niet geschaald.

Roterend

In tegenstelling tot WPF-elementen bieden Windows Forms-besturingselementen geen ondersteuning voor rotatie. Het WindowsFormsHost-element draait niet met andere WPF-elementen wanneer een rotatietransformatie wordt toegepast. Elke andere rotatiewaarde dan 180 graden verhoogt de LayoutError gebeurtenis.

Voer de volgende stappen uit om het effect van rotatie in een hybride toepassing te bekijken:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. Het gehoste besturingselement wordt niet gedraaid, maar de omringende elementen worden gedraaid met een hoek van 180 graden. Mogelijk moet u het formaat van het venster wijzigen om de elementen weer te geven.

Opvulling en marges instellen

Opvulling en marges in WPF-indeling zijn vergelijkbaar met opvulling en marges in Windows Forms. Stel de eigenschappen Padding en Margin in op het element WindowsFormsHost.

Voer de volgende stappen stap-voor-stap uit om opvulling en marges in te stellen voor een gehost besturingselement:

Kopieer de volgende XAML naar het Grid-element:

<!-- 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>

Druk op F5- om de toepassing te bouwen en uit te voeren. De instellingen voor opvulling en marge worden toegepast op de gehoste Besturingselementen voor Windows Forms op dezelfde manier als in Windows Forms.

Dynamische indelingscontainers gebruiken

Windows Forms biedt twee dynamische indelingscontainers, FlowLayoutPanel en TableLayoutPanel. U kunt deze containers ook gebruiken in WPF-indelingen.

Als u een container voor dynamische indeling wilt gebruiken, voert u de volgende stappen uit:

Kopieer de volgende XAML naar het Grid-element:

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

Kopieer in MainWindow.xaml.vb of MainWindow.xaml.csde volgende code naar de klassedefinitie:

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

Voeg een aanroep toe aan de methode InitializeFlowLayoutPanel in de constructor:

public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

Druk op F5- om de toepassing te bouwen en uit te voeren. Het WindowsFormsHost element vult de DockPanel, en FlowLayoutPanel rangschikt zijn onderliggende besturingselementen in de standaardindeling FlowDirection.

Delen via

Overzicht: Besturingselementen voor Windows-formulieren rangschikken in WPF

Voorwaarden

Het project maken

Standaardinstellingen voor indeling gebruiken

Grootte aanpassen aan inhoud

Het gebruik van absolute positionering

Expliciet grootte opgeven

Indelingseigenschappen instellen

Inzicht in Z-orderbeperkingen

Aankoppeling

Zichtbaarheid instellen

Hosting van een bedieningselement dat niet uitrekt

Schaalvergroting

Roterend

Opvulling en marges instellen

Dynamische indelingscontainers gebruiken

Zie ook

Aanvullende resources