共用方式為

逐步解說：在 WPF 中排列 Windows Form 控制項

  • 發行項

本逐步解說說明如何使用 WPF 版面配置功能，在混合式應用程式中排列 Windows Forms 控制項。

這個逐步解說中所述的工作包括：

  • 建立專案。
  • 使用預設的版面配置設定。
  • 依內容調整大小。
  • 使用絕對位置。
  • 明確指定大小。
  • 設定版面配置屬性。
  • 了解疊置順序的限制。
  • 停駐。
  • 設定可見度。
  • 裝載不會自動縮放的控制項。
  • 調整大小。
  • 旋轉。
  • 設定邊框距離及邊界。
  • 使用動態版面配置容器。

如需本逐步解說中所述工作的完整程式碼清單， 請參閱 在 WPF 中排列 Windows Form 控制項範例。

當您完成時，您將瞭解 WPF 型應用程式中的 Windows Forms 版面配置功能。

必要條件

若要完成這個逐步解說，您必須具有 Visual Studio。

建立專案

若要建立和設定專案，請遵循下列步驟：

  1. 建立名為 WpfLayoutHostingWf 的 WPF 應用程式專案。

  2. 在 方案總管中，新增下列元件的參考：

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

  3. 按兩下 MainWindow.xaml ，以在 XAML 檢視中開啟它。

  4. 在 元素中 Window ，新增下列 Windows Forms 命名空間對應。

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

  5. 在 元素中 Grid ，將 ShowGridLines 屬性設定為 true ，並定義五個數據列和三個數據行。

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

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

使用預設的版面配置設定

根據預設，元素 WindowsFormsHost 會處理託管 Windows Forms 控制項的配置。

若要使用預設版面配置設定，請遵循下列步驟：

  1. 將下列 XAML Grid 複製到 元素：

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

  2. 按 F5 以建置並執行應用程式。 Windows Forms System.Windows.Forms.Button 控制項會出現在 中 Canvas 。 裝載的控制項會根據其內容來調整大小，而 WindowsFormsHost 元素會調整大小以容納裝載的控制項。

依內容調整大小

元素 WindowsFormsHost 可確保裝載的控制項大小正確顯示其內容。

若要調整內容大小，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 這兩個新的按鈕控制項會調整大小，以正確顯示較長的文字字串和較大的字型大小，而且會 WindowsFormsHost 調整大小以容納裝載的控制項。

使用絕對位置

您可以使用絕對位置將元素放在 WindowsFormsHost 使用者介面 （UI） 中的任何位置。

若要使用絕對位置，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 元素 WindowsFormsHost 會從格線儲存格的頂端放置 20 圖元，而左邊則為 20 圖元。

明確指定大小

您可以使用 和 Height 屬性來指定專案 Width 的大小 WindowsFormsHost 。

若要明確指定大小，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 元素 WindowsFormsHost 的大小會設定為 50 圖元寬 70 圖元高，小於預設版面配置設定。 Windows Forms 控制項的內容會據以重新排列。

設定版面配置屬性

一律使用 元素的屬性 WindowsFormsHost ，在裝載的控制項上設定配置相關屬性。 直接在裝載的控制項上設定版面配置屬性，將產生非預期的結果。

在 XAML 中裝載的控制項上設定版面配置相關屬性沒有任何作用。

若要查看在託管控制項上設定屬性的效果，請遵循下列步驟：

  1. 將下列 XAML 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. 在 方案總管 中，按兩下 MainWindow.xaml.vb 或 MainWindow.xaml.cs ，在程式碼編輯器中開啟它。

  3. 將下列程式碼複製到 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. 按 F5 以建置並執行應用程式。

  5. 按一下 [ 按一下我 ] 按鈕。 事件處理常式會在 button1_Click 裝載的 控制項上設定 Top 和 Left 屬性。 這會導致裝載的控制項重新置放在 元素內 WindowsFormsHost 。 主機會維持相同的螢幕區域，但會裁剪裝載的控制項。 相反地，裝載的控制項應該一律填滿 WindowsFormsHost 元素。

了解疊置順序的限制

可見 WindowsFormsHost 元素一律會繪製在其他 WPF 元素之上，而且不受迭置順序影響。 若要查看此迭置順序行為，請執行下列動作：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 元素 WindowsFormsHost 會繪製在標籤專案上。

銜接

WindowsFormsHost 元素支援 WPF 停駐。 將 Dock 附加屬性設定為將裝載控制項停駐在 元素中 DockPanel 。

若要停駐裝載的控制項，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 專案 WindowsFormsHost 停駐在元素的 DockPanel 右側。

設定可見度

您可以藉由在 元素上 WindowsFormsHost 設定 Visibility 屬性，讓 Windows Forms 控制項不可見或折迭它。 當控制項隱藏時，它不會顯示，但會佔據版面配置空間。 當控制項摺疊時，它不會顯示，也不會佔據配置空間。

若要設定託管控制項的可見度，請遵循下列步驟：

  1. 將下列 XAML 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. 在 MainWindow.xaml.vb 或 MainWindow.xaml.cs 中，將下列程式碼複製到類別定義中：

    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. 按 F5 以建置並執行應用程式。

  4. 按一下 [按一下即可使不可見 ] 按鈕使專案 WindowsFormsHost 不可見。

  5. 按一下 [按一下以折迭 ] 按鈕，將元素完全隱藏 WindowsFormsHost 在版面配置中。 當 Windows Forms 控制項折迭時，周圍元素會重新排列以佔用其空間。

裝載不會自動縮放的控制項

某些 Windows Forms 控制項具有固定的大小，而且不會延展以填滿版面配置中的可用空間。 例如，控制項會在 MonthCalendar 固定空間中顯示月份。

若要裝載不會延展的控制項，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 元素 WindowsFormsHost 會置中于格線列中，但不會延展以填滿可用空間。 如果視窗夠大，您可能會看到主 MonthCalendar 控控制項顯示兩個以上的月份，但這些月會置中于資料列中。 WPF 配置引擎會將無法調整大小以填滿可用空間的專案置中。

調整大小

與 WPF 元素不同，大部分的 Windows Forms 控制項都無法持續調整。 若要提供自訂調整，您可以覆寫 WindowsFormsHost.ScaleChild 方法。

若要使用預設行為調整裝載的控制項，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 裝載的控制項及其周圍元素會縮放 0.5 倍。 不過，裝載控制項的字型不會進行縮放。

旋轉

不同于 WPF 元素，Windows Forms 控制項不支援旋轉。 套用旋轉轉換時，專案 WindowsFormsHost 不會與其他 WPF 元素一起旋轉。 180 度以外的任何旋轉值會 LayoutError 引發 事件。

若要查看混合式應用程式中旋轉的效果，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 裝載的控制項不會旋轉，但其周圍元素會旋轉 180 度。 您可能必須調整視窗大小來查看元素。

設定邊框距離及邊界

WPF 版面配置中的邊框間距和邊界類似于 Windows Forms 中的邊框間距和邊界。 只要在 專案上 WindowsFormsHost 設定 Padding 和 Margin 屬性即可。

若要設定託管控制項的邊框間距和邊界，請遵循下列步驟：

  1. 將下列 XAML 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. 按 F5 以建置並執行應用程式。 邊框間距和邊界設定會套用至裝載的 Windows Forms 控制項，就像在 Windows Forms 中套用一樣。

使用動態版面配置容器

Windows Forms 提供兩個動態配置容器和 FlowLayoutPanelTableLayoutPanel 。 您也可以在 WPF 配置中使用這些容器。

若要使用動態配置容器，請遵循下列步驟：

  1. 將下列 XAML Grid 複製到 元素：

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

  2. 在 MainWindow.xaml.vb 或 MainWindow.xaml.cs 中，將下列程式碼複製到類別定義中：

    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. 在建構函式中新增 InitializeFlowLayoutPanel 方法的呼叫：

    public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

    Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

  4. 按 F5 以建置並執行應用程式。 元素 WindowsFormsHost 會 DockPanel 填滿 ，並在 FlowLayoutPanel 預設 FlowDirection 中排列其子控制項。

另請參閱