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

更新 : 2007 年 11 月

Windows Presentation Foundation (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 とコード

リソースの使用