Windows フォーム開発者向け WPF デザイナー
[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]
WPF Designer for Visual Studio には、Windows フォーム デザイナーとの類似点が多数ありますが、相違点もいくつかあります。 このトピックでは、これらの相違点の一部、および、Windows フォーム デザイナーで実行できるタスクを WPF Designerで行う方法について説明します。
XAML の重視
Windows フォーム デザイナーと WPF Designerの最大の相違点は分割ビューです。 分割ビューでは、デザイン サーフェイスと XAML マークアップを同時に表示することができます。 WPF Designerは、XAML ビューに重点を置き、IntelliSense など、アプリケーションの XAML に適したフル機能の編集環境を提供します。 XAML ビューを使用して、Windows フォーム デザイナーで実行できるタスクの多くを実行できます。 分割ビューでは、XAML ビューで編集した効果が表示されるので、即座に結果を確認できます。 分割ビューの詳細については、「分割ビュー : WPF デザイン サーフェイスと XAML を同時に表示する」を参照してください。
Visual Studio と共に Expression Blend を使用して、WPF Designer でサポートされていないタスクを行うこともできます。 詳細については、「Expression Blend との連携」を参照してください。
WPF デザイナーの機能強化
WPF Designerには、Windows フォーム デザイナーでは利用できない各種の機能強化が含まれています。 強化された機能は次のとおりです。
マージン線とマージン スタブ: 各コントロールを囲むマージン線は、そのコントロールにマージンが設定されていることを示します。 マージン スタブは、コントロールの端にマージンが設定されていないことを示します。
ズーム コントロール: デザイン ビューの左上に表示され、開発者はデザイン サーフェスの拡大/縮小によって正確な調整を行うことができます。 ズーム インすると、デザイン サーフェイス全体のパンを実行することもできます。
スナップ線: スナップ線は WPF Designerと Windows フォーム デザイナーのどちらにも表示されますが、WPF Designerには正確な値も表示されます。 スナップ線は、コントロールの配置を示すだけでなく、テキスト ベースのコントロールではテキストの配置も示します。 詳細については、「方法 : テキストのベースラインとマージンの両方に整列させる」を参照してください。
Windows フォーム デザイナーのタスクとそれに対応する WPF デザイナーの操作
次の表は、WPF Designerで各種タスクを行う方法を理解するのに役立つ対応表です。
Windows フォーム デザイナーのタスク |
対応する WPF デザイナーの操作 |
|---|---|
絶対レイアウト |
Canvas クラスをルート要素として使用します。 |
[プロパティ] ウィンドウのアルファベット順並べ替え |
[プロパティ] ウィンドウで、[アルファベット順] ボタンをクリックします。 プロパティを検索するには、[検索] ボックスを使用します。 XAML ビューまたはコード エディターで IntelliSense を使用することでプロパティを閲覧できます。 オブジェクト ブラウザーを使用することもできます。 |
固定 |
Grid およびデザイン ビューの固定機能を使用して固定対象を設定します。 |
アニメーション |
Expression Blend を使用します。 |
アプリケーション アイコン |
|
タブ オーダーの割り当て |
各コントロールを選択し、XAML ビューまたは [プロパティ] ウィンドウで対応する TabIndex プロパティを設定します。 既定のタブ オーダーは、親コンテナーでコントロールが表示される順序です。 |
コンポーネントおよびコンポーネント トレイ |
WPF Designerのツールボックスには、非可視のコンポーネントは表示されません。 XAML ビューおよび名前空間マッピングを使用して、リソースおよび非ローカル型を参照します。 詳細については、「方法 : 名前空間を XAML にインポートする」を参照してください。 |
[データ ソース] ウィンドウとデータ バインディング |
[データ ソース] の使用に関する詳細については、「Visual Studio でのデータへの WPF コントロールのバインド」を参照してください。 DesignInstance マークアップ拡張機能を使用することで、データのデザイン時のインスタンスにバインドできます。 詳細については、「チュートリアル: デザイナーでの DesignInstance によるデータへのバインド」を参照してください。 XML またはオブジェクトへのバインドの場合は、Expression Blend を使用してデータ ソースおよびデータ バインディングを定義することもできます。 自動生成された XAML をコピーし、WPF Designerの XAML ビューへ貼り付けます。 Expression Blend で Visual Studio プロジェクトを開き、リソースを直接作成することもできます。 |
イベント ハンドラーの宣言とアタッチ |
[プロパティ] ウィンドウで、[イベント] ボタンをクリックし、目的のイベントをダブルクリックします。 既定のイベント ハンドラーの場合は、デザイン ビューでコントロールをダブルクリックします。 XAML ビューで IntelliSense を使用して、目的のイベントを選択することもできます。 詳細については、「方法 : 単純なイベント ハンドラーを作成する」を参照してください。 |
メニューのデザイン |
XAML ビューを使用するか、Items コレクションの [プロパティ] ウィンドウでコレクション エディターを使用して各アイテムの Header プロパティを設定します。 |
ブラシおよびカラーの定義 |
[プロパティ] ウィンドウで、ブラシ型のプロパティまでスクロールし、下向き矢印をクリックします。 ブラシ エディターを使用して、ブラシをデザインできます。 詳細については、「方法: ブラシ エディターを使用してブラシを作成する」を参照してください。 Expression Blend を使用できます。 自動生成された XAML をコピーし、WPF Designerの XAML ビューへ貼り付けます。 Expression Blend で Visual Studio プロジェクトを開き、リソースを直接作成することもできます。 |
グリッド線の削除 |
グリッド線インジケーターをクリックし、そのインジケーターをグリッド レールからドラッグします。 詳細については、「方法 : グリッドから行と列を削除する」を参照してください。 XAML ビューを使用して、対応する行の定義または列の定義を削除し、親となっている Grid 内の関連する子コントロールの Grid.Column または Grid.Row の割り当てを調整することもできます。 |
イメージの表示 |
Image コントロールを使用します。 詳細については、「方法: WPF プロジェクトにイメージを追加する」を参照してください。 |
ツールボックスでの UserControl の表示 |
ユーザー コントロールのアセンブリへのプロジェクト参照を追加し、XAML ビューで IntelliSense を使用して xmlns 属性を割り当てます。 [ツールボックス アイテムの選択] ダイアログ ボックスを使用してコントロールが含まれるアセンブリを参照することもできますが、この方法には制限があります。 詳細については、「ツールボックス項目の選択項目、WPF コンポーネント」を参照してください。 |
フォーム全体へのコントロールの配置 |
StackPanel 要素を使用します。 |
ドッキング |
複数のコントロールに DockPanel 要素を使用します。 Grid を使用し、グリッド線へのスナップを使用して、グリッドのセルの境界線に合わせてコントロールをスナップさせることもできます。 |
エラー プロバイダー |
ビジュアル デザイン環境はありません。 XAML ビューで Validation クラスを使用します。 詳細については、「方法 : バインディングの検証の実装」を参照してください。 |
定義へ移動 |
分離コードで、シンボルを右クリックし、ショートカット メニューの [定義へ移動] を選択します。 XAML ビューから検索するには、プロジェクト内のすべての XAML ファイルを開き、[検索と置換] ウィンドウを使用します。 詳細については、「Find and Replace Window」を参照してください。 |
ヘルプ プロバイダー |
ビジュアル デザイン環境はありません。 XAML ビューを使用します。 |
Hyperlink |
フロー コンテンツ内で Hyperlink クラスを使用します。 |
ビジュアル デザイン環境はありません。 XAML ビューを使用します。 |
|
ロック |
サポートされていません。 |
ビジュアル デザイン環境はありません。 XAML ビューを使用します。 |
|
ニーモニック |
アンパサンド (&) の代わりにアンダースコア (_) をニーモニック文字の前に付けます。 |
[プロパティ] ウィンドウ内のオブジェクト選択ドロップダウン リスト |
[ドキュメント アウトライン] ウィンドウ、タグ ナビゲーター、またはデザイン ビューでオブジェクトを選択します。 [ドキュメント アウトライン] ウィンドウを表示するには、[表示] メニューの [その他のウィンドウ] をポイントし、[ドキュメント アウトライン] をクリックします。 |
ビジュアル デザイン環境はありません。 XAML ビューを使用します。 |
|
XAML での非ローカル型の参照 |
プロジェクト参照を追加し、XAML ビューで IntelliSense を使用して xmlns 属性を設定します。 詳細については、「方法 : 名前空間を XAML にインポートする」を参照してください。 .gif "Note") Note
WPF Designerは、clr-namespace を使用する完全な構文の代わりに、xmlns 属性の後の名前空間エイリアスに基づいて照合を試みます。
|
名前変更およびリファクタリング |
プロジェクト内のすべての XAML ファイルを開き、[検索と置換] ウィンドウを使用します。 詳細については、「Find and Replace Window」を参照してください。 |
マージンの削除 |
デザイン ビューで、マージンを削除する対象の要素をすべて選択します。 [プロパティ] ウィンドウで、Margin プロパティに「0」を入力します。 |
コントロール配置後のフォームのサイズ変更 |
ウィンドウのサイズを変更するとそのコンテンツのサイズも変更される場合があるので、次の処理を行います。 すべての要素を選択し、切り取ります。 次に、ウィンドウのサイズを変更し、切り取った要素を貼り付けます。 |
Button、Label、CheckBox、RadioButton の各コントロールのテキストの設定 |
[プロパティ] ウィンドウで、Content プロパティを設定します。 また、XAML ビューでもテキストを設定できます。 |
スマート タグ |
サポートされていません。 |
ツールヒント |
ビジュアル デザイン環境はありません。 XAML ビューで ToolTip クラスを使用します。 |
ビジュアル デザイン環境はありません。 XAML ビューを使用します。 |
|
ビジュアル継承 |
サポートされていません。 |
ビジュアル デザイン環境はありません。 XAML ビューを使用します。 |
|
z オーダー |
XAML ビューで要素タグを選択して移動するか、デザイン ビューでコンテキスト メニューの [順序] をクリックします。 要素の z オーダーを確認するには、[ドキュメント アウトライン] ウィンドウを使用します。 |
参照
概念
Windows フォーム コントロールおよび同等の WPF コントロール