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

Visual Studio 2017 RC の最新のドキュメントの詳細については、Visual Studio 2017 RC ドキュメントをご参照ください。

アプリに、コントロール、レイアウト、図形などの要素を追加するには、XAML、コード、または XAML デザイナーを使用します。 このトピックでは、Visual Studio または Blend for Visual Studio で XAML デザイナーを使用して要素を操作する方法について説明します。

レイアウトに要素を追加する

レイアウトとは、UI に要素を配置してサイズ変更するプロセスです。 ビジュアル要素を配置するには、要素をレイアウト パネルに配置する必要があります。 Panel には、FrameworkElement 型のコレクションである子プロパティがあります。 Panel のさまざまな子要素である CanvasStackPanelGrid などをレイアウト コンテナーとして利用し、ページに要素を配置して整列します。

既定では、Grid パネルをページまたはフォーム内の最上位のレイアウト コンテナーとして使用します。 最上位のページ レイアウト内に、レイアウト パネル、コントロール、その他の要素を追加していきます。

レイアウトに要素を追加するには

  • XAML デザイナーで、次のいずれかの操作を行います。

    • [ツールボックス] にある要素をダブルクリックします (または、ツールボックスにある要素を選択して Enter キーを押します)。

    • 要素を [ツールボックス] からアートボードにドラッグします。

    • [ツールボックス] でいずれかの描画ツール (たとえば、Ellipse または Rectangle) を選択してから、アクティブなパネルに要素を描画します。

要素の重ね順の変更

XAML デザイナーのアートボード上に 2 つの要素がある場合、1 つの要素はもう一方の要素より重ね順が前に表示されます。 [ドキュメント アウトライン] ウィンドウで要素の一覧の最下位にある要素が最前面の要素です (要素の [ZIndex] プロパティが設定されている場合を除く)。 ページ、フォーム、またはレイアウト コンテナーに要素を挿入するとき、自動的に要素はアクティブなコンテナー要素内の他の要素より前面に配置されます。 要素の順序を変更するには、[順序] コマンドを使用するか、または [ドキュメント アウトライン] ウィンドウのオブジェクト ツリー内で要素をドラッグします。

重ね順を変更するには

  • 次のいずれかの操作を行います。

    • [ドキュメント アウトライン] ウィンドウで要素を上下にドラッグして目的の重ね順を作成します。

    • 重ね順を変更する要素を [ドキュメント アウトライン] ウィンドウまたはアートボードで右クリックし、[順序] をポイントした後、次のいずれかをクリックします。

      • [最前面へ移動]: 要素を重ね順の一番前に移動します。

      • [前面へ移動]: 要素を重ね順の 1 つ前に移動します。

      • [背面へ移動]: 要素を重ね順の 1 つ後ろに移動します。

      • [最背面へ移動]: 要素を重ね順の一番後ろに移動します。

      [プロパティ] ウィンドウの [レイアウト] セクションで [ZIndex] プロパティを変更します。 要素が重なり合うときは、[ZIndex] プロパティのほうが、[ドキュメント アウトライン] ウィンドウに表示される要素の順序よりも優先されます。 要素が重なり合う場合、ZIndex 値が小さい要素のほうが前面に表示されます。

要素の配置を変更する

アートボードで要素の配置を調整するには、メニュー コマンドを使用するか、要素をスナップ ガイドラインに沿ってドラッグします。

スナップ ガイドライン は、要素をアプリの他の要素を基準として位置に揃えるために役立つ目印です。

メニュー コマンドを使用して 2 つ以上の要素の位置を揃えるには

  1. 位置を揃える要素を選択します。 複数の要素を選択するには、Ctrl キーを押したまま、要素を選択します。

  2. [プロパティ] ウィンドウの [レイアウト] セクションの [HorizontalAlignment] で、次のいずれかを選択します: [Left][Center][Right]、または [Stretch]

  3. [プロパティ] ウィンドウの [レイアウト] セクションの [VerticalAlignment] で、次のいずれかを選択します: [Top][Center][Bottom]、または [Stretch]

スナップ ガイドラインを使用して 2 つ以上の要素の位置を揃えるには

  • XAML デザイナーでは、レイアウトに少なくとも 2 つの要素が含まれている場合、1 つの要素がもう 1 つの要素の端と揃うようにドラッグしたりサイズを変更したりできます。

    端が揃うと、合図として位置揃えラインが表示されます。 位置揃えライン (スナップ ガイドライン) は赤色の破線です。 位置揃えラインは、[スナップ ガイドラインへのスナップ] が有効に設定されている場合にのみ表示されます。 位置揃えラインが表示されたアートボードの図解は、「XAML デザイナーを使用した UI の作成」を参照してください。

要素の余白を変更する

XAML デザイナーでの余白により、アートボード上で要素の周りに確保される空白領域の量が決まります。 たとえば、要素の外側の端と、その要素を格納している Grid パネルの境界との間に取られる領域の大きさは、余白によって指定されます。 また、StackPanel に含まれる要素間の領域の量も、余白によって指定されます。

[プロパティ] ウィンドウで要素の余白を変更するには

  1. 余白を変更する要素を選択します。

  2. [プロパティ] ウィンドウの [レイアウト] で、いずれかの [Margin] プロパティ ([Top][Left][Right][Bottom]) の値 (単位はピクセル。デバイスに依存しない単位。約 1\/96 インチ) を変更します。

アートボードで要素の余白を変更するには

  • レイアウト コンテナーを基準として要素の余白を変更するには、レイアウト コンテナー内にある要素を選択したときにアートボードで要素の周りに表示される余白ガイドをクリックします。 余白ガイドを示す図解は、「XAML デザイナーを使用した UI の作成」を参照してください。

    縦方向または横方向の余白ガイドが開いている場合、余白は設定されていません。 余白ガイドが閉じている場合は、余白が設定されています。

    余白ガイドを開いた場合に、反対側の余白が設定されていないと、アートボード上での要素の位置に従って正しい値が反対側の余白に設定されます。 向かい合う余白 ([Left][Right] など) は、少なくとも 1 つのプロパティが常に設定されます。

    重要

    一部のレイアウト コンテナー(<xref:Windows.UI.Xaml.Controls.Canvas> など) に配置する要素には、空白ガイドがありません。 <xref:Windows.UI.Xaml.Controls.StackPanel> 内の要素に配置する要素には、StackPanel の方向に従って、左右の余白またはの上下の余白のいずれかに余白ガイドがあります。

要素のグループ化とグループ解除

XAML デザイナーで 2 つ以上の要素をグループ化するには、新しいレイアウト コンテナーを作成して、グループ化する要素をその中に配置します。 複数の要素を 1 つのレイアウト コンテナーにまとめて配置すると、そのグループ内の複数の要素を単一の要素のように簡単に選択、移動、および変換することができます。 グループ化は、相互に関係のある複数の要素 (1 つのナビゲーション要素を構成するボタンなど) を識別するためにも便利です。 要素のグループ化を解除するには、それらの要素を含むレイアウト コンテナーを削除するだけです。

要素を新しいレイアウト コンテナーに入れてグループ化するには

  1. グループ化する要素を選択します。 (複数の要素を選択するには、Ctrl キーを押しながらクリックします。)

  2. 選択した要素を右クリックし、[グループ (パネル) に含める] をポイントし、そのグループを配置するレイアウト コンテナーの種類をクリックします。

    ヒント

    要素をグループ化するために <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> パネルに要素が配置されます。 これらのレイアウト コンテナーのいずれかに配置した要素をグループ解除すると、<xref:Windows.UI.Xaml.Controls.Viewbox>、<xref:Windows.UI.Xaml.Controls.Border>、または <xref:Windows.UI.Xaml.Controls.ScrollViewer> のみが削除され、<xref:Windows.UI.Xaml.Controls.Grid> パネルは残ります。 この Grid パネルを削除するには、要素をもう一度グループ解除します。

要素をグループ解除してレイアウトを削除するには

  • グループ解除するグループを右クリックして、[グループ解除] をクリックします。

    要素のグループ化やグループ解除を行うには、[ドキュメント アウトライン] ウィンドウで選択したアイテムを右クリックして、[グループ (パネル) に含める] または [グループ解除] をクリックします。

要素のレイアウトをリセットする

要素の特定のレイアウト プロパティを既定値に戻すには、レイアウトのリセットのコマンドを使用します。 このコマンドを使用すると、要素の余白、配置、幅、高さ、およびサイズを、個別に、または一括してリセットできます。

要素のレイアウトをリセットするには

  • [ドキュメント アウトライン] ウィンドウまたはアートボードで要素を右クリックし、[レイアウト]、[PropertyName のリセット] の順に選択します。ここで、PropertyName は、リセットするプロパティです (あるいは、要素のすべてのレイアウト プロパティをリセットするには、[レイアウト][すべてリセット] の順に選択します)。

参照

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