XAML デザイナーでの要素の操作
XAML で、コードで、または XAML デザイナーを使用して、アプリに要素 (コントロール、レイアウト、および図形) を追加できます。このトピックでは、XAML デザイナーで要素を使用する方法について説明します。
レイアウトへの要素の追加
レイアウトとは、UI の要素のサイズを変更して、それらを配置するプロセスです。ビジュアル要素を配置するには、それらを Panel レイアウトに配置する必要があります。Panel には、FrameworkElement 型のコレクションである子プロパティがあります。Canvas、StackPanel、Grid など、Panel の各種の子要素をレイアウト コンテナーとして使用して、ページに要素を配置して整列することができます。
既定では、Grid パネルが、JavaScript を使用して Windows 用に開発された Windows ストアアプリのページ ドキュメント内で最上位レイアウト コンテナーとして使用されます。最上位のページ レイアウト内で、レイアウト パネル、コントロール、またはその他の要素を追加できます。
レイアウトに要素を追加するには
Visual Studio プロジェクトの [ドキュメント アウトライン] ウィンドウで、次のいずれかを実行します。
.gif "Hh965587.collapse_all(ja-jp,VS.120).gif")
要素の重ね順の変更
XAML デザイナーのアートボード上に要素が 2 つある場合は、重ね順に従って、一方の要素が他方の前に表示されます。[ドキュメント アウトライン] ウィンドウの要素の一覧で一番下にある要素が、最も前に表示される要素です (要素に [ZIndex] プロパティが設定されている場合を除く)。ドキュメント コンテナーまたはレイアウト コンテナーに要素を挿入すると、その要素は自動的に、アクティブなコンテナー要素内にある他の要素の前に配置されます。要素の順序を変更するには、[順序] コマンドを使用するか、[ドキュメント アウトライン] ウィンドウのオブジェクト ツリーで要素をドラッグします。
重ね順を変更するには
以下のいずれかを実行します。
[ドキュメント アウトライン] ウィンドウで、目的の重ね順になるように、要素を上下にドラッグします。
[ドキュメント アウトライン] ウィンドウまたはアートボードで重ね順を変更する要素を右クリックし、[順序] をポイントしてから、次のいずれかの操作を実行します。
[最前面へ移動] をクリックして、要素を一番前へ移動します。
[前面へ移動] をクリックして、要素を 1 つ前へ移動します。
[背面へ移動] をクリックして、要素を 1 つ後ろへ移動します。
[最背面へ移動] をクリックして、要素を一番後ろへ移動します。
[プロパティ] ウィンドウの [レイアウト] セクションで [ZIndex] プロパティを変更します。要素の重ね順では、[ドキュメント アウトライン] ウィンドウに表示される要素の順序より、[ZIndex] プロパティが優先されます。[ZIndex] 値が小さい要素ほど、他の要素より前に表示されます。
要素の配置の変更
メニュー コマンドを使用するか、要素をスナップ ガイドラインにドラッグして、アートボードで要素を整列できます。
スナップ ガイドラインは、アプリ内の他の要素に対して要素を整列させる場合に役立つ視覚上の手掛かりです。
メニュー コマンドを使用して複数の要素を整列させるには
整列させる要素を選択します。Ctrl キーを押しながら要素を選択すると、複数の要素を選択できます。
[プロパティ] ウィンドウの [レイアウト] セクションの [HorizontalAlignment] の下にあるプロパティ、[Left]、[Center]、[Right]、[Stretch] から 1 つを選択します。
[プロパティ] ウィンドウの [レイアウト] セクションの [VerticalAlignment] の下にあるプロパティ、[Top]、[Center]、[Bottom]、[Stretch] から 1 つを選択します。
スナップ ガイドラインを使用して複数の要素を整列させるには
2 つ以上の要素が含まれている XAML デザイナーのレイアウトで、要素の 1 つをドラッグするか、そのサイズを変更して、その端を別の要素と整列させます。
端が整列すると、整列を示す配置境界が表示されます。配置境界は、赤い破線です。配置境界は、スナップ ガイドラインへのスナップが有効な場合にのみ表示されます。配置境界を示すアートボードの図については、「XAML デザイナーを使用した UI の作成」を参照してください。
要素の余白の変更
XAML デザイナーの余白によって、アートボード上の要素の周囲にある空白領域の量が決まります。たとえば、要素の外側の端と、その要素を格納している Grid パネルの境界との間の領域の大きさが、余白によって指定されます。または、余白によって、StackPanel に含まれる各要素間の領域の大きさが指定されます。
要素の余白を変更するには
余白を変更する要素を選択します。
[プロパティ] ウィンドウの [レイアウト] の下で、いずれかの [Margin] プロパティ ([Top]、[Left]、[Right]、[Bottom]) の値 (ピクセル単位、つまり、デバイスに依存しない単位。これは、約 1/96 インチです) を変更します。
アートボードの要素の余白を変更するには
レイアウト コンテナーを基準として要素の空白を変更するには、要素が選択され、レイアウト コンテナー内にあるときに、アートボードで要素の周りに表示される空白ガイドをクリックします。空白ガイドを示す図については、「XAML デザイナーを使用した UI の作成」を参照してください。
余白ガイドが縦または横に開いている場合は、余白が設定されていません。余白ガイドが閉じている場合は、余白が設定されています。
空白ガイドを開いたときに、反対側の余白が設定されていないと、反対側の空白は、アートボードの要素の場所に従って適切な値に設定されます。[Left] と [Right] の余白のような向かい側の余白の場合は、少なくとも一方のプロパティが常に設定されます。
重要
Canvas など、一部のレイアウト コンテナーの内部に配置された要素には、空白ガイドがありません。StackPanel の内部に配置された要素には、StackPanel の向きに応じて、左右の余白または上下の余白に余白ガイドがあります。
要素のグループ化およびグループ解除
XAML デザイナーの複数の要素をグループ化すると、新しいレイアウト コンテナーが作成され、そのコンテナー内にそれらの要素が配置されます。複数の要素を 1 つのレイアウト コンテナーにまとめて配置すると、そのグループ内の複数の要素を、単一の要素のように簡単に選択、移動、および変換できます。グループ化は、相互に関係のある複数の要素 (1 つのナビゲーション要素を構成する各ボタンなど) をまとめて扱う場合も便利です。要素のグループ化を解除する場合は、それらの要素を含むレイアウト コンテナーを削除するだけです。
要素をグループ化して新しいレイアウト コンテナーに配置するには
グループ化する要素を選択します。複数の要素を選択するには、Ctrl キーを押しながら要素をクリックします。
選択した要素を右クリックし、[グループ化設定] をポイントしてから、そのグループを配置するレイアウト コンテナーの種類をクリックします。
ヒント
Viewbox、T:Windows.UI.Xaml.Controls.Border、または ScrollViewer を選択して要素をグループ化すると、要素は、Viewbox、Border、または ScrollViewer 内の新しい Grid パネルに配置されます。これらのレイアウト コンテナーのいずれかの要素のグループ化を解除すると、Viewbox、Border、または ScrollViewer のみが削除され、Grid パネルは削除されません。Grid パネルを削除するには、要素のグループ化を再度解除します。
要素のグループ化を解除してレイアウトを削除するには
- グループ化を解除するグループを右クリックし、[Ungroup] (グループ化解除) をクリックします。
[ドキュメント アウトライン] ウィンドウで、選択した項目を右クリックし、[グループ化設定] または [Ungroup] (グループ化解除) をクリックして、要素のグループ化またはグループ化解除を実行することもできます。
要素のレイアウトのリセット
[レイアウトのリセット] コマンドを使用して、要素の特定のレイアウト プロパティを既定値に戻すことができます。このコマンドを使用すると、要素の余白、配置、幅、高さ、およびサイズを、個別に、またはまとめてリセットできます。
要素のレイアウトをリセットするには
- [ドキュメント アウトライン] ウィンドウまたはアートボードで、要素を右クリックし、[レイアウトのリセット] を選択してから、リセットするプロパティをクリックします (または、要素のすべてのレイアウト プロパティをリセットする場合は [すべて] をクリックします)。