チュートリアル: WPF での Windows フォームコントロールの配置

[アーティクル]
01/24/2025

このチュートリアルでは、WPF レイアウト機能を使用して、ハイブリッドアプリケーションで Windows フォームコントロールを配置する方法について説明します。

このチュートリアルで説明するタスクは次のとおりです。

プロジェクトの作成。
既定のレイアウト設定を使用する。
コンテンツに合わせたサイズ調整
絶対配置の使用。
サイズを明示的に指定する。
レイアウトプロパティの設定。
z オーダーの制限事項について説明します。
ドッキング。
可視性の設定。
伸縮しないコントロールのホスト。
拡大縮小。
回転中。
パディングと余白の設定。
動的レイアウトコンテナーの使用。

このチュートリアルで示すタスクの完全なコード一覧については、「WPF サンプルでの Windows フォームコントロールの配置」を参照してください。

完了すると、WPF ベースのアプリケーションの Windows フォームレイアウト機能について理解できるようになります。

前提条件

このチュートリアルを完了するには、Visual Studio が必要です。

プロジェクトの作成

プロジェクトを作成して設定するには、次の手順に従います。

WpfLayoutHostingWfという名前の WPF アプリケーションプロジェクトを作成します。
ソリューションエクスプローラーで、次のアセンブリへの参照を追加します。
- WindowsFormsIntegration
- System.Windows.Forms
- System.Drawing
MainWindow.xaml ダブルクリックして XAML ビューで開きます。
Window 要素に、次の Windows フォーム名前空間マッピングを追加します。
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```

Grid 要素で、ShowGridLines プロパティを true に設定し、5 つの行と 3 つの列を定義します。

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

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

既定のレイアウト設定の使用

既定では、WindowsFormsHost 要素は、ホストされている Windows フォームコントロールのレイアウトを処理します。

既定のレイアウト設定を使用するには、次の手順に従います。

次の XAML を Grid 要素にコピーします。

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

F5 押して、アプリケーションをビルドして実行します。 Windows フォーム System.Windows.Forms.Button コントロールが Canvasに表示されます。ホストされるコントロールはコンテンツに基づいてサイズが設定され、WindowsFormsHost 要素はホストされたコントロールに合わせてサイズが調整されます。

コンテンツに合わせたサイズの変更

WindowsFormsHost 要素により、ホストされるコントロールのコンテンツが適切に表示されるようにサイズが設定されます。

コンテンツのサイズを変更するには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。 2 つの新しいボタンコントロールは、長いテキスト文字列と大きなフォントサイズを適切に表示するようにサイズ変更され、WindowsFormsHost 要素はホストされているコントロールに合わせてサイズ変更されます。

絶対配置の使用

絶対配置を使用して、ユーザーインターフェイス (UI) 内の任意の場所に WindowsFormsHost 要素を配置できます。

絶対配置を使用するには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。 WindowsFormsHost 要素は、グリッドセルの上部から 20 ピクセル、左から 20 ピクセル配置されます。

サイズを明示的に指定する

Width プロパティと Height プロパティを使用して、WindowsFormsHost 要素のサイズを指定できます。

サイズを明示的に指定するには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。 WindowsFormsHost 要素は、幅 50 ピクセル、高さ 70 ピクセルのサイズに設定され、既定のレイアウト設定よりも小さくなります。 Windows フォームコントロールの内容は、それに応じて再配置されます。

レイアウトプロパティの設定

WindowsFormsHost 要素のプロパティを使用して、ホストされているコントロールにレイアウト関連のプロパティを常に設定します。ホストされたコントロールにレイアウトプロパティを直接設定すると、意図しない結果が得られます。

XAML でホストされているコントロールにレイアウト関連のプロパティを設定しても効果はありません。

ホストされたコントロールにプロパティを設定した場合の影響を確認するには、次の手順に従います。

次の 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>

ソリューションエクスプローラーで、MainWindow.xaml.vb をダブルクリックするか、MainWindow.xaml.cs してコードエディターで開きます。

次のコードを 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

F5 押して、アプリケーションをビルドして実行します。
[ここをクリック] ボタンをクリックします。 button1_Click イベントハンドラーは、ホストされたコントロールの Top プロパティと Left プロパティを設定します。これにより、ホストされたコントロールが WindowsFormsHost 要素内で再配置されます。ホストは同じ画面領域を保持しますが、ホストされたコントロールはクリップされます。そうではなく、ホストされているコントロールが常に WindowsFormsHost 要素に合わせてサイズが変更されるようにする必要があります。

Z オーダーの制限事項について

表示 WindowsFormsHost 要素は常に他の WPF 要素の上に描画され、z オーダーの影響を受けません。この z オーダー動作を確認するには、次の操作を行います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。 WindowsFormsHost 要素は、ラベル要素の上に描画されます。

ドッキング

WindowsFormsHost 要素は WPF ドッキングをサポートします。 Dock 添付プロパティを設定して、ホストされているコントロールを DockPanel 要素にドッキングします。

ホストされているコントロールをドッキングするには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。 WindowsFormsHost 要素は、DockPanel 要素の右側にドッキングされます。

可視性の設定

WindowsFormsHost 要素に Visibility プロパティを設定することで、Windows フォームコントロールを非表示にしたり折りたたんだりすることができます。非表示のコントロールは表示されませんが、レイアウト空間を占有します。コントロールを折りたたむと、そのコントロールは表示されず、レイアウト空間も使用されません。

ホストされたコントロールの可視性を設定するには、次の手順に従います。

次の 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>

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

F5 押して、アプリケーションをビルドして実行します。
[クリックして非表示にする] ボタンをクリックして WindowsFormsHost 要素を非表示にします。
[クリックして折りたたむ] ボタンをクリックして、レイアウトから WindowsFormsHost 要素を完全に非表示にします。 Windows フォームコントロールが折りたたまれると、周囲の要素はスペースを占有するように再配置されます。

伸縮しないコントロールをホストする

一部の Windows フォームコントロールには固定サイズがあり、レイアウトで使用可能な領域を埋めるために拡張されません。たとえば、MonthCalendar コントロールでは、固定スペースに月が表示されます。

ストレッチしないコントロールをホストするには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。 WindowsFormsHost 要素はグリッド行の中央に配置されますが、使用可能な領域を埋めるために引き伸ばされません。ウィンドウが十分に大きい場合は、ホストされている MonthCalendar コントロールによって複数の月が表示されることがありますが、これらの月は、横一列の中央に配置されます。 WPF レイアウトエンジンは、使用可能な領域に合わせてサイズを変更できない要素を中心に配置します。

拡大縮小

WPF 要素とは異なり、ほとんどの Windows フォームコントロールは継続的にスケーラブルではありません。カスタムスケーリングを提供するには、WindowsFormsHost.ScaleChild メソッドをオーバーライドします。

既定の動作を使用してホストされているコントロールをスケーリングするには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。ホストされたコントロールとその周囲の要素は、0.5 の係数でスケーリングされます。ただし、ホストされているコントロールのフォントは拡大縮小されません。

回転

WPF 要素とは異なり、Windows フォームコントロールは回転をサポートしていません。 WindowsFormsHost 要素は、回転変換が適用されるときに、他の WPF 要素と共に回転しません。 180 度以外の回転値を指定すると、LayoutError イベントが発生します。

ハイブリッドアプリケーションでのローテーションの影響を確認するには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。ホストされたコントロールは回転されませんが、周囲の要素は 180 度の角度で回転します。要素を表示するには、ウィンドウのサイズを変更する必要がある場合があります。

パディングと余白の設定

WPF レイアウトのパディングと余白は、Windows フォームのパディングと余白に似ています。 WindowsFormsHost 要素に Padding プロパティと Margin プロパティを設定するだけです。

ホストされたコントロールのパディングと余白を設定するには、次の手順に従います。

次の 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>

F5 押して、アプリケーションをビルドして実行します。パディングと余白の設定は、Windows フォームで適用されるのと同じ方法で、ホストされている Windows フォームコントロールに適用されます。

動的レイアウトコンテナーの使用

Windows フォームには、FlowLayoutPanel と TableLayoutPanelの 2 つの動的レイアウトコンテナーが用意されています。これらのコンテナーは、WPF レイアウトでも使用できます。

動的レイアウトコンテナーを使用するには、次の手順に従います。

次の XAML を Grid 要素にコピーします。

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

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

コンストラクターで InitializeFlowLayoutPanel メソッドの呼び出しを追加します。

public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

F5 押して、アプリケーションをビルドして実行します。 WindowsFormsHost 要素は DockPanelを塗りつぶし、FlowLayoutPanel は、その子コントロールを既定の FlowDirectionに配置します。

次の方法で共有

チュートリアル: WPF での Windows フォームコントロールの配置

前提条件

プロジェクトの作成

既定のレイアウト設定の使用

コンテンツに合わせたサイズの変更

絶対配置の使用

サイズを明示的に指定する

レイアウトプロパティの設定

Z オーダーの制限事項について

ドッキング

可視性の設定

伸縮しないコントロールをホストする

拡大縮小

回転

パディングと余白の設定

動的レイアウトコンテナーの使用

関連項目

その他のリソース

次の方法で共有

チュートリアル: WPF での Windows フォーム コントロールの配置

前提 条件

プロジェクトの作成

既定のレイアウト設定の使用

コンテンツに合わせたサイズの変更

絶対配置の使用

サイズを明示的に指定する

レイアウトプロパティの設定

Z オーダーの制限事項について

ドッキング

可視性の設定

伸縮しないコントロールをホストする

拡大縮小

回転

パディングと余白の設定

動的レイアウト コンテナーの使用

関連項目

その他のリソース

チュートリアル: WPF での Windows フォームコントロールの配置

前提条件

動的レイアウトコンテナーの使用