次の方法で共有

チュートリアル : デザイン時の Windows フォームでの Windows Presentation Foundation コンテンツの配置

  • [アーティクル]

更新 : 2007 年 11 月

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

このチュートリアルでは次のタスクを行います。

  • プロジェクトを作成します。

  • WPF コントロールを作成します。

  • WPF コントロールをレイアウト パネルでホストします。

  • スナップ線を使用して WPF コントロールを整列します。

  • WPF コントロールを固定およびドッキングします。

Bb384314.alert_note(ja-jp,VS.90).gifメモ :

使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

前提条件

このチュートリアルを完了するには、次のコンポーネントが必要です。

  • Visual Studio 2008

プロジェクトの作成

まず、Windows フォーム プロジェクトを作成します。

Bb384314.alert_note(ja-jp,VS.90).gifメモ :

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

プロジェクトを作成するには

WPF コントロールの作成

プロジェクトに追加された WPF コントロールは、フォーム内で整列できます。

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

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

  2. デザイン ビューで UserControl1 が選択されていることを確認します。詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

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

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

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

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

WPF コントロールは、他の Windows フォーム コントロールの場合と同じように、レイアウト パネルで使用できます。

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

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

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

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

  4. TableLayoutPanel コントロールの幅と高さを大きくします。

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

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

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

  7. [ドキュメント アウトライン] ウィンドウで、tableLayoutPanel1 を選択します。詳細については、「[ドキュメント アウトライン] ウィンドウ」を参照してください。

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

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

スナップ線を使用したコントロールの整列

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

スナップ線を使用して WPF コントロールを整列するには

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

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

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

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

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

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

  6. elementHost3 を中央揃えスナップ線が再び表示されるまで TableLayoutPanel コントロールから遠ざけます。中央揃えスナップ線が 20 のマージンを示します。

  7. elementHost3 の左端が elementHost1 の左端に揃うまで右に動かします。

  8. elementHost3 の幅を右端が elementHost2 の右端に揃うまで変更します。

WPF コントロールの固定とドッキング

フォームでホストされている WPF コントロールでは、他の Windows フォーム コントロールと同じ固定およびドッキング動作が可能です。

WPF コントロールを固定およびドッキングするには

  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 コントロールで子コントロールを固定およびドッキングする」を参照してください。

参照

処理手順

方法 : TableLayoutPanel コントロールで子コントロールを固定およびドッキングする

方法 : デザイン時にフォームの端に合わせてコントロールを配置する

チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置

参照

ElementHost

WindowsFormsHost

その他の技術情報

移行と相互運用性

Windows Presentation Foundation コントロールの使用

WPF デザイナ