WPF および Silverlight デザイナーの概要

更新 : 2011 年 3 月

WPF および Silverlight デザイナーでは、WPF および Silverlight アプリケーションを作成するためのビジュアル デザインをサポートします。 ツールボックスからコントロールをドラッグしたり [プロパティ] ウィンドウでプロパティを設定したりすることによって、アプリケーションのユーザー インターフェイスをビルドできます。 XAML を XAML エディターで直接編集することもできます。 次の図は、WPF および Silverlight デザイナーとそれに対応するウィンドウを示しています。

WPF および Silverlight デザイナーを初めて起動すると、Visual Studio の左側に [データ ソース] ウィンドウと [ドキュメント アウトライン] ウィンドウが折りたたまれています。 左側にあるタブを表示して固定すると、前のビューが表示されます。このビューは、デザイン サーフェイスを使用するのに便利な配置です。

このトピックは、次のセクションで構成されています。

• デザイン ビュー

• XAML ビュー

• プロパティ ウィンドウ

• データ ソース ウィンドウ

• [ドキュメント アウトライン] ウィンドウ

• 充実した対話形式のユーザー インターフェイスの構築

• Expression Blend との連携

デザイン ビュー

デザイン ビューは、WPF および Silverlight のコントロールやアプリケーションをビルドするためのビジュアルなデザイン サーフェイスを提供します。 このビューには、現在 XAML ビューにある XAML のレンダリングが表示されます。 デザイン画面上でコントロールを変更すると、XAML ビューが更新されて変更が反映されます。 デザイン ビューには、WPF アプリケーションのウィンドウまたはページにコントロールを配置するための機能が用意されています。 デザイン ビューの機能の一部を次に示します。

ズーム

ズーム コントロールを使用して、デザイン サーフェイスのサイズを調整します。 10% から 20 倍までの範囲でズームできます。 ズーム設定はソリューションの .suo ファイルに保存されます。

パン

デザイン サーフェイスをズーム インし、水平スクロール バーや垂直スクロール バーが表示された場合は、パンすることによって画面に表示されていないデザイン サーフェイス部分を表示できます。 パンするには、Space キーを押しながらデザイン サーフェイスをドラッグします。

"ビューに合わせる" ボタン

[ビューに合わせる] ボタンを使用して、デザイン画面をデザイン ビューの使用可能な画面のサイズに合わせて調整します。 これは、非常に高い拡大率または縮小率でサイズ変更したときに便利です。

グリッド レール

グリッド レールを使用して、Grid コントロールの行と列を制御します。 列と行を作成および削除したり、列と行の相対的な幅や高さを調整したりできます。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

グリッド線

グリッド線を使用して、Grid の列と行の幅や高さを制御します。 Grid の上や左にあるレールをクリックして、新しい列または行を追加できます。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

グリッド線インジケーター

グリッド線インジケーターは、グリッド レール内に表示される三角形のマークです。 グリッド線インジケーターまたはグリッド線自体をドラッグすると、隣接する列または行の幅または高さがマウスの移動に従って更新されます。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

移動ハンドル

選択したパネル コントロールの左上隅に移動ハンドルが表示されます。これを使用してパネルを移動できます。 移動ハンドルをクリックしてコントロールをデザイン画面上の目的の位置にドラッグします。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

リサイズ ハンドル

選択したコントロールにリサイズ ハンドルが表示されます。これを使用してコントロールのサイズを変更できます。 コントロールのサイズを変更するとき、通常は幅と高さの値が表示されるため、正確なサイズに調整できます。

マージン線

マージンとは、コントロールの端からコンテナーの端までの固定された間隔のことです。 コントロールのマージンを設定するには、マージン線をクリックします。 詳細については、「方法 : WPF デザイナーでコントロールのマージンを設定する」を参照してください。

マージン スタブ

マージン スタブは、そのマージンを 0 に設定すると、選択したコントロールに表示されます。 マージン スタブをクリックして、コンテナーの端までのマージン間隔を設定します。 詳細については、「方法 : WPF デザイナーでコントロールのマージンを設定する」を参照してください。

スナップ線

スナップ線を使用して、コントロールを他のコントロールを基準として整列できます。 スナップ線が有効な場合、コントロールを他のコントロールから相対的にドラッグすると、それらのコントロールの端やテキストが水平または垂直に並んだときにスナップ線が表示されます。 詳細については、「方法 : テキストのベースラインとマージンの両方に整列させる」を参照してください。

情報バー

デザイン ビューの上部にある情報バーには、デザイン ビューでのレンダリングの問題に関する情報が表示されます。 情報バーをクリックすると、その問題に関する追加情報が表示される場合もあります。 情報バーを展開した表示を次の図に示します。

バーのサイズ設定

2 つ以上の列や行がある Grid コントロールのグリッド レール上にマウス ポインターを移動すると、サイズ設定バーがレールの外側に表示されます。 サイズ設定バーを使用して、Grid の行や列に固定、スター、および自動のサイズ変更オプションを設定できます。 詳細については、「方法: グリッド コントロールの行および列のサイズを変更する」を参照してください。

ルート サイズ変更タグ

ルート サイズ変更タグは、デザイン ビューでウィンドウを選択すると、そのウィンドウの右下隅に表示されます。 ルート サイズ変更タグを使用して、ウィンドウのルート サイズの自動と固定を切り替えることができます。 詳細については、「デザイン時属性」を参照してください。

XAML ビュー

XAML (Extensible Application Markup Language) は、アプリケーションのユーザー インターフェイスを指定するための宣言による XML ベース ボキャブラリを提供します。 WPF および Silverlight デザイナーは、アプリケーションでレンダリングされる XAML マークアップの XAML ビューおよび同期されるデザイン ビューを提供します。 XAML ビューには、IntelliSense、自動フォーマット、構文強調表示、およびタグ ナビゲーションが含まれています。 XAML の機能の一部を次の図に示します。

分割ビュー バー

分割ビュー バーを使用して、デザイン ビューと XAML ビューの相対サイズを調節できます。 ビューを入れ替えたり、分割ビューを水平方向または垂直方向にするかどうかを指定したりすることもできます。また、一方のビューを折りたたむことができます。 詳細については、「分割ビュー : WPF デザイン サーフェイスと XAML を同時に表示する」を参照してください。

マークアップ拡張機能の IntelliSense

XAML ビューでは、標準言語の IntelliSense に加え、マークアップ拡張機能の IntelliSense もサポートされています。 XAML ビューに左中かっこ ({) を入力すると、使用可能なマークアップ拡張機能が IntelliSense に表示されます。 一覧からマークアップ拡張機能を選択すると、使用可能な属性が IntelliSense に表示されます。 詳細については、「チュートリアル : WPF デザイナーでの XAML の編集」を参照してください。

タグ ナビゲーター

タグ ナビゲーターは、XAML ビューの下に表示されます。タグ ナビゲーターを使用すると、XAML ビュー内で現在選択されているタグの親タグに移動できます。 タグ ナビゲーター内のタグの上にマウス ポインターを移動すると、その要素のサムネイル プレビューが表示されます。 チュートリアル : WPF デザイナーでの XAML の編集.

ズーム

ズーム コントロールを使用して、XAML ビューのサイズを変更できます。 20% から 400% までの範囲でズームできます。

プロパティ ウィンドウ

[プロパティ] ウィンドウを使用して、デザイン ビュー内のコントロールのプロパティ値を設定します。 [プロパティ] ウィンドウの例を次の図に示します。

[プロパティ] ウィンドウの上部には、さまざまなオプションがあります。 現在選択されているコントロールの名前を変更するには、[名前] ボックスにカーソルを置き、名前を入力します。 右上隅に、現在選択されているコントロールのサムネイル プレビューが表示されます。 プロパティを項目別またはアルファベット順に表示するには、[項目別] ボタンまたは [アルファベット順] ボタンをクリックします。 プロパティをソース別に並べ替えるには、[プロパティ ソース別に並べ替え] ボタンをクリックします。 コントロールのイベント一覧を表示するには、[イベント] ボタンをクリックします。 プロパティを検索するには、[検索] ボックスにプロパティの名前を入力します。 入力するに従い、検索文字列と一致するプロパティが [プロパティ] ウィンドウに表示されます。

1 列目にあるプロパティ名の右側にプロパティ マーカーがあります。 プロパティ マーカーは、データ バインディングまたはリソースが適用されるかどうかを示します。 プロパティ マーカーをクリックすると、データ バインディング ビルダーまたはリソース ピッカーを開くか、リソースの定義に移動することができます。 スタイルのプロパティ マーカーをクリックしたときに使用できるオプションを次の図に示します。

データ バインディング ビルダー

データ バインディング ビルダーを使用すると、XAML を入力せずにデータ バインディングを作成できます。 リソース、データ コンテキスト、および要素のプロパティへのバインディングを作成できます。 また、値コンバーターを適用することもできます。 詳細については、「チュートリアル: WPF デザイナーによるデータ バインディングの作成」および「チュートリアル: デザイナーでの DesignInstance によるデータへのバインド」を参照してください。

マージン エディター

マージン エディターを使用して、それぞれのマージンの設定と、その設定がコントロールの配置にどのように影響しているかを確認できます。 また、マージン エディターでは、1 つのコントロールのマージンを変更したり、複数のコントロールのマージンを編集したりすることもできます。 詳細については、「方法 : WPF デザイナーでコントロールのマージンを設定する」を参照してください。

リソース ピッカー

リソース ピッカーを使用すると、[プロパティ] ウィンドウでリソースを検索したり、リソースをプロパティに割り当てたりすることができます。 また、ハードコーディングされた値をリソースに抽出して、再利用を促進することもできます。 詳細については、「リソースの使用」を参照してください。

ブラシ エディター

ブラシ エディターを使用すると、[プロパティ] ウィンドウでさまざまな種類のブラシを作成できます。 詳細については、「方法: ブラシ エディターを使用してブラシを作成する」を参照してください。

データ ソース ウィンドウ

データを WPF アプリケーションにすばやく統合するには、[データ ソース] ウィンドウを使用します。 データ接続を確立すると、データ テーブルをデザイン サーフェイスにドラッグできます。その後、ビジネス ロジックとデータ バインディングが自動的に生成されます。 オブジェクト、ADO.NET データセット、Entity Data Model、またはサービスにバインドできます。 詳細については、「Visual Studio でのデータへの WPF コントロールのバインド」を参照してください。

[ドキュメント アウトライン] ウィンドウ

[ドキュメント アウトライン] ウィンドウには、XAML ドキュメントが階層形式で表示されます。 [ドキュメント アウトライン] ウィンドウでは、XAML 要素のプレビュー、選択、または削除を行うことができます。 [プロパティ] ウィンドウの例を次の図に示します。

詳細については、「WPF ドキュメントの要素階層内の移動」を参照してください。

充実した対話形式のユーザー インターフェイスの構築

WPF では、Window クラスと Page クラスが、ユーザーに対して情報を表示するビジュアル サーフェイスです。 一般的に、WPF アプリケーションは、Window にコントロールを追加し、マウスをクリックしたりキーを押したりするなどのユーザー アクションに対する応答を開発することによってビルドします。 コントロールとは、データの表示やデータ入力の受け付けを行う、個別のユーザー インターフェイス (UI) 要素です。

ユーザーが Window やそのコントロールのいずれかに対して操作を行うと、その操作でイベントが生成されます。 アプリケーションでは、こうしたイベントに応答し、イベントの発生時に処理を行います。 詳細については、「方法 : 単純なイベント ハンドラーを作成する」を参照してください。

WPF にはさまざまなコントロールが用意されており、これらのコントロールはウィンドウに追加できます。テキスト ボックス、ボタン、ドロップダウン リスト、オプション ボタンを表示するコントロールだけではなく、Web ページを表示するコントロールもあります。 ウィンドウで使用できるすべてのコントロールの一覧については、「コントロール ライブラリ」を参照してください。 WPF では、既存のコントロールでニーズに対応できない場合には、UserControl クラスと Control クラスを使用して独自のカスタム コントロールを作成することもできます。

WPF および Silverlight デザイナーでは、ドラッグ アンド ドロップで WPF アプリケーションを簡単に作成できます。 マウス ポインターでコントロールを選択するだけで、ウィンドウの任意の位置に追加できます。 このデザイナーには、スナップ線や連続的なズームなどのツールが備わっており、コントロールを簡単に整列できます。

独自のカスタム UI 要素を作成する必要がある場合には、線、円、およびその他の形状をウィンドウに直接描画するために必要な多数のクラスが、System.Windows.Media 名前空間と System.Windows.Shapes 名前空間に含まれています。

ウィンドウとコントロールの作成に関するヘルプ

これらの機能の詳細な使用手順については、次のヘルプ トピックを参照してください。

説明	ヘルプ トピック
Visual Studio での新しい WPF アプリケーションの作成。	方法 : 新しい WPF アプリケーション プロジェクトを作成する
ウィンドウでのコントロールの使用。	方法 : デザイン画面上で要素を選択して移動する
コントロールのイベント ハンドラーの作成。	方法 : 単純なイベント ハンドラーを作成する
ウィンドウおよびウィンドウのコントロールからのイベント処理。	方法 : 添付イベントを使用する
WPF レイアウトまたは Silverlight レイアウト内の移動。	WPF ドキュメントの要素階層内の移動
動的なレイアウトの作成。	WPF デザイナーのレイアウト
カスタム WPF コントロールの作成。	方法 : WPF UserControl ライブラリ プロジェクトを作成する
データ バインディングの作成。	WPF デザイナーでのデータ バインディング

Expression Blend との連携

WPF ではコンテンツと表示形式が厳密に分離されています。これにより、ソフトウェア開発者とグラフィックのデザイナーはアプリケーションの外観と動作に関して共同で作業できます。 WPF および Silverlight デザイナーはソフトウェア開発者のために最適化され、Expression Blend はグラフィックのデザイナーのために最適化されています。 詳細については、「Expression Blend との連携」を参照してください。

参照

概念

Windows フォーム開発者向け WPF デザイナー

Expression Blend との連携

その他の技術情報

WPF デザイナー

コントロール ライブラリ

WPF の XAML

履歴の変更

日付	履歴	理由
2011 年 3 月	[プロパティ] ウィンドウとマージン エディターについての情報が更新されました。	情報の拡充