チュートリアル: デザイン時に Windows フォームに WPF コンテンツを配置する

この記事では、固定やスナップ線などの Windows フォームのレイアウト機能を使用して、Windows Presentation Foundation (WPF) コントロールを配置する方法を説明します。

必須コンポーネント

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

Visual Studio を開き、ArrangeElementHost という名前の新しい Windows フォームアプリケーションプロジェクトを Visual Basic または Visual C# で作成します。

注意

WPF コンテンツをホストする場合は、C# プロジェクトと Visual Basic プロジェクトのみがサポートされます。

プロジェクトに WPF コントロール型を追加したら、フォーム状に配置できます。

新しい WPF UserControl をプロジェクトに追加します。コントロール型の既定の名前である UserControl1.xaml を使用します。詳細については、「チュートリアル: デザイン時の Windows フォームでの新しい WPF コンテンツの作成」を参照してください。
デザインビューで UserControl1 が選択されていることを確認します。
[プロパティ] ウィンドウで、Width プロパティおよび Height プロパティの値を 200 に設定します。
Background プロパティの値を [青] に設定します。
プロジェクトをビルドします。

その他の Windows フォームコントロールを使用するのと同じ方法で、レイアウトパネルで WPF コントロールを使用できます。

Windows フォームデザイナーで Form1 を開きます。
ツールボックスで、TableLayoutPanel コントロールをフォームにドラッグします。
TableLayoutPanel コントロールのスマートタグパネルで、 [最後の行を削除する] を選択します。
幅と高さが大きくなるよう TableLayoutPanel コントロールのサイズを変更します。
ツールボックスで UserControl1 をダブルクリックして、TableLayoutPanel コントロールの最初のセルに UserControl1 のインスタンスを作成します。

UserControl1 のインスタンスは、elementHost1 という名前の新しい ElementHost コントロールでホストされます。
ツールボックスで UserControl1 をダブルクリックして、TableLayoutPanel コントロールの 2 番目のセルの別のインスタンスを作成します。
[ドキュメントアウトライン] ウィンドウで、tableLayoutPanel1 を選択します。
[プロパティ] ウィンドウで、Padding プロパティの値を 10, 10, 10, 10 に設定します。

両方の ElementHost コントロールが、新しいレイアウトに収まるようにサイズ変更されました。

スナップ線により、フォームのコントロールの配置を簡単に調整できます。スナップ線を使用して、WPF コントロールも配置することができます。詳細については、「チュートリアル: スナップ線を使用した Windows フォーム上のコントロールの配置」を参照してください。

ツールボックスから、UserControl1 のインスタンスをフォームにドラッグして、TableLayoutPanel コントロールの下の領域に配置します。

UserControl1 のインスタンスは、elementHost3 という名前の新しい ElementHost コントロールでホストされます。
スナップ線を使用して、elementHost3 の左端を TableLayoutPanel コントロールの左端に揃えます。
スナップ線を使用して、elementHost3 のサイズを TableLayoutPanel コントロールと同じ幅にします。
コントロール間に中央揃えのスナップ線が表示されるまでelementHost3 を TableLayoutPanel コントロールの方へ移動します。
[プロパティ] ウィンドウで、Margin プロパティの値を 20, 20, 20, 20 に設定します。
中央揃えのスナップ線がもう一度表示されるまで、elementHost3 を TableLayoutPanel コントロールから移動します。中央揃えのスナップ線が、余白 20 を示すようになりました。
左端が elementHost1 の左端に配置されるまで、elementHost3 を右に移動します。
右端が elementHost2 の右端に配置されるまで、elementHost3 の幅を変更します。

フォームでホストされている WPF コントロールは、他の Windows フォームコントロールと同じ固定とドッキングの動作を持ちます。

[elementHost1] を選択します。
[プロパティ] ウィンドウで、Anchor プロパティを [Top, Bottom, Left, Right] に設定します。
TableLayoutPanel コントロールを大きなサイズに変更します。

elementHost1 コントロールがセルを満たすようサイズ変更されます。
[elementHost2] を選択します。
[プロパティ] ウィンドウで、Dock プロパティの値を Fill に設定します。

elementHost2 コントロールがセルを満たすようサイズ変更されます。
TableLayoutPanel コントロールを選択します。
Dock プロパティの値を Top に設定します。
[elementHost3] を選択します。
Dock プロパティの値を Fill に設定します。

elementHost3 コントロールが、フォームの残りの領域を満たすようサイズ変更されます。
フォームのサイズを変更します。

3 つすべての ElementHost コントロールのサイズを適切に変更します。

詳細については、「方法: TableLayoutPanel コントロールで子コントロールを固定およびドッキングする」を参照してください。