逐步解說:在 Windows Presentation Foundation 中排列 Windows Form 控制項
更新:2007 年 11 月
這個逐步解說會顯示如何使用 WPF 配置功能在混合應用程式中排列 Windows Form 控制項。
逐步解說將說明的工作包括:
建立專案
使用預設配置設定
隨內容調整大小
使用絕對位置
明確指定大小
設定配置屬性
了解疊置順序 (Z-order) 限制
停駐
設定可視性
裝載不會自動縮放的控制項
縮放
旋轉
設定邊框距離和邊界
使用動態配置容器
如需這個逐步解說中所說明之工作的完整程式碼清單,請參閱在 Windows Presentation Foundation 中排列 Windows Form 控制項範例。
當您完成時,將對 WPF 架構應用程式中的 Windows Form 配置功能將會有更深入的了解。
注意事項: |
---|
根據目前使用的設定與版本,您所看到的對話方塊與功能表命令可能會與 [說明] 中所描述的不同。若要變更設定,請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊,請參閱 Visual Studio 設定。 |
必要條件
您需要下列元件才能完成此逐步解說:
- Visual Studio 2008
建立專案
若要建立並設定此專案
建立名稱為 WpfLayoutHostingWf 的 WPF 應用程式專案。
在 [方案總管] 中,加入名稱為 WindowsFormsIntegration.dll 之 WindowsFormsIntegration 組件的參考。
在 [方案總管] 中,加入名為 System.Windows.Forms.dll 之 System.Windows.Forms 組件的參考。同時加入名為 System.Drawing.dll 之 System.Drawing 組件的參考。
按兩下 Window1.xaml,在 [XAML] 檢視中開啟。
在檔案的一開始,對應 Windows Form 命名空間和下列程式碼。
<Window x:Class="Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" Title="Layout Demo for Interoperability" >
<Window x:Class="WpfLayoutHostingWfWithXaml.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" Title="Layout Demo for Interoperability" >
藉由建立五個列和三個欄,設定預設的 Grid 項目。
<Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions>
<Grid ShowGridLines="true"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions>
使用預設配置設定
根據預設,WindowsFormsHost 項目會處理已裝載之 Windows Form 控制項的配置。
若要使用預設配置設定
將下列程式碼複製到 Grid 項目中。
<!-- Default layout. --> <Canvas Grid.Row="0" Grid.Column="0"> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>
<!-- Default layout. --> <Canvas Grid.Row="0" Grid.Column="0"> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>
按 F5 建置並執行應用程式。Windows FormSystem.Windows.Forms.Button 控制項隨即顯示在 Canvas 中。已裝載的控制項會根據其內容調整大小,WindowsFormsHost 項目的大小會調整為可以以容納已裝載的控制項。
隨內容調整大小
WindowsFormsHost 項目會確保已裝載之控制項的大小能夠正確顯示其內容。
若要隨內容調整大小
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。兩個新的按鈕控制項會調整大小,以正確顯示更長的文字字串和更大的字型大小,而且 WindowsFormsHost 項目會重新調整大小以容納已裝載的控制項。
使用絕對位置
您可以使用絕對位置將 WindowsFormsHost 項目放置在使用者介面 (UI) 的任何地方。
若要使用絕對位置
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。WindowsFormsHost 項目放置於距格線儲存格頂端 20 像素及距左側 20 像素的位置。
明確指定大小
您可以使用 Width 和 Height 屬性來指定 WindowsFormsHost 項目的大小。
若要明確指定大小
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。WindowsFormsHost 項目會設為 50 像素寬乘以 70 像素高的大小,比預設配置設定還要小。Windows Form 控制項的內容會根據這個大小重新排列。
設定配置屬性
永遠藉由使用 WindowsFormsHost 項目的屬性設定已裝載之控制項上的配置相關屬性。直接在已裝載之控制項上設定配置屬性會產生非預期的結果。
在 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="button1Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/> </WindowsFormsHost> </Canvas>
<!-- Setting hosted control properties directly. --> <Canvas Grid.Row="0" Grid.Column="1"> <WindowsFormsHost Width="160" Height="50" Background="Yellow"> <wf:Button Name="button1" Click="button1Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/> </WindowsFormsHost> </Canvas>
按兩下 [方案總管] 中的 Window1.xaml.cs,在 [程式碼編輯器] 中開啟該檔案。
將下列程式碼複製到 Window1 類別定義中 Window1() 建構函式之後的位置。
Private Sub button1Click(ByVal sender As Object, ByVal e As EventArgs) Dim b As System.Windows.Forms.Button = sender b.Top = 20 b.Left = 20 End Sub
private void button1Click(object sender, EventArgs e ) { System.Windows.Forms.Button b = sender as System.Windows.Forms.Button; b.Top = 20; b.Left = 20; }
按 F5 建置並執行應用程式。
按一下 [Click me] 按鈕。button1Click 事件處理常式會在已裝載的控制項上設定 Top 和 Left 屬性。這會使已裝載的控制項重新調整在 WindowsFormsHost 項目內的位置。主項目會維持相同的螢幕區域,但是已裝載的控制項會遭到裁剪。已裝載的控制項應該一律會填滿 WindowsFormsHost 項目。
了解疊置順序 (Z-order) 限制
可見的 WindowsFormsHost 項目一定是在其他 WPF 項目的上層繪製,而且不會受到疊置順序影響。
若要查看疊置順序限制
在 Window1.xaml 檔案中,將下列程式碼複製到 Grid 項目中上一個程式碼範例之後。
<!-- Z-order demonstration. --> <Canvas Grid.Row="1" Grid.Column="1"> <Label Content="A WPF label" FontSize="24"/> <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>
<!-- Z-order demonstration. --> <Canvas Grid.Row="1" Grid.Column="1"> <Label Content="A WPF label" FontSize="24"/> <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>
按 F5 建置並執行應用程式。WindowsFormsHost 項目會繪製在標籤項目上。
停駐
WindowsFormsHost 項目支援 WPF 停駐。設定 Dock 附加屬性以停駐 DockPanel 項目中的已裝載控制項。
若要停駐已裝載的控制項
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。WindowsFormsHost 項目會停駐在 DockPanel 項目的右側。
設定可視性
您可以設定 WindowsFormsHost 項目上的 Visibility 屬性,使 Windows Form 控制項隱藏或摺疊。當控制項不可見時,就不會顯示出來,但是會佔據配置空間。當控制項摺疊時,不會顯示出來,也不會佔據配置空間。
若要設定已裝載控制項的可視性
將下列程式碼複製到 Grid 項目中上一個程式碼範例之後。
<!-- Setting Visibility to hidden and collapsed. --> <StackPanel Grid.Row="3" Grid.Column="1"> <Button Name="button2" Click="button2Click" 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="button3Click" Content="Click to collapse" Background="OrangeRed"/> </StackPanel>
<!-- Setting Visibility to hidden and collapsed. --> <StackPanel Grid.Row="3" Grid.Column="1"> <Button Name="button2" Click="button2Click" 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="button3Click" Content="Click to collapse" Background="OrangeRed"/> </StackPanel>
按兩下 [方案總管] 中的 Window1.xaml.cs,在 [程式碼編輯器] 中開啟該檔案。
將下列程式碼複製到 Window1 類別定義中。
Private Sub button2Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Me.host1.Visibility = Windows.Visibility.Hidden End Sub Private Sub button3Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Me.host1.Visibility = Windows.Visibility.Collapsed End Sub
private void button2Click(object sender, EventArgs e) { this.host1.Visibility = Visibility.Hidden; } private void button3Click(object sender, EventArgs e) { this.host1.Visibility = Visibility.Collapsed; }
按 F5 建置並執行應用程式。
按一下 [Click to make invisible] 按鈕,將 WindowsFormsHost 項目隱藏起來。
按一下 [Click to collapse] 按鈕,將 WindowsFormsHost 項目從配置中整個隱藏起來。當 Windows Form 控制項摺疊時,周圍項目會重新排列以使用其空間。
裝載不會自動縮放的控制項
部分 Windows Form 控制項有固定的大小,無法自動縮放以填滿配置中的可用空間。例如,MonthCalendar 控制項會以固定空間顯示月份。
若要裝載不會自動縮放的控制項
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。WindowsFormsHost 項目會置於格線列的中央,但是不會自動縮放以填滿可用空間。如果視窗夠大,可能會看到已裝載的 MonthCalendar 控制項顯示兩個以上的月份,但是都在列的中央。WPF 配置引擎會將無法調整大小以填滿可用空間的項目置中。
縮放
不像 WPF 項目,大多數 Windows Form 控制項都無法連續縮放。可能的話,WindowsFormsHost 項目就會縮放其裝載的控制項。
若要縮放已裝載控制項
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。已裝載的控制項及其周圍項目會以 0.5 的因數進行縮放。不過,已裝載之控制項的字型不會縮放。
旋轉
不像 WPF 項目,Windows Form 控制項不支援旋轉。當套用旋轉轉換時,WindowsFormsHost 項目不會與其他 WPF 項目一起旋轉。任何 180 度以外的旋轉值都會引發 LayoutError 事件。
若要查看混合應用程式中的旋轉效果
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。已裝載的控制項不會旋轉,但是其周圍項目會以 180 度的角度旋轉。
設定邊框距離和邊界
WPF 配置中的邊框距離和邊界與 Windows Form 中的邊框距離和邊界類似。只要設定 WindowsFormsHost 項目上的 Padding 和 Margin 屬性即可。
若要設定已裝載之控制項的邊框距離和邊界
將下列程式碼複製到 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>
<!-- 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>
按 F5 建置並執行應用程式。邊框距離和邊界設定會以在 Windows Form 中套用的相同方法,套用至已裝載的 Windows Form 控制項。
使用動態配置容器
Windows Form 提供兩個動態配置容器:FlowLayoutPanel 和 TableLayoutPanel。您也可以在 WPF 配置中使用這些容器。
若要使用動態配置容器
將下列程式碼複製到 Grid 項目中上一個程式碼範例之後。
<!-- Flow layout. --> <DockPanel Grid.Row="4" Grid.Column="2"> <WindowsFormsHost Name="flowLayoutHost" Background="Yellow"> <wf:FlowLayoutPanel/> </WindowsFormsHost> </DockPanel>
<!-- Flow layout. --> <DockPanel Grid.Row="4" Grid.Column="2"> <WindowsFormsHost Name="flowLayoutHost" Background="Yellow"> <wf:FlowLayoutPanel/> </WindowsFormsHost> </DockPanel>
按兩下 [方案總管] 中的 Window1.xaml.cs,在 [程式碼編輯器] 中開啟該檔案。
將下列程式碼複製到 Window1 類別定義中。
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
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); } }
在建構函式中,加入對 InitializeFlowLayoutPanel 方法的呼叫。
Public Sub New() InitializeComponent() Me.InitializeFlowLayoutPanel() End Sub
public Window1() { InitializeComponent(); this.InitializeFlowLayoutPanel(); }
按 F5 建置並執行應用程式。WindowsFormsHost 項目會填滿 DockPanel,FlowLayoutPanel 會以預設的 FlowDirection 排列其子控制項。
請參閱
工作
在 Windows Presentation Foundation 中排列 Windows Form 控制項範例
概念
逐步解說:在 Windows Presentation Foundation 中裝載 Windows Form 複合控制項
逐步解說:在 Windows Form 中裝載 Windows Presentation Foundation 控制項