分割ビュー : WPF デザイン サーフェイスと XAML を同時に表示する

WPF Designer for Visual Studio は、分割ビューというビューをサポートしています。 分割ビューでは、XAML マークアップとビジュアル デザイナーを同時に表示できます。 ビジュアル デザイナーで行った変更は、直ちに XAML マークアップに反映されます。同様に、XAML マークアップ側の変更もビジュアル デザイナーに反映されます。 ここでは、分割ビューの使用方法と設定方法について説明します。

分割ビュー

分割ビューは、バーによって区切られた 2 つのペインで構成されます。 一方のペインには、現在のウィンドウまたはユーザー コントロールのデザイン ビューが表示されます。 このペインでは、Windows フォームを使用するプログラマが慣れ親しんだドラッグ アンド ドロップ方式のアプリケーション開発が可能です。 もう 1 つのペインには、現在のウィンドウまたはユーザー コントロールの XAML ビューが表示されます。 この XAML マークアップは完全に編集可能であり、IntelliSense にも対応しています。 このペインで適切なマークアップを入力することにより、XAML 要素の編集、属性の追加、新しい要素の追加を XAML に対して直接行うことができます。

分割ビューの 2 つのペインは同期しているため、一方のペインに変更を加えると、もう一方のペインが更新されます。 たとえば、[ツールボックス] からデザイン ビューにコントロールをドラッグすると、XAML が直ちに更新され、新しい要素の追加が反映されます。 同様に、XAML ビューでマークアップを入力して新しい要素を追加すると、XAML の形式に誤りがない限り、その要素の視覚的表現がデザイン ビューに表示されます。

分割ビュー

分割ビューの設定

各プログラマのプログラミング スタイルや好みに合わせて分割ビューを設定することができます。 2 つのペインを区切るバーをマウスで移動できるので、各ペインの相対的なサイズを変更できます。 バーには、分割ビューの外観を変更するアイコンがあります。 [デザイン] タブと [XAML] タブの間にあるペイン交換アイコンをクリックすると、ペインの位置が入れ替わります。 バー上でグループ化された 3 つのアイコンでは、ペインが左右に表示される垂直ビューとペインが上下に表示される水平ビューの切り替えや、下側のペインの折りたたみと展開を行うことができます。 一方のペインを折りたたんだ状態で、バー上のタブをクリックすることにより、デザイン ビューと XAML ビューを切り替えることができます。 バーをダブルクリックすると、折りたたみ/展開アイコンをクリックした場合と同じ結果になります。 タブをダブルクリックすると、対応するペインがウィンドウ全体に表示されます。 ペインのレイアウトは、プロジェクト内の各ドキュメントと共に保存されます。

参照

概念

WPF ドキュメントの要素階層内の移動

その他の技術情報

WPF デザイナーの XAML とコード

リソースの使用