XAML デザイナーでの要素の操作Working with elements in XAML Designer

アプリに、コントロール、レイアウト、図形などの要素を追加するには、XAML、コード、または XAML デザイナーを使用します。You can add elements—controls, layouts, and shapes—to your app in XAML, in code, or by using XAML Designer. このトピックでは、Visual Studio または Blend for Visual Studio で XAML デザイナーを使用して要素を操作する方法について説明します。This topic describes how to work with elements in XAML Designer in Visual Studio or Blend for Visual Studio.

レイアウトに要素を追加するAdding an element to a layout

レイアウトとは、UI に要素を配置してサイズ変更するプロセスです。Layout is the process of sizing and positioning elements in a UI. ビジュアル要素を配置するには、それらを Panel レイアウトに配置する必要があります。To position visual elements, you must put them in a layout Panel. Panel には、FrameworkElement 型のコレクションである子プロパティがあります。A Panel has a child property which is a collection of FrameworkElement types. Panel のさまざまな子要素 (CanvasStackPanelGrid など) をレイアウト コンテナーとして利用し、ページに要素を配置して整列することができます。You can use various Panel child elements, such as Canvas, StackPanel, and Grid, to serve as layout containers and to position and arrange the elements on a page.

既定では、Grid パネルをページまたはフォーム内の最上位のレイアウト コンテナーとして使用します。By default, a Grid panel is used as the top-level layout container within a page or form. 最上位のページ レイアウト内に、レイアウト パネル、コントロール、その他の要素を追加していきます。You can add layout panels, controls, or other elements within the top-level page layout.

レイアウトに要素を追加するにはTo add an element to a layout

  • XAML デザイナーで、次のいずれかの操作を行います。In XAML Designer, do one of the following:

    • [ツールボックス] にある要素をダブルクリックします (または、ツールボックスにある要素を選択して Enter キーを押します)。Double-click an element in the Toolbox (or select an element in the Toolbox and press Enter).

    • 要素を [ツールボックス] からアートボードにドラッグします。Drag an element from the Toolbox to the artboard.

    • [ツールボックス] で、いずれかの描画ツール ([楕円][四角形] など) を選択し、アクティブなパネルに要素を描画します。In the Toolbox, select one of the drawing tools (for example, Ellipse or Rectangle), and then draw an element in the active panel.

要素の重ね順の変更Changing the layering order of elements

XAML デザイナーのアートボード上に 2 つの要素がある場合、1 つの要素はもう一方の要素より重ね順が前に表示されます。When there are two elements on the artboard in XAML Designer, one element will appear in front of the other in the layering order. [ドキュメント アウトライン] ウィンドウで要素の一覧の最下位にある要素が最前面の要素です (要素の [ZIndex] プロパティが設定されている場合を除く)。At the bottom of the list of elements in the Document Outline window is the front-most element (except for when the ZIndex property for an element is set). ページ、フォーム、またはレイアウト コンテナーに要素を挿入するとき、自動的に要素はアクティブなコンテナー要素内の他の要素より前面に配置されます。When you insert an element into a page, form, or layout container, the element is automatically placed in front of other elements in the active container element. 要素の順序を変更するには、[順序] コマンドを使用するか、[ドキュメント アウトライン] ウィンドウのオブジェクト ツリーで要素をドラッグします。To change the order of elements, you can use the Order commands or drag the elements in the object tree in the Document Outline window.

重ね順を変更するにはTo change the layering order

  • 次のいずれかの操作を行います。Do one of the following:

    • [ドキュメント アウトライン] ウィンドウで要素を上下にドラッグして目的の重ね順を作成します。In the Document Outline window, drag the elements up or down to create the desired layering order.

    • 重ね順を変更する要素を [ドキュメント アウトライン] ウィンドウまたはアートボードで右クリックし、[順序] をポイントした後、次のいずれかをクリックします。Right-click the element in the Document Outline window or the artboard for which you want to change the layering order, point to Order, and then click one of the following:

      • [最前面へ移動]: 要素を重ね順の一番前に移動します。Bring to Front to bring the element all the way to the front of the order.

      • [前面へ移動]: 要素を重ね順の 1 つ前に移動します。Bring Forward to bring the element forward one level in the order.

      • [背面へ移動]: 要素を重ね順の 1 つ後ろに移動します。Send Backward to send the element back one level in the order.

      • [最背面へ移動]: 要素を重ね順の一番後ろに移動します。Send to Back to send the element all the way to the back of the order.

      [プロパティ] ウィンドウの [レイアウト] セクションで [ZIndex] プロパティを変更します。Change the ZIndex property in the Layout section in the Properties window. 要素が重なり合うときは、[ZIndex] プロパティのほうが、[ドキュメント アウトライン] ウィンドウに表示される要素の順序よりも優先されます。For overlapping elements, the ZIndex property takes precedence over the order of elements shown in the Document Outline window. [ZIndex] 値が小さい要素ほど、他の要素より前に表示されます。An element that has a lower ZIndex value appears in front when elements overlap.

要素の配置を変更するChanging the alignment of an element

アートボードで要素の配置を調整するには、メニュー コマンドを使用するか、要素をスナップ ガイドラインに沿ってドラッグします。You can align elements in the artboard by using menu commands or by dragging elements to snaplines.

スナップ ガイドラインは、アプリ内の他の要素に対して要素を整列させる場合に役立つ視覚上の手掛かりです。A snapline is a visual cue that helps you align an element relative to other elements in the app.

メニュー コマンドを使用して 2 つ以上の要素の位置を揃えるにはTo align two or more elements by using menu commands

  1. 位置を揃える要素を選択します。Select the elements that you want to align. 複数の要素を選択するには、Ctrl キーを押したまま、要素を選択します。You can select more than one element by pressing and holding the Ctrl key while you select the elements.

  2. [プロパティ] ウィンドウの [レイアウト] セクションの [HorizontalAlignment] で、次のいずれかを選択します: [Left][Center][Right]、または [Stretch]Select one of the following properties under HorizontalAlignment in the Layout section of the Properties window: Left, Center, Right, or Stretch.

  3. [プロパティ] ウィンドウの [レイアウト] セクションの [VerticalAlignment] で、次のいずれかを選択します: [Top][Center][Bottom]、または [Stretch]Select one of the following properties under VerticalAlignment in the Layout section of the Properties window: Top, Center, Bottom, or Stretch.

スナップ ガイドラインを使用して 2 つ以上の要素の位置を揃えるにはTo align two or more elements by using snaplines

  • XAML デザイナーでは、レイアウトに少なくとも 2 つの要素が含まれている場合、1 つの要素がもう 1 つの要素の端と揃うようにドラッグしたりサイズを変更したりできます。In XAML Designer, in a layout that contains at least two elements, drag or resize one of the elements so that the edge is aligned with another element.

    端が揃うと、合図として位置揃えラインが表示されます。When the edges are aligned, an alignment boundary appears to indicate alignment. 位置揃えライン (スナップ ガイドライン) は赤色の破線です。The alignment boundary is a red dashed line. 位置揃えラインは、 [スナップ ガイドラインへのスナップ] が有効に設定されている場合にのみ表示されます。Alignment boundaries appear only when snapping to snaplines is enabled. 位置揃えラインが表示されたアートボードの図解は、「XAML デザイナーを使用した UI の作成」をご覧ください。For an illustration of the artboard that shows an alignment boundary, see Creating a UI by using XAML Designer.

要素の余白を変更するChanging the an element's margins

XAML デザイナーでの余白により、アートボード上で要素の周りに確保される空白領域の量が決まります。The margins in XAML Designer determine the amount of empty space that is around an element on the artboard. たとえば、要素の外側の端と、その要素を格納している Grid パネルの境界との間に取られる領域の大きさは、余白によって指定されます。For example, margins specify the amount of space between the outside edges of an element and the boundaries of a Grid panel that contains the element. また、StackPanel に含まれる要素間の領域の量も、余白によって指定されます。Margins also specify the amount of space between elements that are contained in a StackPanel.

[プロパティ] ウィンドウで要素の余白を変更するにはTo change an element's margins in the Properties window

  1. 余白を変更する要素を選択します。Select the element whose margins you want to change.

  2. [プロパティ] ウィンドウの [レイアウト] で、いずれかの [Margin] プロパティ ([Top][Left][Right][Bottom]) の値 (単位はピクセル。デバイスに依存しない単位。約 1/96 インチ) を変更します。Under Layout in the Properties window, change the value (in pixels or device-independent units, which are approximately 1/96 inch) for any of the Margin properties (Top, Left, Right, or Bottom).

アートボードで要素の余白を変更するにはTo change an element's margins in the artboard

  • レイアウト コンテナーを基準として要素の余白を変更するには、レイアウト コンテナー内にある要素を選択したときにアートボードで要素の周りに表示される余白ガイドをクリックします。To change the margins of an element relative to its layout container, click the margin adorners that appear around the element in the artboard when the element is selected and is within a layout container. 余白ガイドを示す図解は、「XAML デザイナーを使用した UI の作成」をご覧ください。For an illustration that shows margin adorners, see Creating a UI by using XAML Designer.

    縦方向または横方向の余白ガイドが開いている場合、余白は設定されていません。If a margin adorner is open, vertically or horizontally, that margin isn't set. 余白ガイドが閉じている場合は、余白が設定されています。If a margin adorner is closed, that margin is set.

    空白ガイドを開いたときに、反対側の余白が設定されていないと、反対側の空白は、アートボードの要素の場所に従って適切な値に設定されます。When you open a margin adorner and the opposite margin isn't set, the opposite margin is set to the correct value according to the location of the element in the artboard. [Left][Right] の余白のような向かい側の余白の場合は、少なくとも一方のプロパティが常に設定されます。For opposite margins, such as the Left and Right margins, at least one property is always set.

    重要

    <xref:Windows.UI.Xaml.Controls.Canvas> など、一部のレイアウト コンテナーの内部に配置された要素には、空白ガイドがありません。Elements placed inside some layout containers, such as a <xref:Windows.UI.Xaml.Controls.Canvas>, don't have margin adorners. <xref:Windows.UI.Xaml.Controls.StackPanel> 内の要素に配置する要素には、StackPanel の方向に従って、左右の余白またはの上下の余白のいずれかに余白ガイドがあります。Elements placed inside a <xref:Windows.UI.Xaml.Controls.StackPanel> have margin adorners for either the left and right margins or the top and bottom margins, depending on the orientation of the StackPanel.

要素のグループ化とグループ解除Grouping and ungrouping elements

XAML デザイナーで 2 つ以上の要素をグループ化するには、新しいレイアウト コンテナーを作成して、グループ化する要素をその中に配置します。Grouping two or more elements in XAML Designer creates a new layout container and places those elements within that container. 複数の要素を 1 つのレイアウト コンテナーにまとめて配置すると、そのグループ内の複数の要素を単一の要素のように簡単に選択、移動、および変換することができます。Placing two or more elements together in a layout container enables you to easily select, move, and transform the group as if the elements in that group were one element. グループ化は、相互に関係のある複数の要素 (1 つのナビゲーション要素を構成するボタンなど) を識別するためにも便利です。Grouping is also useful for identifying elements that are related to each other in some way, such as the buttons that make up a navigation element. 要素のグループ化を解除するには、それらの要素を含むレイアウト コンテナーを削除するだけです。When you ungroup elements, you are simply deleting the layout container that contained the elements.

要素を新しいレイアウト コンテナーに入れてグループ化するにはTo group elements into a new layout container

  1. グループ化する要素を選択します。Select the elements that you want to group. (複数の要素を選択するには、Ctrl キーを押しながらクリックします。)(To select multiple elements, press and hold the Ctrl key while you click them.)

  2. 選択した要素を右クリックし、[グループ (パネル) に含める] をポイントし、そのグループを配置するレイアウト コンテナーの種類をクリックします。Right-click the selected elements, point to Group Into, and then click the type of layout container in which you want the group to reside.

    ヒント

    要素をグループ化するために <xref:Windows.UI.Xaml.Controls.Viewbox>、<xref:Windows.UI.Xaml.Controls.Border>、または <xref:Windows.UI.Xaml.Controls.ScrollViewer> を選択すると、<xref:Windows.UI.Xaml.Controls.Viewbox>、<xref:Windows.UI.Xaml.Controls.Border>、または <xref:Windows.UI.Xaml.Controls.ScrollViewer> 内の新しい <xref:Windows.UI.Xaml.Controls.Grid> パネルに要素が配置されます。If you select <xref:Windows.UI.Xaml.Controls.Viewbox>, <xref:Windows.UI.Xaml.Controls.Border>, or <xref:Windows.UI.Xaml.Controls.ScrollViewer> to group your elements, the elements are placed in a new <xref:Windows.UI.Xaml.Controls.Grid> panel within the <xref:Windows.UI.Xaml.Controls.Viewbox>, <xref:Windows.UI.Xaml.Controls.Border>, or <xref:Windows.UI.Xaml.Controls.ScrollViewer>. これらのレイアウト コンテナーのいずれかに配置した要素をグループ解除すると、<xref:Windows.UI.Xaml.Controls.Viewbox>、<xref:Windows.UI.Xaml.Controls.Border>、または <xref:Windows.UI.Xaml.Controls.ScrollViewer> のみが削除され、<xref:Windows.UI.Xaml.Controls.Grid> パネルは残ります。If you ungroup elements in one of these layout containers, only the <xref:Windows.UI.Xaml.Controls.Viewbox>, <xref:Windows.UI.Xaml.Controls.Border>, or <xref:Windows.UI.Xaml.Controls.ScrollViewer> is deleted, and the <xref:Windows.UI.Xaml.Controls.Grid> panel remains. この Grid パネルを削除するには、要素をもう一度グループ解除します。To delete the Grid panel, ungroup the elements again.

要素をグループ解除してレイアウトを削除するにはTo ungroup elements and delete the layout

  • グループ解除するグループを右クリックして、[グループ解除] をクリックします。Right-click the group that you want to ungroup and click Ungroup.

    要素のグループ化やグループ解除を行うには、[ドキュメント アウトライン] ウィンドウで選択したアイテムを右クリックして、[グループ (パネル) に含める] または [グループ解除] をクリックします。You can also group or ungroup elements by right-clicking selected items in the Document Outline window and clicking Group Into or Ungroup.

要素のレイアウトをリセットするResetting the element layout

要素の特定のレイアウト プロパティを既定値に戻すには、レイアウトのリセットのコマンドを使用します。You can restore default values for specific layout properties of an element by using the Layout Reset commands. このコマンドを使用すると、要素の余白、配置、幅、高さ、およびサイズを、個別に、または一括してリセットできます。By using this command, you can reset the margin, alignment, width, height, and size of an element, either individually or collectively.

要素のレイアウトをリセットするにはTo reset the element layout

  • [ドキュメント アウトライン] ウィンドウまたはアートボードで要素を右クリックし、[レイアウト][PropertyName のリセット] の順に選択します。ここで、PropertyName は、リセットするプロパティです (あるいは、要素のすべてのレイアウト プロパティをリセットするには、[レイアウト][すべてリセット] の順に選択します)。In the Document Outline window or the artboard, right-click the element, choose Layout, Reset PropertyName, where PropertyName is the property that you want to reset (or choose Layout, Reset All to reset all the layout properties for the element).

関連項目See Also

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