Visual Studio での XAML デザイナーを使用した UI の作成Creating a UI by using XAML Designer in Visual Studio

Visual Studio の XAML デザイナーは、XAML ベースの Windows および Web アプリをデザインする際に役立つビジュアル インターフェイスを提供します。The XAML Designer in Visual Studio provides a visual interface to help you design XAML-based Windows and Web apps. アプリのユーザー インターフェイスを作成するには、 [ツールボックス] からコントロールをドラッグし、 [プロパティ] ウィンドウでプロパティを設定します。You can create user interfaces for your apps by dragging controls from the Toolbox and setting properties in the Properties window. また、XAML ビューで直接、XAML を編集することもできます。You can also edit XAML directly in XAML view.

アニメーションやビヘイビアーなどの高度な XAML デザイン タスクについては、 Creating a UI by using Blend for Visual Studioを参照してください。For advanced XAML design tasks such as animations and behaviors, see Creating a UI by using Blend for Visual Studio. ツールの比較については、「Visual Studio および Blend for Visual Studio での XAML の設計」を参照してください。Also see Designing XAML in Visual Studio and Blend for Visual Studio for a comparison between the tools.

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

XAML デザイナーのワークスペースは、いくつかのビジュアル インターフェイス要素で構成されています。The workspace in XAML Designer consists of several visual interface elements. たとえば、アートボード、XAML エディター、[デバイス] ウィンドウ、[ドキュメント アウトライン] ウィンドウ、および [プロパティ] ウィンドウなどがあります。These include the artboard, XAML Editor, Device window, Document Outline window, and Properties window. XAML デザイナーを開くには、 [ソリューション エクスプローラー] で XAML ファイルを右クリックし、 [デザイナーの表示]を選択します。To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer.

オーサリング ビューAuthoring views

XAML デザイナーは、アプリでレンダリングされる XAML マークアップの XAML ビューと、それに同期したデザイン ビューを提供します。XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. XAML ファイルを Visual Studio で開いた場合、デザイン ビューと XAML ビューを切り替えるには、 [デザイン] タブと [XAML] タブを使用します。With a XAML file open in Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. [ペインの交換] ボタンを使用すると、上側にアートボードと XAML エディターのどちらを表示するかを切り替えることができます。You can use the Swap Panes button to switch which window appears on top: either the artboard or the XAML Editor.

[デザイン] ビューでは、 アートボード を含むウィンドウがアクティブ ウィンドウになり、主要な作業画面として使用できます。In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. 要素を追加または描画し、必要に応じて変更することにより、アプリのページを視覚的にデザインできます。You can use it to visually design a page in your app by adding or drawing elements, and then by modifying them. 詳細については、「 Working with elements in XAML Designer」を参照してください。For more info, see Working with elements in XAML Designer. 次の図は、デザイン ビューに表示されるアートボードを示しています。This illustration shows the artboard in Design view.

XAML デザイナーのデザイン ビューDesign view of XAML Designer

アートボードで使用できる機能は次のとおりです。These features are available in the artboard:

スナップ ガイドラインSnaplines
スナップ ガイドラインは、コントロールの端が揃ったとき、またはテキストのベースラインが揃ったときに表示される赤色の破線 ( 位置揃えライン ) です。Snaplines are alignment boundaries that appear as red-dashed lines to show when the edges of controls are aligned, or when text baselines are aligned. 位置揃えラインは、 [スナップ ガイドラインへのスナップ] が有効に設定されている場合にのみ表示されます。Alignment boundaries appear only when snapping to snaplines is enabled.

グリッド レールGrid rails
Grid レールを使用して、 Grid パネルの行と列を管理します。Grid rails are used to manage rows and columns in a Grid panel. 行と列を作成/削除したり、行と列の相対的な幅と高さを調整したりできます。You can create and delete rows and columns, and you can adjust their relative widths and heights. アートボードの左側に表示される縦のグリッド レールは行のために使用し、上側に表示される横のグリッド レールは列のために使用します。The vertical Grid rail, which appears on the left of the artboard, is used for rows, and the horizontal line, which appears at the top, is used for columns.

グリッド ガイドGrid adorners
Grid ガイドは、 Grid レール上に、縦線または横線の付いた三角形として表示されます。A Grid adorner appears as a triangle that has a vertical or horizontal line attached to it on the Grid rail. Grid ガイドをドラッグすると、マウスの移動に従って、隣接する列または行の幅または高さが更新されます。When you drag a Grid adorner, the widths or heights of adjacent columns or rows update as you move the mouse.

Grid ガイドを使用して、 Gridの行と列の幅と高さを制御します。Grid adorners are used to control the width and height of a Grid's rows and columns. Grid レールをクリックすると、新しい列または行を追加できます。You can add a new column or row by clicking in the Grid rails. 複数の行または列のある Grid パネルに新しい行または列を追加すると、レールの外側にミニ ツール バーが表示され、幅と高さを明示的に設定できます。When you add a new row or column line for a Grid panel that has two or more columns or rows, a mini-toolbar appears outside of the rail that enables you to set width and height explicitly. ミニ ツール バーでは、 Grid の行と列のサイズ変更オプションを設定できます。The mini-toolbar enables you to set sizing options for Grid rows and columns.

サイズ変更ハンドルResize handles
サイズ変更ハンドルは、選択したコントロールに表示され、これを使用してコントロールのサイズを変更できます。Resize handles appear on selected controls and enable you to resize the control. コントロールのサイズを変更するときは、通常、幅と高さの値が表示され、サイズを決める参考にできます。When you resize a control, width and height values typically appear to help you size the control. デザイン ビューのコントロールを操作する方法の詳細については、「 Working with elements in XAML Designer」を参照してください。For more info about manipulating controls in Design view, see Working with elements in XAML Designer.

余白Margins
余白は、コントロールの端からそれを含むコンテナーの端までの固定された間隔です。Margins represent the amount of fixed space between the edge of a control and the edge of its container. コントロールの余白は、[プロパティ] ウィンドウの [レイアウト] の下にある Margin プロパティで設定できます。You can set the margins of a control by using the Margin properties under Layout in the Properties window.

余白ガイドMargin adorners
余白ガイドを使用すると、レイアウト コンテナーを基準として要素の余白を変更できます。You can use margin adorners to change the margins of an element relative to its layout container. 余白ガイドが開いている場合は、余白が設定されておらず、余白ガイドには切れたチェーンが表示されます。When a margin adorner is open, a margin is not set and the margin adorner displays a broken chain. 余白が設定されていないと、実行時にレイアウト コンテナーのサイズを変更した場合に、要素の位置が変わりません。When the margin is not set, elements will remain in place when the layout container is resized at run time. 余白ガイドが閉じている場合、余白ガイドには切れていないチェーンが表示され、実行時にレイアウト コンテナーのサイズを変更すると、要素が余白と共に移動します (余白は固定されたまま)。When a margin adorner is closed, a margin adorner displays an unbroken chain, and elements will move with the margin as the layout container is resized at run time (the margin remains fixed).

要素ハンドルElement handles
要素ハンドルを使用すると、要素を変更できます。要素ハンドルは、アートボードで要素を囲む青いボックスの角にマウス ポインターを置くと表示されます。You can modify an element by using the element handles that appear on the artboard when you move the pointer over the corners of the blue box that surrounds an element. このハンドルを使用すると、要素を回転、サイズ変更、反転、移動したり、角を丸めたりできます。These handles enable you to rotate, resize, flip, move, or add a corner radius to the element. 要素ハンドルのシンボルは機能に応じてさまざまで、ポインターの正確な場所に応じて変化します。The symbol for the element handle varies by function, and changes depending on the exact location of the pointer. 要素ハンドルが表示されない場合は、要素が選択されていることを確認してください。If you don't see the element handles, make sure the element is selected.

デザイン ビューでは、画面の左下に次のように表示される追加のアートボード コマンドを使用できます。In Design view, additional artboard commands are available in the lower left area of the screen, as shown here:

デザイン ビュー コマンドDesign view commands

このツール バーでは、次のコマンドを使用できます。These commands are available on this toolbar:

ズームZoom
ズームでは、デザイン画面のサイズを変更できます。Zoom enables you to size the design surface. 12.5% ~ 800% の範囲でズームしたり、 [選択範囲をズーム][すべてを合わせる]などのオプションを選択したりできます。You can zoom from 12.5% to 800%, or select options such as Fit to Selection and Fit to All.

スナップ グリッドの表示/スナップ グリッドを隠すShow/Hide snap grid
グリッド線を示すスナップ グリッドを表示したり、非表示にしたりします。Displays or hides the snap grid that shows the gridlines. グリッド線は、 [グリッド線へのスナップ] または [スナップ ガイドラインへのスナップ] のいずれかが有効な場合に使用されます。Gridlines are used when either snapping to gridlines or snapping to snaplines is enabled.

グリッド線へのスナップをオン/オフにするTurn on/off snapping to gridlines
[グリッド線へのスナップ] がオンのときにアートボードで要素をドラッグすると、要素は、最も近い位置にある縦または横のグリッド線に整列されます。If snapping to gridlines is enabled when you drag an element on the artboard, the element tends to align with the closest horizontal and vertical gridlines.

スナップ ガイドラインへのスナップをオン/オフにするTurn on/off snapping to snaplines
スナップ ガイドラインは、複数のコントロールを相互の位置に合わせて整列するために役立ちます。Snaplines help you align controls relative to each other. [スナップ ガイドラインへのスナップ] が有効になっている場合、1 つのコントロールを他のコントロールを基準にしてドラッグしているときに、他のコントロールの端やテキストに垂直または水平位置が揃うと位置揃えラインが表示されます。If snapping to snaplines is enabled, when you drag a control relative to other controls, alignment boundaries appear when the edges and the text of some controls are aligned horizontally or vertically. 位置揃えライン (スナップ ガイドライン) は赤色の破線として表示されます。An alignment boundary appears as a red-dashed line.

XAML ビューでは、XAML エディターが含まれているウィンドウがアクティブ ウィンドウであり、XAML エディターが主要な編集ツールです。In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. Extensible Application Markup Language (XAML) は、アプリケーションのユーザー インターフェイスを指定するための、XML をベースにした宣言型のボキャブラリを提供します。The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. XAML ビューには、IntelliSense、オート フォーマット、構文の強調表示、およびタグ ナビゲーションが含まれています。XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. 次の図は、XAML ビューを示しています。This illustration shows XAML view:

XAML ビューXAML view

分割ビュー バーSplit view bar
分割ビュー バーは、XAML エディターが下側のウィンドウである場合に、XAML ビューの上端に表示されます。The split view bar appears at the top of XAML view when the XAML editor is in the lower window. 分割ビュー バーを使用すると、デザイン ビューと XAML ビューの相対サイズを調節できます。The split view bar enables you to control the relative sizes of Design view and XAML view. また、ビューの位置を交換したり ( [ペインの交換] ボタンを使用)、ビューの左右分割または上下分割を切り替えたり、どちらかのビューを折りたたんだりできます。You can also exchange the locations of the views (using the Swap Panes button), specify whether the views are arranged horizontally or vertically, and collapse either view.

マークアップのズームMarkup Zoom
マークアップのズームを使用すると、XAML ビューのサイズを変更できます。Markup zoom enables you to size XAML view. 20% ~ 400% の範囲でズームできます。You can zoom from 20% to 400%.

デバイス ウィンドウDevice window

XAML デザイナーの [デバイス] ウィンドウを使用すると、デザイン時にプロジェクトのさまざまなビュー、表示、および表示オプションをシミュレートできます。The Device window in XAML Designer enables you to simulate at design-time various views, displays, and display options for your project. [デバイス] ウィンドウは、XAML デザイナーを使用しているときに [デザイン] メニューから使用できます。The Device window is available on the Design menu when you are working in the XAML Designer. 次のように表示されます。Here's what it looks like:

[デバイス] ウィンドウDevice window

[デバイス] ウィンドウで使用可能なオプションは、次のとおりです。These are the options available in the Device window:

表示Display
アプリの異なる画面サイズと解像度を指定します。Specifies different display sizes and resolutions for the app.

[方向]Orientation
アプリの向きを [横] または [縦]に指定します。Specifies different orientations for the app: Landscape or Portrait.

エッジEdge
アプリの端の位置揃えを [両方][左][右]、または [なし]に指定します。Specifies different edge alignments for your app: Both, Left, Right, or None.

ハイコントラストHigh Contrast
選択したコントラスト設定でアプリをプレビューします。Preview the app based on the selected contrast setting. [既定]以外の値を設定すると、App.xaml 内に設定された RequestedTheme プロパティではなく、こちらの設定値が使用されます。This setting, when set to a value other than Default, will override the RequestedTheme property set in App.xaml.

スケーリングのオーバーライドOverride scaling
デザイン画面内でのドキュメント スケーリングのエミュレーションをオンまたはオフに切り替えます。Turns on and off emulation of document scaling within the design surface. スケーリング パーセントを 1 の倍数で上げることができます。This enables you to increase the scaling percentage by one factor. エミュレーションをオンにするには、このチェック ボックスをオンにします。Select the check box to turn on emulation. たとえば、スケーリング パーセントが 100% の場合、デザイン画面内のドキュメントは 140% までスケールアップします。For instance, if your scaling percentage is 100%, the document within the design surface will scale up to 140%. 現在のスケーリング パーセントが 180 の場合、このオプションは無効になります。This option is disabled if the current scaling percentage is 180.

最小の幅Minimum width
最小幅の設定を指定します。Specifies the minimum width setting. 最小幅は App.xaml で変更できます。The minimum width can be changed in App.xaml.

テーマTheme
アプリのテーマを指定します。Specifies the app theme. たとえば、[Dark] テーマと [Light] テーマを切り替えることができます。For example, you might switch between a Dark and a Light theme.

クロムの表示Show chrome
[デザイン] ビューでアプリの周囲にタブレットのフレームをシミュレート表示するかどうかを切り替えます。Turns on and off the simulated tablet frame around your app in Design view. フレームを表示するには、チェック ボックスをオンにします。Select the check box to show the frame.

クリップして表示Clip to display
表示モードを指定します。Specifies the display mode. ドキュメントのサイズを表示サイズに合わせてクリップするには、チェック ボックスをオンにします。Select the check box to clip the document size to the display size.

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

XAML デザイナーの [ドキュメント アウトライン] ウィンドウでは、次のタスクを実行できます。The Document Outline window in XAML Designer helps you perform these tasks:

  • アートボード上のすべての要素の階層構造を表示する。View the hierarchical structure of all elements on the artboard.

  • 要素を選択して変更する (たとえば、階層構造内の別の場所に移動したり、アートボード上で変更したり、[プロパティ] ウィンドウでプロパティを設定したりする)。Select elements so that you can modify them (move them around in the hierarchy, modify them on the artboard, set their properties in the Properties window, and so on). 詳細については、「 Working with elements in XAML Designer」を参照してください。For more info, see Working with elements in XAML Designer

  • コントロールである要素のテンプレートを作成および変更する。Create and modify templates for elements that are controls.

  • 選択した要素のコンテキスト メニューを使用する。Use the context menu for selected elements. アートボードで選択した要素に対しても、同じメニューを使用できます。The same menu is also available for selected elements in the artboard.

    [ドキュメント アウトライン] ウィンドウを表示するには、メニュー バーで [表示][その他のウィンドウ][ドキュメント アウトライン]の順に選択します。To view the Document Outline window, on the menu bar choose View, Other Windows, Document Outline.

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

    [ドキュメント アウトライン] ウィンドウで使用可能なオプションは、次のとおりです。These are the options available in the Document Outline window:

    [ドキュメント アウトライン]Document Outline
    [ドキュメント アウトライン] ウィンドウのメイン ビューには、ドキュメントの階層がツリー構造で表示されます。The main view in the Document Outline window displays the hierarchy of a document in a tree structure. ドキュメント アウトラインの階層状の特性を利用して、さまざまな詳細レベルでドキュメントを調査し、要素を 1 つずつ、またはまとめてロックしたり非表示にしたりできます。You can use the hierarchical nature of the document outline to examine the document at varying levels of detail, and to lock and hide elements singly or in groups.

    表示/非表示Show/hide
    ドキュメント アウトラインにある項目に対応するアートボード要素を表示または非表示にします。Displays or hides artboard elements that correspond to items in the Document Outline. [表示/非表示] ボタン (要素を表示している状態では目のシンボルとして表示される) を使用するか、Ctrl + H キーを押して要素を非表示にするか、Shift + Ctrl + H キーを押して表示します。Use the Show/hide buttons, which display a symbol of an eye when shown, or press CTRL+H to hide elements and SHIFT+CTRL+H to display them.

    ロック/ロック解除Lock/unlock
    ドキュメント アウトラインにある項目に対応するアートボード要素をロックまたはロック解除します。Locks or unlocks artboard elements that correspond to items in the Document Outline. ロックされている要素は変更できません。Locked elements can't be modified. [ロック/ロック解除] ボタン (要素がロックされている状態では南京錠のシンボルとして表示される) を使用するか、Ctrl + L キーを押して要素をロックするか、Shift + Ctrl + L キーを押してロック解除します。Use the Lock/unlock buttons, which display a padlock symbol when locked, or press CTRL+L to lock elements and SHIFT+CTRL+L to unlock them.

    スコープを pageRoot に戻すReturn scope to pageRoot
    [ドキュメント アウトライン] ウィンドウの上端に表示される上向き矢印のシンボルです。ドキュメント アウトラインを前のスコープに戻します。The option at the top of the Document Outline window, which shows an up arrow symbol, returns the document outline to the previous scope. スタイルまたはテンプレートのスコープにある場合にのみ使用できます。Scoping up is applicable only when you're in the scope of a style or template.

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

[プロパティ] ウィンドウでは、コントロールのプロパティの値を設定できます。The Properties window enables you to set property values on controls. 次のように表示されます。Here's what it looks like:

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

[プロパティ] ウィンドウの上部にはさまざまなオプションがあります。There are various options at the top of the Properties window. 現在選択されている要素の名前を変更するには、 [名前] ボックスを使用します。You can change the name of the currently selected element by using the Name box. 左上にあるアイコンは、現在選択されている要素を表します。In the upper-left corner, there's an icon that represents the currently selected element. プロパティをカテゴリ別またはアルファベット順に並べ替えるには、 [並べ替え]の一覧で [カテゴリ][名前] 、または [ソース] をクリックします。To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list. コントロールのイベントの一覧を表示するには、 [イベント] ボタン (稲妻のシンボルが表示されている) をクリックします。To see the list of events for a control, click the Events button, which displays a lightning bolt symbol. プロパティを検索するには、 [検索プロパティ] ボックスにプロパティの名前を入力し始めます。To search for a property, start to type the name of the property in the Search Properties box. 入力した文字列に一致するプロパティが [プロパティ] ウィンドウに表示されます。The Properties window displays the properties that match your search as you type. 一部のプロパティでは、下矢印ボタンを選択して、詳細プロパティを設定することができます。Some properties allow you to set advanced properties by selecting a down arrow button. プロパティの使用とイベントの処理の詳細ついては、「 クイック スタート: コントロールの追加とイベントの処理」を参照してください。For more info on using properties and handling events, see Quickstart: adding controls and handling events

各プロパティの値の右側には、 プロパティ マーカー がボックスのシンボルとして表示されます。To the right of each property value is a property marker that appears as a box symbol. プロパティ マーカーの外観は、プロパティに適用されるデータ バインドやリソースの有無を示します。The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. たとえば、白色のボックス シンボルは既定値を示します。黒色のボックス シンボルは、通常、ローカル リソースが適用されていることを示します。オレンジ色のボックスは、通常、データ バインドが適用されていることを示します。For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. プロパティ マーカーをクリックすると、スタイルの定義に移動したり、データ バインディング ビルダーを開いたり、リソース ピッカーを開いたりできます。When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.

関連項目See Also

Working with elements in XAML Designer Working with elements in XAML Designer
リソースを作成して適用する方法 How to create and apply a resource
チュートリアル: XAML デザイナーでデータにバインドするWalkthrough: Binding to data in XAML Designer