WPF デザイナの概要
更新 : 2007 年 11 月
ここでは、Windows Presentation Foundation (WPF) Designer for Visual Studio について説明します。WPF は、Windows Vista で使用されるユーザー インターフェイス テクノロジであり、Windows フォームなどの従来のビュー テクノロジとは異なります。
WPF デザイナ は、Windows フォーム デザイナに似たビジュアルなデザイン サポートを提供します。ツールボックスからコントロールをドラッグしたり [プロパティ] ウィンドウでプロパティを設定したりすることによって、アプリケーションのユーザー インターフェイスをビルドできます。XAML を XAML エディタで直接編集することもできます。
WPF デザイナ ウィンドウ
WPF デザイナ には、XAML ドキュメントを表示および編集するためのウィンドウが複数あります。WPF デザイナ のウィンドウの一部を次の図に示します。
.png "WPF デザイナの概要")
デザイン ビュー
デザイン ビューは、WPF コントロールやアプリケーションをビルドするためのビジュアルなデザイン画面を提供します。このビューには、現在 XAML ビューにある XAML の描画表現が表示されます。
コントロールはツールボックスからデザイン画面にドラッグして配置できます。このコントロールの位置は、ドラッグすることにより調整できます。コントロールの位置を厳密に調整できるように、いくつかのデザイン支援機能が用意されています。デザイン画面上でコントロールを変更すると、XAML ビューが更新されて変更が反映されます。詳細については、「方法 : WPF ウィンドウにコントロールを追加する」および「方法 : デザイン画面上で要素を選択して移動する」を参照してください。
XAML ビュー
XAML ビューは、IntelliSense、自動フォーマット、構文強調表示、およびタグ ナビゲーションを含む、フル機能の XAML ドキュメント編集環境を提供します。XAML を編集すると、デザイン ビューが更新されて変更が反映されます。
詳細については、「チュートリアル : WPF デザイナでの XAML の編集」を参照してください。
[プロパティ] ウィンドウ
[プロパティ] ウィンドウを使用して、デザイン ビュー内のコントロールのプロパティ値を設定します。
[プロパティ] ウィンドウを表示するには、[表示] メニューの [プロパティ ウィンドウ] をクリックするか、Ctrl キーを押しながら W キーと P キーを押すか、あるいは F4 キーを押します。または、デザイン ビューでコントロールを右クリックし、ショートカット メニューの [プロパティ] をクリックします。[プロパティ] ウィンドウには、現在選択されているコントロールのサムネイル プレビューが表示されます。
プロパティを検索するには、[プロパティ] ウィンドウ上部の [検索] ボックスでプロパティの名前の入力を開始します。入力するに従い、検索文字列と一致するプロパティが [プロパティ] ウィンドウに表示されます。検索文字列を削除して選択されているオブジェクトのすべてのプロパティを表示するには、[クリア] をクリックします。
Visual Studio 2008 Service Pack 1 以降では、プロパティをアルファベット順または項目ごとに表示できます。プロパティをアルファベット順に表示するには、[プロパティ] ウィンドウ上部の [アルファベット順] ボタンをクリックします。プロパティを項目ごとに表示するには、[プロパティ] ウィンドウ上部の [項目別] ボタンをクリックします。
[ドキュメント アウトライン] ウィンドウ
[ドキュメント アウトライン] ウィンドウには、XAML ドキュメントが階層形式で表示されます。[ドキュメント アウトライン] ウィンドウでは、XAML 要素のプレビュー、選択、または削除を行うことができます。[ドキュメント アウトライン] ウィンドウを表示するには、[表示] メニューの [その他のウィンドウ] をポイントして [ドキュメント アウトライン] をクリックするか、Ctrl キーと Alt キーを押しながら T キーを押します。詳細については、「WPF ドキュメントの要素階層内の移動」を参照してください。
ツールボックス
ツールボックス内のコントロールは、デザイン画面にドラッグすることができます。[ツールボックス] ウィンドウを表示するには、[表示] メニューの [ツールボックス] をクリックするか、Ctrl キーと Alt キーを押しながら X キーを押します。
デザイン ビューの機能
デザイン ビューには、WPF アプリケーションのウィンドウまたはページにコントロールを配置するための機能が用意されています。デザイン ビューの機能の一部を次に示します。
.png "WPF デザイナのデザイン ビュー機能")
ズーム コントロール
ズーム コントロールを使用して、デザイン画面のサイズを調整します。10% から 20 倍までの範囲でズームできます。
"ビューに合わせる" ボタン
"ビューに合わせる" ボタンを使用して、デザイン画面をデザイン ビューの使用可能な画面のサイズに合わせて調整します。これは、非常に高い拡大率または縮小率でサイズ変更したときに便利です。
グリッド レール
グリッド レールを使用して、Grid コントロールの行と列を制御します。列と行を作成および削除したり、列と行の相対的な幅や高さを調整したりできます。詳細については、「方法 : グリッドに行と列を追加する」を参照してください。
グリッド線
グリッド線を使用して、Grid の列と行の幅や高さを制御します。Grid の上や左にあるレールをクリックして、新しい列または行を追加できます。詳細については、「方法 : グリッドに行と列を追加する」を参照してください。
グリッド線インジケータ
グリッド線インジケータは、グリッド レール内に表示される三角形のマークです。グリッド線インジケータまたはグリッド線自体をドラッグすると、隣接する列または行の幅または高さがマウスの移動に従って更新されます。詳細については、「方法 : グリッドに行と列を追加する」を参照してください。
移動ハンドル
移動ハンドルは、選択されているパネル コントロールの左上に表示されます。移動ハンドルをクリックしてコントロールをデザイン画面上の目的の位置にドラッグします。詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。
リサイズ ハンドル
リサイズ ハンドルは、選択されているコントロールに表示されます。リサイズ ハンドルをクリックしてドラッグすると、選択項目のサイズが変更されます。コントロールのサイズを変更するとき、通常は幅と高さの値が表示されるため、正確なサイズに調整できます。
マージン線
マージンとは、コントロールの端からコンテナの端までの固定された間隔のことです。コントロールのマージンを設定するには、マージン線をクリックします。詳細については、「方法 : WPF デザイナでコントロールのマージンを設定する」を参照してください。
マージン スタブ
マージン スタブは、選択されているコントロールでマージンが 0 に設定されているときにコントロール上に表示されます。マージン スタブをクリックして、コンテナの端までのマージン間隔を設定します。詳細については、「方法 : WPF デザイナでコントロールのマージンを設定する」を参照してください。
スナップ線
スナップ線を使用して、コントロールを他のコントロールを基準として整列します。スナップ線が有効な場合、コントロールを他のコントロールから相対的にドラッグすると、それらのコントロールの端やテキストが水平または垂直に並んだときにスナップ線が表示されます。詳細については、「方法 : テキストのベースラインとマージンの両方に整列させる」を参照してください。
XAML ビューの機能
XAML (Extensible Application Markup Language) は、アプリケーションのユーザー インターフェイスを指定するための宣言による XML ベース ボキャブラリを提供します。WPF デザイナ は、独特の分割ビューを備えています。このビューは、アプリケーションの描画された XAML マークアップの XAML ビューおよび同期されるデザイン ビューを提供します。XAML の機能の一部を次に示します。
.png "WPF デザイナの XAML ビュー機能")
詳細については、「分割ビュー : WPF デザイン サーフェイスと XAML を同時に表示する」を参照してください。
分割ビュー バー
分割ビュー バーを使用して、デザイン ビューと XAML ビューの相対サイズを調節できます。分割ビューは、水平方向または垂直方向に区切って表示できます。また、一方のビューを折りたたむことができます。詳細については、「分割ビュー : WPF デザイン サーフェイスと XAML を同時に表示する」を参照してください。
タグ ナビゲータ
タグ ナビゲータを使用すると、XAML ビュー内で現在選択されているタグの親タグに移動できます。タグ ナビゲータ内のタグの上にマウス ポインタを移動すると、その要素のサムネイル プレビューが表示されます。チュートリアル : WPF デザイナでの XAML の編集.
充実した対話形式のユーザー インターフェイスの構築
WPF では、Window クラスと Page クラスが、ユーザーに対して情報を表示するビジュアル サーフェイスです。一般的に、WPF アプリケーションは、Window にコントロールを追加し、マウスをクリックしたりキーを押したりするなどのユーザー アクションに対する応答を開発することによってビルドします。コントロールとは、データの表示やデータ入力の受け付けを行う、個別のユーザー インターフェイス (UI) 要素です。
ユーザーが Window やそのコントロールのいずれかに対して操作を行うと、その操作でイベントが生成されます。アプリケーションでは、こうしたイベントに応答し、イベントの発生時に処理を行います。詳細については、「方法 : 単純なイベント ハンドラを作成する」を参照してください。
WPF にはさまざまなコントロールが用意されており、これらのコントロールはウィンドウに追加できます。テキスト ボックス、ボタン、ドロップダウン リスト、オプション ボタンを表示するコントロールだけではなく、Web ページを表示するコントロールもあります。ウィンドウで使用できるすべてのコントロールの一覧については、「コントロール ライブラリ」を参照してください。WPF では、既存のコントロールでニーズに対応できない場合には、UserControl クラスと Control クラスを使用して独自のカスタム コントロールを作成することもできます。
WPF デザイナ では、ドラッグ アンド ドロップで WPF アプリケーションを簡単に作成できます。ポインタでコントロールを選択するだけで、ウィンドウの任意の位置に追加できます。このデザイナには、スナップ線や連続的なズームなどのツールが備わっており、コントロールを簡単に整列できます。
独自のカスタム UI 要素を作成する必要がある場合には、線、円、およびその他の形状をウィンドウに直接描画するために必要な多数のクラスが、System.Windows.Media 名前空間と System.Windows.Shapes 名前空間に含まれています。
ウィンドウとコントロールの作成に関するヘルプ
これらの機能の詳細な使用手順については、次のヘルプ トピックを参照してください。
説明 |
ヘルプ トピック |
|---|---|
Visual Studio での新しい WPF アプリケーションの作成。 |
|
ウィンドウでのコントロールの使用。 |
|
コントロールのイベント ハンドラの作成。 |
|
ウィンドウおよびウィンドウのコントロールからのイベント処理。 |
|
WPF レイアウト内の移動。 |
|
動的なレイアウトの作成。 |
|
カスタム コントロールの作成。 |
Expression Blend との連携
WPF ではコンテンツと表示形式が厳密に分離されています。これにより、ソフトウェア開発者とグラフィックのデザイナはアプリケーションの外観と動作に関して共同で作業できます。Windows Presentation Foundation (WPF) Designer for Visual Studio はソフトウェア開発者のために最適化され、Expression Blend はグラフィックのデザイナのために最適化されています。詳細については、「Expression Blend との連携」を参照してください。
クライアント コンピュータへのアプリケーションの配置
アプリケーションを作成したら、ユーザーに送る必要があります。各自のクライアント コンピュータにアプリケーションをインストールして実行してもらうためです。ClickOnce テクノロジを使用すると、数回クリックするだけで Visual Studio の中からアプリケーションを配置でき、Web またはファイル共有上のアプリケーションを指す URL をユーザーに提供できます。ClickOnce は、アプリケーションの要素と依存関係をすべて管理し、アプリケーションがクライアント コンピュータに適切にインストールされるようにします。
ClickOnce アプリケーションは、ユーザーがネットワークに接続しているときにのみ動作するように設定することも、オンラインでもオフラインでも動作するように設定することもできます。アプリケーションでオフライン操作をサポートするように指定すると、ClickOnce によって、[スタート] メニューにアプリケーションへのリンクが追加されます。URL を使用しなくてもアプリケーションを開くことができるようになります。
アプリケーションを更新するときには、新しい配置マニフェストと、アプリケーションの新しいコピーを Web サーバーまたはファイル共有に対して発行します。ClickOnce は、更新が利用可能であることを検出し、ユーザーのインストール内容をアップグレードします。古いアセンブリを更新するためのカスタム プログラミングは不要です。詳細については、「WPF アプリケーションの配置」を参照してください。
ClickOnce アプリケーションの配置
ClickOnce の詳細については、「ClickOnce の配置の概要」を参照してください。これらの機能の詳細な使用手順については、次のヘルプ トピックを参照してください。
説明 |
ヘルプ トピック |
|---|---|
ClickOnce によるアプリケーションの配置。 |
|
ClickOnce 配置の更新。 |
|
ClickOnce によるセキュリティの管理。 |