Sdílet prostřednictvím

Návod: Uspořádání ovládacích prvků Windows Forms ve WPF

  • Článek

V tomto názorném postupu se dozvíte, jak pomocí funkcí rozložení WPF uspořádat ovládací prvky Windows Forms v hybridní aplikaci.

Mezi úlohy znázorněné v tomto názorném postupu patří:

  • Vytvoření projektu
  • Použití výchozího nastavení rozložení
  • Přizpůsobení velikosti obsahu.
  • Použití absolutního umístění
  • Explicitní zadání velikosti
  • Nastavení vlastností rozložení
  • Pochopení omezení z-řádu
  • Dokování
  • Nastavení viditelnosti
  • Hostování ovládacího prvku, který se automaticky neroztahuje.
  • Škálování.
  • Otáčení.
  • Nastavení odsazení a okrajů
  • Použití kontejnerů dynamického rozložení

Úplný výpis kódu úkolů znázorněných v tomto návodu najdete v tématu Uspořádání ovládacích prvků Windows Forms v ukázce WPF.

Po dokončení budete mít přehled o funkcích rozložení modelu Windows Forms v aplikacích založených na WPF.

Požadavky

K dokončení tohoto návodu potřebujete Visual Studio.

Vytvoření projektu

Pokud chcete vytvořit a nastavit projekt, postupujte takto:

  1. Vytvořte projekt aplikace WPF s názvem WpfLayoutHostingWf.

  2. V Průzkumníku řešení přidejte odkazy na následující sestavení:

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

  3. Dvojklikem na MainWindow.xaml jej otevřete v zobrazení XAML.

  4. Do elementu Window přidejte následující mapování oboru názvů Windows Forms.

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

  5. V elementu Grid nastavte vlastnost ShowGridLines na true a definujte pět řádků a tři sloupce.

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

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

Použití výchozího nastavení rozložení

Ve výchozím nastavení WindowsFormsHost element zpracovává rozložení hostovaného ovládacího prvku Windows Forms.

Pokud chcete použít výchozí nastavení rozložení, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

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

  2. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Ovládací prvek Windows Forms System.Windows.Forms.Button se zobrazí v Canvas. Hostovaný ovládací prvek má velikost na základě jeho obsahu a prvek WindowsFormsHost má velikost, aby vyhovoval hostovanýmu ovládacímu prvku.

Přizpůsobení velikosti obsahu

Prvek WindowsFormsHost zajišťuje, že hostovaný ovládací prvek má správnou velikost pro zobrazení jeho obsahu.

Pro přizpůsobení velikosti obsahu postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Dva nové ovládací prvky tlačítek mají velikost, aby správně zobrazily delší textový řetězec a větší velikost písma, a prvky WindowsFormsHost jsou změněny tak, aby vyhovovaly hostovaným ovládacím prvkům.

Použití absolutního umístění

K umístění prvku WindowsFormsHost kdekoli v uživatelském rozhraní můžete použít absolutní umístění.

Pokud chcete použít absolutní umístění, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Prvek WindowsFormsHost je umístěn 20 pixelů od horní strany mřížky a 20 pixelů zleva.

Explicitní určení velikosti

Velikost elementu WindowsFormsHost můžete určit pomocí vlastností Width a Height.

Pokud chcete explicitně zadat velikost, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Prvek WindowsFormsHost je nastaven na velikost 50 pixelů široký o 70 pixelů na výšku, což je menší než výchozí nastavení rozložení. Obsah ovládacího prvku Windows Forms se odpovídajícím způsobem přeuspořádá.

Nastavení vlastností rozložení

Vždy nastavte vlastnosti související s rozložením hostovaného ovládacího prvku pomocí vlastností WindowsFormsHost elementu. Nastavení vlastností rozložení přímo v hostovaném ovládacím prvku přinese nezamýšlené výsledky.

Nastavení vlastností souvisejících s rozložením u hostovaného ovládacího prvku v JAZYCE XAML nemá žádný vliv.

Chcete-li zobrazit účinky nastavení vlastností hostovaného ovládacího prvku, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. V Průzkumníku řešenídvojitě klikněte na MainWindow.xaml.vb nebo MainWindow.xaml.cs, abyste jej otevřeli v Editoru kódu.

  3. Do definice třídy MainWindow zkopírujte následující kód:

    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. Stisknutím klávesy F5 sestavte a spusťte aplikaci.

  5. Klikněte na tlačítko Klikněte na. Obslužná rutina události button1_Click nastaví vlastnosti Top a Left hostovaného ovládacího prvku. To způsobí, že hostovaný ovládací prvek se přemístí v rámci WindowsFormsHost elementu. Hostitel udržuje stejnou oblast obrazovky, ale hostovaný ovládací prvek je oříznutý. Místo toho by hostovaný ovládací prvek měl vždy vyplnit prvek WindowsFormsHost.

Pochopení omezení Z-řádu

Viditelné WindowsFormsHost prvky jsou vždy nakresleny nad jinými prvky WPF a nejsou ovlivněny pořadím vykreslování. K zobrazení tohoto chování z-orderu postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Prvek WindowsFormsHost překrývá prvek popisku.

Dokování

WindowsFormsHost prvek podporuje ukotvení WPF. Nastavte vlastnost připojenou Dock pro ukotvení hostovaného ovládacího prvku v elementu DockPanel.

Pokud chcete ukotvit hostovaný ovládací prvek, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Prvek WindowsFormsHost je ukotvený na pravé straně prvku DockPanel.

Nastavení viditelnosti

Ovládací prvek Windows Forms můžete nastavit jako neviditelný nebo ho sbalit nastavením vlastnosti Visibility prvku WindowsFormsHost. Když je ovládací prvek neviditelný, nezobrazí se, ale zabírá prostor rozložení. Když je ovládací prvek sbalený, nezobrazí se ani nezabírá místo v rozložení.

Pokud chcete nastavit viditelnost hostovaného ovládacího prvku, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. V MainWindow.xaml.vb nebo MainWindow.xaml.cszkopírujte do definice třídy následující kód:

    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. Stisknutím klávesy F5 sestavte a spusťte aplikaci.

  4. Kliknutím na tlačítko Kliknutím nastavíte neviditelné tlačítko, aby byl prvek WindowsFormsHost neviditelný.

  5. Kliknutím na tlačítko skryjete prvek WindowsFormsHost z rozložení zcela. Když je ovládací prvek Windows Forms sbalený, okolní prvky se přeuspořádají tak, aby zabíraly jeho prostor.

Umístění ovládacího prvku, který se neroztáhne

Některé ovládací prvky Windows Forms mají pevnou velikost a nedají se roztáhnout tak, aby vyplňovaly dostupné místo v rozložení. Například ovládací prvek MonthCalendar zobrazí měsíc v pevném prostoru.

Chcete-li hostovat ovládací prvek, který se neroztáhne, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Prvek WindowsFormsHost je vycentrovaný v řádku mřížky, ale není roztažen do dostupného prostoru. Pokud je okno dostatečně velké, mohou se zobrazit dva nebo více měsíců zobrazených hostovaným ovládacím prvkem MonthCalendar, ale jsou vycentrované ve středu řádku. Modul rozložení WPF vycentruje prvky, které nemohou být navrženy tak, aby vyplnily dostupné místo.

Škálování

Na rozdíl od elementů WPF není většina ovládacích prvků Windows Forms nepřetržitě škálovatelná. Pokud chcete poskytnout vlastní škálování, přepíšete metodu WindowsFormsHost.ScaleChild.

Pokud chcete škálovat hostovaný ovládací prvek pomocí výchozího chování, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Hostovaný ovládací prvek a jeho okolní prvky jsou škálovány faktorem 0,5. Písmo hostovaného ovládacího prvku však není škálováno.

Rotující

Na rozdíl od elementů WPF ovládací prvky Windows Forms nepodporují otočení. Prvek WindowsFormsHost se neotáčí s ostatními prvky WPF, když je použita transformace otočení. Jakákoli hodnota otočení jiná než 180 stupňů vyvolá událost LayoutError.

Pokud chcete zobrazit efekt rotace v hybridní aplikaci, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Hostovaný ovládací prvek není otočený, ale jeho okolní prvky jsou otočeny úhlem 180 stupňů. Možná budete muset změnit velikost okna, aby se zobrazily prvky.

Nastavení odsazení a okrajů

Odsazení a okraje v rozložení WPF se podobají odsazení a okrajům ve Windows Forms. Jednoduše nastavte vlastnosti Padding a Margin elementu WindowsFormsHost.

Pokud chcete nastavit odsazení a okraje pro hostovaný ovládací prvek, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

    <!-- 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. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Nastavení odsazení a okrajového nastavení se aplikují na hostované ovládací prvky Windows Forms stejným způsobem jako ve Windows Forms.

Použití kontejnerů dynamického rozložení

Windows Forms poskytuje dva kontejnery dynamického rozložení, FlowLayoutPanel a TableLayoutPanel. Tyto kontejnery můžete použít také v rozloženích WPF.

Pokud chcete použít kontejner dynamického rozložení, postupujte takto:

  1. Do elementu Grid zkopírujte následující KÓD XAML:

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

  2. V MainWindow.xaml.vb nebo MainWindow.xaml.cszkopírujte do definice třídy následující kód:

    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. Přidejte volání metody InitializeFlowLayoutPanel do konstruktoru:

    public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

    Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

  4. Stisknutím klávesy F5 sestavte a spusťte aplikaci. Prvek WindowsFormsHost vyplní DockPanela FlowLayoutPanel uspořádá své podřízené ovládací prvky do výchozího FlowDirection.

Viz také