Share via

XAML デザイナーを使用した UI の作成

  • [アーティクル]

Visual Studio 2013 の XAML デザイナーには、XAML、WPF、および Silverlight アプリを使用してビルドする Windows ストア アプリを設計するためのビジュアル インターフェイスが用意されています。 ツールボックスからコントロールをドラッグしたり、[プロパティ] ウィンドウでプロパティを設定したりして、アプリケーションのユーザー インターフェイスを作成できます。 また、XAML ビューで XAML を直接編集できます。

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

Visual Studio の XAML デザイナーのワークスペースは、複数のビジュアル インターフェイス要素で構成されます。 これには、アートボード、ツールボックス、[デバイス] ウィンドウ、[ドキュメント アウトライン] ウィンドウ、ソリューション エクスプローラー、[プロパティ] ウィンドウ、XAML エディターが含まれます。 XAML デザイナーを開くには、ソリューション エクスプローラーで XAML ページを右クリックし、[ビュー デザイナー] をクリックします。

オーサリング ビュー

XAML デザイナーには、アプリケーションでレンダリングされる XAML マークアップの XAML ビューおよび同期されるデザイン ビューが用意されています。 Visual Studio で XAML ドキュメントを開いているときに、[デザイン] タブと [XAML] タブを使用して、デザイン ビューと XAML ビューを切り替えることができます。 デザイン ビューでは、アートボードを含むウィンドウがアクティブ ウィンドウで、これを、主要な作業画面として使用できます。 このウィンドウで要素を追加または描画してから変更し、アプリケーションでビジュアルにページをデザインできます。 詳細については、「XAML デザイナーでの要素の操作」を参照してください。 次の図は、デザイン ビューのアートボードを示します。

XAML デザイナーのデザイン ビュー

アートボードと XAML エディターのどちらのウィンドウを一番上に表示するかは、[ペインの交換] ボタンで切り替えることができます。

アートボードでは、次の機能を使用できます。

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

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

  • グリッド ガイド
    Grid ガイドは、Grid レール上に、縦線または横線の付いた三角形として表示されます。 Grid ガイドをドラッグすると、マウスの移動に従って、隣接する列または行の幅または高さが更新されます。

    Grid ガイドを使用して、Grid の列と行の幅と高さを制御します。 Grid レールをクリックして、新しい列または行を追加できます。 複数の列または行を含む Grid パネルに新しい行または列の線を追加すると、ミニ ツール バーがレールの外側に表示され、これを使用して、幅と高さを明示的に設定できます。 ミニ ツール バーを使用すると、Grid の行と列に固定、スター、および自動サイズ変更の各オプションを設定できます。

  • サイズ変更ハンドル
    サイズ変更ハンドルは、選択したコントロール上に表示され、これを使用して、コントロールのサイズを変更できます。 コントロールのサイズを変更するときは、通常、正確なサイズに調整できるように幅と高さの値が表示されます。 デザイン ビューのコントロールを操作する方法の詳細については、「XAML デザイナーでの要素の操作」を参照してください。

  • 余白
    余白とは、コントロールの端からそのコンテナーの端までの固定された間隔のことです。 コントロールの余白は、[プロパティ] ウィンドウの [レイアウト] の下にある Margin プロパティで設定できます。

  • 余白ガイド
    余白ガイドを使用して、レイアウト コンテナーを基準として要素の余白を変更できます。 余白ガイドが開いている場合は、余白が設定されておらず、余白ガイドには切れたチェーンが表示されます。 余白が設定されていない場合は、レイアウト コンテナーのサイズが実行時に変更されても要素が同じ場所に残ります。 余白ガイドを閉じていると、余白ガイドには切れていないチェーンが表示され、レイアウト コンテナーが実行時に変更されるにつれて要素が余白と共に移動します (余白は固定されたままです)。

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

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

デザイン ビュー コマンド

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

  • ズーム
    ズームで、デザイン サーフェイスのサイズを変更できます。 12.5% ～ 800% の範囲でズームできます。または、[選択範囲に合わせる] や [Fit to all](全体を表示) などのオプションを選択できます。

  • スナップ グリッドの表示/スナップ グリッドを隠す
    グリッド線を示すスナップ グリッドを表示したり、隠したりします。 グリッド線は、グリッド線へのスナップとスナップ ガイドラインへのスナップのいずれかが有効な場合に使用されます。

  • グリッド線へのスナップをオンにする/グリッド線へのスナップをオフにする
    グリッド線へのスナップが有効な場合にアートボードで要素をドラッグすると、要素は、最も近い位置にある縦または横のグリッド線に整列しようとします。

  • スナップ ガイドラインへのスナップをオンにする/グリッド線へのスナップをオフにする
    スナップ ガイドラインを使用して、コントロールを他のコントロールを基準として整列できます。 スナップ ガイドラインへのスナップが有効な場合は、他のコントロールを基準としてコントロールをドラッグすると、一部のコントロールの端やテキストが縦横または縦に整列したときに配置境界が表示されます。 配置境界は、赤い破線の行として表示されます。

XAML ビューでは、XAML エディターを含むウィンドウがアクティブ ウィンドウであり、XAML エディターが主な編集ツールです。 XAML (Extensible Application Markup Language) には、アプリケーションのユーザー インターフェイスを指定するための、宣言による XML ベース ボキャブラリが用意されています。 XAML ビューには、IntelliSense、オートフォーマット、構文強調表示、およびタグ ナビゲーションが含まれています。 次の図は、XAML ビューを示します。

XAML ビュー

  • 分割ビュー バー
    分割ビュー バーは、XAML エディターが下部のウィンドウにあるときに、XAML ビューの上部に表示されます。 分割ビュー バーを使用すると、デザイン ビューと XAML ビューの相対サイズを調節できます。 また、各ビューの場所を交換したり ([ペインの交換] ボタンを使用して)、横または縦に並べてビューを配置するかどうかを指定したり、どちらかのビューを折りたたんだりできます。

  • Markup Zoom(マークアップのズーム)
    マークアップのズームを使用すると、XAML ビューのサイズを変更できます。 20% ～ 400% の範囲でズームできます。

[デバイス] ウィンドウ

Visual Studio の XAML デザイナーの [デバイス] ウィンドウを使用すると、デザイン時にアプリケーションのさまざまなビュー、表示、および表示オプションをシミュレートできます。 [デバイス] ウィンドは、XAML デザイナーで作業しているときに [デザイン] メニューから開くことができます。 次の図は、その例です。

デバイス ウィンドウ

[デバイス] ウィンドウで使用可能なオプションは、次のとおりです。

  • 表示
    アプリに使用する画面のサイズおよび解像度を変更します。

  • 方向
    アプリの方向を [横] または [縦] に変更します。

  • 端
    アプリの端の揃え方を [両方]、[左]、[右]、または [なし] に変更します。

  • ハイコントラスト
    選択したコントラスト設定に基づいてアプリをプレビューします。 [既定] 以外の値を設定すると、App.xaml 内に設定された RequestedTheme プロパティではなく、こちらの設定値が使用されます。

  • スケーリングのオーバーライド
    デザイン サーフェイス内のドキュメントのスケーリングのエミュレーションのオンとオフを切り替えます。 これにより、1 つの要因によってスケーリング率を上げることができます。 エミュレーションをオンにするには、チェック ボックスをオンにします。 たとえば、スケーリング率が 100% の場合は、デザイン サーフェイス内のドキュメントが 140% まで拡大されます。 このオプションは、現在のスケーリング率が 180 の場合は無効です。

  • 最小の幅
    最小幅の設定を指定します。 最小幅は App.xaml で変更できます。

  • テーマ
    アプリケーションのテーマを指定します。

  • クロムの表示
    デザイン ビューでアプリケーションの周囲にシミュレートされるタブレット フレームのオンとオフを切り替えます。 フレームを表示するには、チェック ボックスをオンにします。

  • クリップして表示
    表示モードを指定します。 ドキュメントのサイズを表示サイズに合わせてクリップする場合は、チェックボックスをオンにします

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

XAML デザイナーの [ドキュメント アウトライン] ウィンドウでは、次のタスクを実行できます。

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

  • 要素を選択して変更する (階層構造内の別の場所に移動する、アートボード上で変更する、[プロパティ] ウィンドウでプロパティを設定する、など)。 詳細については、「XAML デザイナーでの要素の操作」を参照してください。

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

  • 選択した要素にコンテキスト メニューを使用します。 同じメニューを、アートボードで選択した要素にも使用できます。

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

[ドキュメント アウトライン] ウィンドウでは、次のオプションを使用できます。

  • ドキュメント アウトライン
    [ドキュメント アウトライン] ウィンドウのメイン ビューには、ドキュメントの階層がツリー構造で表示されます。 ドキュメント アウトラインの階層的な特性を使用して、さまざまな詳細レベルでドキュメントをチェックしたり、要素を単独またはグループでロックして非表示にしたりできます。

  • 表示/非表示
    ドキュメント アウトラインの項目に対応するアートボード要素を表示したり、非表示にしたりします。 要素の表示と非表示を切り替えるには、表示すると目のシンボルが表示される [表示/非表示] ボタンを使用します。または、Ctrl + H キーを押して非表示にするか、Shift + Ctrl + H キーを押して表示します。

  • ロック/ロック解除
    ドキュメント アウトラインの項目に対応するアートボード要素をロックしたり、ロックを解除したりします。 ロックされた要素は変更できません。 ロックとロック解除を切り替えるには、ロックすると錠のシンボルが表示される [ロック/ロック解除] ボタンを使用します。または、Ctrl + L キーを押すと要素をロックされ、Shift + Ctrl + L キーを押すとロックが解除されます。

  • スコープを <要素名> に戻す
    [ドキュメント アウトライン] ウィンドウの上部のオプションで、上向きの矢印のシンボルが表示されます。ドキュメント アウトラインを、以前のスコープに戻します。 スタイルまたはテンプレートのスコープ内である場合にのみ使用できます。

[プロパティ] ウィンドウ

[プロパティ] ウィンドウを使用すると、コントロールのプロパティ値を設定できます。 次の図は、その例です。

[プロパティ] ウィンドウ

[プロパティ] ウィンドウの上部には、さまざまなオプションがあります。 [名前] ボックスを使用して、現在選択している要素の名前を変更できます。 左上隅には、現在選択している要素を表すアイコンがあります。 プロパティをカテゴリ別またはアルファベット順に配置するには、[並べ替え] リストの [カテゴリ]、[名前]、または [ソース] をクリックします。 コントロールのイベントの一覧を表示するには、稲妻のシンボルが表示された [イベント] ボタンをクリックします。 プロパティを検索するには、[検索] ボックスにプロパティの名前を入力します。 入力するに従い、検索文字列と一致するプロパティが [プロパティ] ウィンドウに表示されます。 一部のプロパティでは、下向きの矢印ボタンをクリックすると、詳細プロパティを設定できます。 プロパティの使用とイベントの処理の詳細ついては、「クイック スタート: コントロールの追加とイベントの処理」を参照してください。

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

参照

処理手順

リソースを作成して適用する方法

XAML デザイナーでデータをバインドする方法

概念

XAML デザイナーでの要素の操作

その他の技術情報

XAML デザイナー UI リファレンス