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

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

[前提条件]

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

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

注

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

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

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

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

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

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

両方の ElementHost コントロールは、新しいレイアウトに合わせてサイズが変更されます。

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

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

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

フォームでホストされている WPF コントロールには、他の Windows フォームコントロールと同じアンカーとドッキング動作があります。

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

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

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

elementHost3 コントロールは、フォーム上の残りのスペースを埋めるようにサイズが変更されます。
フォームのサイズを変更します。

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

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