次の方法で共有

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

  • [アーティクル]

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

必須コンポーネント

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

プロジェクトの作成

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

注意

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

WPF コントロールを作成する

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

  1. 新しい WPF UserControl をプロジェクトに追加します。 コントロール型の既定の名前である UserControl1.xaml を使用します。 詳細については、「チュートリアル: デザイン時の Windows フォームでの新しい WPF コンテンツの作成」を参照してください。

  2. デザイン ビューで UserControl1 が選択されていることを確認します。

  3. [プロパティ] ウィンドウで、Width プロパティおよび Height プロパティの値を 200 に設定します。

  4. Background プロパティの値を [青] に設定します。

  5. プロジェクトをビルドします。

レイアウト パネルで WPF コントロールをホストする

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

  1. Windows フォーム デザイナーで Form1 を開きます。

  2. ツールボックスで、TableLayoutPanel コントロールをフォームにドラッグします。

  3. TableLayoutPanel コントロールのスマート タグ パネルで、 [最後の行を削除する] を選択します。

  4. 幅と高さが大きくなるよう TableLayoutPanel コントロールのサイズを変更します。

  5. ツールボックスで UserControl1 をダブルクリックして、TableLayoutPanel コントロールの最初のセルに UserControl1 のインスタンスを作成します。

    UserControl1 のインスタンスは、elementHost1 という名前の新しい ElementHost コントロールでホストされます。

  6. ツールボックスで UserControl1 をダブルクリックして、TableLayoutPanel コントロールの 2 番目のセルの別のインスタンスを作成します。

  7. [ドキュメント アウトライン] ウィンドウで、tableLayoutPanel1 を選択します。

  8. [プロパティ] ウィンドウで、Padding プロパティの値を 10, 10, 10, 10 に設定します。

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

WPF コントロールを配置するスナップ線を使用する

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

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

    UserControl1 のインスタンスは、elementHost3 という名前の新しい ElementHost コントロールでホストされます。

  2. スナップ線を使用して、elementHost3 の左端を TableLayoutPanel コントロールの左端に揃えます。

  3. スナップ線を使用して、elementHost3 のサイズを TableLayoutPanel コントロールと同じ幅にします。

  4. コントロール間に中央揃えのスナップ線が表示されるまでelementHost3 を TableLayoutPanel コントロールの方へ移動します。

  5. [プロパティ] ウィンドウで、Margin プロパティの値を 20, 20, 20, 20 に設定します。

  6. 中央揃えのスナップ線がもう一度表示されるまで、elementHost3 を TableLayoutPanel コントロールから移動します。 中央揃えのスナップ線が、余白 20 を示すようになりました。

  7. 左端が elementHost1 の左端に配置されるまで、elementHost3 を右に移動します。

  8. 右端が elementHost2 の右端に配置されるまで、elementHost3 の幅を変更します。

WPF コントロールを固定してドッキングする

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

  1. [elementHost1] を選択します。

  2. [プロパティ] ウィンドウで、Anchor プロパティを [Top, Bottom, Left, Right] に設定します。

  3. TableLayoutPanel コントロールを大きなサイズに変更します。

    elementHost1 コントロールがセルを満たすようサイズ変更されます。

  4. [elementHost2] を選択します。

  5. [プロパティ] ウィンドウで、Dock プロパティの値を Fill に設定します。

    elementHost2 コントロールがセルを満たすようサイズ変更されます。

  6. TableLayoutPanel コントロールを選択します。

  7. Dock プロパティの値を Top に設定します。

  8. [elementHost3] を選択します。

  9. Dock プロパティの値を Fill に設定します。

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

  10. フォームのサイズを変更します。

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

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

関連項目