XAML、コード、または XAML デザイナーを使用して、要素 (コントロール、レイアウト、図形) をアプリに追加できます。 このトピックでは、Visual Studio または Blend for Visual Studio の XAML デザイナーで要素を操作する方法について説明します。
レイアウトに要素を追加する
レイアウト は、UI 内の要素のサイズ設定と配置のプロセスです。 ビジュアル要素を配置するには、レイアウト パネルに配置する必要があります。
Panelには、FrameworkElement 型のコレクションである子プロパティがあります。
Panel、StackPanel、Grid などのさまざまな子要素を使用して、レイアウト コンテナーとして機能し、ページ上に要素を配置および配置できます。
既定では、 Grid パネルは、ページまたはフォーム内の最上位のレイアウト コンテナーとして使用されます。 最上位のページ レイアウト内にレイアウト パネル、コントロール、またはその他の要素を追加できます。
XAML デザイナーでレイアウトに要素を追加するには、次のいずれかの操作を行います。
ツールボックス内の要素をダブルクリックします (または、 ツールボックス で要素を選択して Enter キーを押 します)。
ツールボックスからアートボードに要素をドラッグします。
要素の階層化順序を変更する
XAML デザイナーのアートボードに 2 つの要素がある場合、1 つの要素がレイヤー順にもう一方の要素の前に表示されます。 要素の一覧の下部にある [ドキュメント アウトライン] ウィンドウは最も前面の要素です (要素の ZIndex プロパティが設定されている場合を除く)。 ページ、フォーム、またはレイアウト コンテナーに要素を挿入すると、要素はアクティブなコンテナー要素の他の要素の前に自動的に配置されます。 要素の順序を変更するには、[ 順序 ] コマンドを使用するか、[ドキュメント アウトライン] ウィンドウのオブジェクト ツリー内の要素をドラッグします。
レイヤーの順序を変更するには、次のいずれかの操作を行います。
[ ドキュメント アウトライン ] ウィンドウで、要素を上下にドラッグして、目的のレイヤー順序を作成します。
[ドキュメント アウトライン] ウィンドウまたはレイヤーの順序を変更するアートボード内の要素を右クリックし、[ 順序] をポイントして、次のいずれかをクリックします。
Front に移動 して、要素を注文の先頭まで移動します。
要素 を順序で 1 レベル前に移動するための操作です。
後方に送信して、要素を順序で一つ前のレベルに戻します。
Back に送信 して、要素を注文の背面まで送信します。
[プロパティ] ウィンドウの [レイアウト] セクションで ZIndex プロパティを変更します。 重複する要素の場合、 ZIndex プロパティは、[ドキュメント アウトライン] ウィンドウに表示される要素の順序よりも優先されます。 ZIndex 値が高い要素は、要素が重なると前面に表示されます。
要素の配置を変更する
アートボード内の要素を配置するには、メニュー コマンドを使用するか、要素をスナップ線にドラッグします。
スナップ線は、アプリ内の他の要素を基準にして要素を配置するのに役立つ視覚的な手掛かりです。
メニュー コマンドを使用して 2 つ以上の要素を配置するには:
配置する要素を選択します。 Ctrl キーを 押しながら要素を選択すると、複数の要素を選択できます。
[プロパティ] ウィンドウの [レイアウト] セクションの [HorizontalAlignment] の下にある [左]、[中央]、[右]、または [ストレッチ] のいずれかのプロパティを選択します。
[プロパティ] ウィンドウの [レイアウト] セクションの [VerticalAlignment] で、上、中央、下、またはストレッチのいずれかのプロパティを選択します。
スナップ線を使用して 2 つ以上の要素を配置するには、XAML デザイナーで、少なくとも 2 つの要素を含むレイアウトで、いずれかの要素をドラッグまたはサイズ変更して、エッジが別の要素に揃えるようにします。
エッジが整列されると、 配置境界が配置 を示すように表示されます。 アラインメント境界は赤い破線です。 線形境界は、 スナップ線へのスナップ が有効になっている場合にのみ表示されます。 配置境界を示すアートボードの図については、「 XAML デザイナーを使用した UI の作成」を参照してください。
要素の余白を変更する
XAML デザイナーの余白によって、アートボード上の要素の周囲にある空き領域の量が決まります。 たとえば、余白は、要素の外側の端と、要素を含む Grid パネルの境界との間のスペースの量を指定します。 余白は、 StackPanelに含まれる要素間のスペースの量も指定します。
[プロパティ] ウィンドウで要素の余白を変更するには:
余白を変更する要素を選択します。
[プロパティ] ウィンドウの [ レイアウト ] で、 Margin プロパティ (上、 左、 右、 または下) の値 (ピクセル単位またはデバイスに依存しない単位で約 1/96 インチ) を変更します。
アートボードで要素のレイアウト コンテナーを基準にして要素の余白を変更するには、要素が選択され、レイアウト コンテナー内にある要素の周囲に表示される 余白 装飾をクリックします。 余白装飾を示す図については、「 XAML デザイナーを使用した UI の作成」を参照してください。
余白装飾が垂直方向または水平方向に開いている場合、その余白は設定されません。 余白アドーナーが閉じている場合、余白が設定されます。
余白装飾を開き、反対の余白が設定されていない場合、反対の余白はアートボード内の要素の位置に応じて正しい値に設定されます。 左と右のような反対の余白の場合、少なくとも 1 つのプロパティが常に設定されます。
Important
キャンバスなどの一部のレイアウト コンテナー内に配置された要素には、余白装飾がありません。
StackPanel 内に配置された要素には、StackPanelの向きに応じて、左右の余白または上下の余白の余白装飾があります。
要素のグループ化とグループ解除
XAML デザイナーで 2 つ以上の要素をグループ化すると、新しいレイアウト コンテナーが作成され、そのコンテナー内にそれらの要素が配置されます。 レイアウト コンテナーに 2 つ以上の要素を配置すると、そのグループ内の要素が 1 つの要素であるかのように、グループを簡単に選択、移動、および変換できます。 グループ化は、ナビゲーション要素を構成するボタンなど、何らかの方法で相互に関連する要素を識別する場合にも役立ちます。 要素のグループ化を解除すると、要素を含むレイアウト コンテナーを削除するだけです。
要素を新しいレイアウト コンテナーにグループ化するには:
グループ化する要素を選択します。 (複数の要素を選択するには、 Ctrl キーを押しながら要素をクリックします)。
選択した要素を右クリックし、[ グループ化] をポイントして、グループを配置するレイアウト コンテナーの種類をクリックします。
ヒント
Viewbox、Border、または ScrollViewer を選択して要素をグループ化すると、要素は Viewbox、Border、または ScrollViewer 内の新しいグリッド パネルに配置されます。 これらのレイアウト コンテナーのいずれかで要素のグループを解除すると、 Viewbox、 Border、または ScrollViewer のみが削除され、[ グリッド ] パネルは残ります。
Gridパネルを削除するには、要素のグループを解除します。
要素のグループを解除してレイアウトを削除するには、グループ解除するグループを右クリックし、[ グループ解除] をクリックします。 [ドキュメント アウトライン] ウィンドウで選択した項目を右クリックし、[グループ化] または [グループ解除] をクリックして、要素を グループ 化または グループ解除することもできます。
要素のレイアウトをリセットする
レイアウト リセット コマンドを使用して、要素の特定のレイアウト プロパティの既定値を復元できます。 このコマンドを使用すると、要素の余白、配置、幅、高さ、サイズを個別またはまとめてリセットできます。
要素のレイアウトをリセットするには、[ドキュメント アウトライン] ウィンドウまたはアートボードで要素を右クリックし、[レイアウト>ResetPropertyName] を選択します。ここで、PropertyName はリセットするプロパティです (または、[レイアウト]>[すべて設定] を選択して要素のすべてのレイアウト プロパティをリセットします)。