XAML デザイナーを使用して UI を作成する

Visual Studio と Blend for Visual Studio の XAML デザイナーには、WPF や UWP などの XAML ベースのアプリを設計するのに役立つビジュアル インターフェイスが用意されています。 アプリのユーザー インターフェイスを作成するには、[ツールボックス] ウィンドウ (Blend for Visual Studio の [アセット] ウィンドウ) からコントロールをドラッグし、[プロパティ] ウィンドウでプロパティを設定します。 XAML ビューで XAML を直接編集することもできます。

上級ユーザーの場合は、 XAML デザイナーをカスタマイズすることもできます。

XAML デザイナー ワークスペース

XAML デザイナーのワークスペースは、いくつかのビジュアル インターフェイス要素で構成されます。 これには、 アートボード (ビジュアル デザイン サーフェイス)、XAML エディター、ドキュメント アウトライン ウィンドウ (Blend for Visual Studio の [オブジェクトとタイムライン] ウィンドウ)、および [プロパティ] ウィンドウが含まれます。 XAML デザイナーを開くには、 ソリューション エクスプローラー で XAML ファイルを右クリックし、[ デザイナーの表示] を選択します。

XAML デザイナーには、アプリのレンダリングされた XAML マークアップの XAML ビューと同期されたデザイン ビューが用意されています。 Visual Studio または Blend for Visual Studio で XAML ファイルを開くと、[デザイン] タブと [XAML] タブを使用して 、デザイン ビューと XAML ビューを切り替えることができます。 XAML デザイナーの [ペインのスワップ] ボタン [] を使用して、上に表示するウィンドウ（アートボードまたは XAML エディター）を切り替えることができます。

デザイン ビュー

デザイン ビューでは、アートボードを含むウィンドウがアクティブなウィンドウであり、主要な作業面として使用できます。 これを使用すると、要素を追加、描画、または変更することで、アプリ内のページを視覚的にデザインできます。 詳細については、「 XAML デザイナーでの要素の操作」を参照してください。 この図は、デザイン ビューのアートボードを示しています。

これらの機能はアートボードで利用できます。

スナップ線

スナップ線は、コントロールの端が整列されたとき、またはテキストのベースラインが整列されたときに表示される赤い破線として表示される 配置境界 です。 線形境界は、 スナップ線へのスナップ が有効になっている場合にのみ表示されます。

グリッド レール

グリッド レールは、 グリッド パネルで行と列を管理するために使用されます。 行と列を作成および削除したり、相対的な幅と高さを調整したりできます。 アートボードの左側に表示される垂直グリッド レールが行に使用され、上部に表示される水平線が列に使用されます。

グリッド装飾

グリッド装飾は、グリッド レール上に垂直または水平の線がアタッチされた三角形として表示されます。 グリッド装飾をドラッグすると、マウスを動かすと、隣接する列または行の幅または高さが更新されます。

グリッド装飾は、グリッドの行と列の幅と高さを制御するために使用されます。 グリッド レールをクリックすると、新しい列または行を追加できます。 2 つ以上の列または行を含むグリッド パネルに新しい行または列の線を追加すると、レールの外側にミニ ツールバーが表示され、幅と高さを明示的に設定できます。 ミニ ツール バーを使用すると、グリッドの行と列のサイズ設定オプションを設定できます。

ハンドルのサイズを変更する

サイズ変更ハンドルは、選択したコントロールに表示され、コントロールのサイズを変更できます。 コントロールのサイズを変更すると、通常、幅と高さの値が表示され、コントロールのサイズを変更するのに役立ちます。 デザイン ビューでのコントロールの操作の詳細については、「XAML デザイナーでの要素の操作」を参照してください。

余白

余白は、コントロールの端とそのコンテナーの端との間の固定領域の量を表します。 コントロールの余白は、[プロパティ] ウィンドウの [レイアウト] の [余白] プロパティを使用して設定できます。

余白装飾

余白装飾を使用して、要素の余白をレイアウト コンテナーに対して相対的に変更します。 余白装飾が開いている場合、余白は設定されず、余白装飾には壊れたチェーンが表示されます。 余白が設定されていない場合、実行時にレイアウト コンテナーのサイズが変更されると、要素は所定の位置に残ります。 余白装飾を閉じると、余白装飾によって切れ目のないチェーンが表示され、実行時にレイアウト コンテナーのサイズが変更されると、要素は余白と共に移動します (余白は固定されたままです)。

要素ハンドル

要素を囲む青いボックスの角の上にポインターを移動するときにアートボードに表示される要素ハンドルを使用して、要素を変更できます。 これらのハンドルを使用すると、要素の回転、サイズ変更、反転、移動、またはコーナー半径の追加を行えます。 要素ハンドルのシンボルは関数によって異なり、ポインターの正確な位置に応じて変化します。 要素ハンドルが表示されない場合は、要素が選択されていることを確認します。

デザイン ビューでは、次に示すように、ウィンドウの左下の領域で追加のアートボード コマンドを使用できます。

次のコマンドは、このツール バーで使用できます。

ズーム

ズームを使用すると、デザイン サーフェイスのサイズを変更できます。 12.5% から 800% にズームしたり、選択項目に 合わせる 、 すべて収めるなどのオプションを選択したりできます。

スナップ グリッドの表示/非表示

グリッド線を表示するスナップ グリッドを表示または非表示にします。 グリッド線は、グリッド線へのスナップまたはスナップ線へのスナップを有効にする場合に使用されます。

グリッド線へのスナップのオン/オフを切り替える

グリッド線へのスナップが有効になっている場合、要素をアートボードにドラッグすると、最も近い水平および垂直のグリッド線に合わせる傾向があります。

アートボードの背景を切り替える

明るい背景と暗い背景を切り替えます。

スナップ線へのスナップのオン/オフを切り替える

スナップ線は、コントロールを互いに相対的に整列するのに役立ちます。 スナップ線へのスナップが有効になっている場合、コントロールを他のコントロールに対して相対的にドラッグすると、一部のコントロールの端とテキストが水平方向または垂直方向に配置されるときに配置境界が表示されます。 整列境界は赤い破線で表示されます。

プロジェクト コードを無効にする

カスタム コントロールや値コンバーターなどの プロジェクト コードを無効にし、デザイナーを再読み込みします。

XAML ビュー

XAML ビューでは、XAML エディターを含むウィンドウがアクティブ ウィンドウであり、XAML エディターが主要なオーサリング ツールです。 Extensible Application Markup Language (XAML) は、アプリケーションのユーザー インターフェイスを指定するための宣言型の XML ベースのボキャブラリを提供します。 XAML ビューには、IntelliSense、自動書式設定、構文の強調表示、タグ ナビゲーションが含まれます。 次の図は、IntelliSense メニューが開いている XAML ビューを示しています。

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

Visual Studio の [ドキュメント アウトライン] ウィンドウは、Blend for Visual Studio の [オブジェクトとタイムライン] ウィンドウに 似ています。 ドキュメント アウトラインは、次のタスクを実行するのに役立ちます。

• アートボード上のすべての要素の階層構造を表示します。

• 変更できるように要素を選択します。 たとえば、階層内で移動したり、[プロパティ] ウィンドウでプロパティを設定したりできます。 詳細については、「 XAML デザイナーでの要素の操作」を参照してください。

• コントロールである要素のテンプレートを作成および変更します。

• アニメーションを作成します (Blend for Visual Studio のみ)。

Visual Studio で [ドキュメント アウトライン] ウィンドウを表示するには、メニュー バーの [ 表示>その他の Windows>Document アウトラインを選択します。 Blend for Visual Studio で [オブジェクトとタイムライン] ウィンドウを表示するには、メニュー バーの [表示>Document アウトライン] を選択します。

[ドキュメントアウトライン/オブジェクトとタイムライン]ウィンドウのメインビューには、ツリー構造のドキュメントの階層が表示されます。 ドキュメント アウトラインの階層的な性質を使用して、ドキュメントをさまざまな詳細レベルで調べたり、要素を 1 つずつまたはグループでロックおよび非表示にしたりできます。 [ドキュメント アウトライン/オブジェクトとタイムライン] ウィンドウでは、次のオプションを使用できます。

表示/非表示

アートボード要素を表示または非表示にします。 表示すると、目のシンボルとして表示されます。 Ctrl+キーを押して要素を非表示にし、Shift+Ctrl+H キーを押して表示することもできます。

ロック/ロック解除

アートボード要素をロックまたはロック解除します。 ロックされた要素は変更できません。 ロック時に南京錠記号として表示されます。 Ctrl+キーを押して要素をロックし、Shift+Ctrl+L キーを押してロックを解除することもできます。

pageRoot にスコープを返す

上矢印記号が表示されている [ドキュメント アウトライン/オブジェクトとタイムライン] ウィンドウの上部にあるオプションは、前のスコープに移動します。 スコープアップは、スタイルまたはテンプレートのスコープ内でのみ実行することができます。

プロパティ ウィンドウ

[プロパティ] ウィンドウでは、コントロールのプロパティ値を設定できます。 次のように表示されます。

[プロパティ] ウィンドウの上部には、さまざまなオプションがあります。

• [名前] ボックスで現在選択されている要素の 名前 を変更します。
• 左上隅には、現在選択されている要素を表すアイコンがあります。
• プロパティをカテゴリ別またはアルファベット順に並べ替えるには、[並べ替え] リストの [カテゴリ]、[名前]、または [ソース] をクリックします。
• コントロールのイベントの一覧を表示するには、稲妻記号として表示される [イベント ] ボタンをクリックします。
• プロパティを検索するには、検索ボックスにプロパティの名前の入力を開始します。 [ プロパティ] ウィンドウには、入力時に検索に一致するプロパティが表示されます。

一部のプロパティでは、下矢印ボタンを選択して高度なプロパティを設定できます。

各プロパティ値の右側には、ボックス シンボルとして表示される プロパティ マーカー があります。 プロパティ マーカーの外観は、データ バインディングがあるか、プロパティにリソースが適用されているかを示します。 たとえば、白いボックスの記号は既定値を示し、ブラック ボックス記号は通常、ローカル リソースが適用されたことを示し、オレンジ色のボックスは通常、データ バインディングが適用されたことを示します。 プロパティ マーカーをクリックすると、スタイルの定義に移動したり、データ バインディング ビルダーを開いたり、リソース ピッカーを開いたりすることができます。

プロパティの使用とイベントの処理の詳細については、「 コントロールとパターンの概要」を参照してください。

関連コンテンツ

• XAML デザイナーで要素を操作する
• リソースを作成して適用する方法
• チュートリアル: XAML デザイナーでデータにバインドする