配置、余白、およびパディング

サイズのプロパティ (幅、高さ、および制約) に加え、要素は、配置、余白、パディングのプロパティも含むことができ、これらは、要素がレイアウト パスに移動し、UI に表示されるときにレイアウト動作に影響を与えます。 配置、余白、パディングのプロパティとサイズのプロパティの間には関係があり、ここには、FrameworkElement オブジェクトが配置されるときに一般的なロジックの流れがあります。これによって、各値は、状況に応じて使用されたり、無視されたりします。

配置プロパティ

HorizontalAlignment プロパティと VerticalAlignment プロパティは、親要素に割り当てられたレイアウト スペース内で子要素がどのように配置されるかを説明します。 これらのプロパティを一緒に使って、コンテナーのレイアウト ロジックはコンテナー (パネルまたはコントロール) 内に子要素を配置できます。 配置プロパティは、アダプティブ レイアウトのコンテナーに目的のレイアウトのヒントを与えることが目的であるため、基本的に、FrameworkElement の子に設定され、別の FrameworkElement コンテナーの親によって解釈されます。 配置の値は、向きの 2 つの端のいずれかに揃えて要素を配置するか、または中央に揃えるかを指定できます。 ただし、両方の配置プロパティの既定値は Stretch です。 Stretch 配置にすると、要素は、レイアウトで提供されたスペース全体に配置されます。 Stretch は既定値であるため、明示的な測定値も、レイアウトの測定パスからの DesiredSize 値もない場合は、アダプティブ レイアウトの手法を使う方がより簡単です。 この既定値を使うと、コンテンツの明示的な高さと幅がコンテナー内に収まらなかったり、各コンテナーのサイズを指定するまでにクリップされたりする危険性がありません。

注意

一般的なレイアウトの原則として、特定の主要な要素にのみ測定値を適用し、他の要素にはアダプティブ レイアウト動作を使うことが最善です。 こうすると、ユーザーが最上位アプリのウィンドウ サイズを指定するときに柔軟なレイアウト動作を提供できます。このようなサイズ指定は、いつでも実行できるのが普通です。

1 つのアダプティブ コンテナー内に Height 値と Width 値、またはクリッピングがある場合は、Stretch が配置の値として設定されていても、レイアウトは、そのコンテナーの動作によって制御されます。 パネルでは、HeightWidth によって防止されている Stretch 値は、値が Center の場合と同様に機能します。

自然な、または計算された高さと幅の値がない場合、これらのサイズの値は数学的に NaN (数値ではない) です。 要素は、レイアウト コンテナーからサイズが与えられるのを待ちます。 レイアウトの実行後は、配置が使用された要素の Stretch 要素の ActualHeight プロパティと ActualWidth プロパティに値があります。 NaN 値は、子要素の HeightWidth に残るため、アプリ ウィンドウのサイズ設定などのレイアウト関連の変更により、もう一度レイアウト サイクルが発生する場合などに、アダプティブ動作を再び実行できます。

TextBlock などのテキスト要素には、通常、明示的に宣言された幅はありませんが、ActualWidth で照会できる計算された幅があり、この幅によっても、Stretch 配置が取り消されます。 (FontSize プロパティとその他のテキスト プロパティだけでなく、テキスト自体も既に、意図したレイアウト サイズのヒントになっています。 通常は、テキストを拡大する必要はありません。) コントロール内のコンテンツとして使われるテキストにも同じ効果があります。表示する必要のあるテキストが存在すると、ActualWidth が計算され、これによっても、目的の幅とサイズが、含んでいるコントロールまで縮小されます。 テキスト要素には、行ごとのフォント サイズ、改行、およびその他のテキスト プロパティに基づく ActualHeight もあります。

Grid などのパネルには既に、レイアウトの他のロジック (行と列の定義、および描画先のセルを示すために要素に設定された Grid.Row などの添付プロパティ) があります。 この場合、配置プロパティは、そのセルの領域内でコンテンツがどのように配置されるかに影響しますが、セルの構造とサイズ指定は、Grid の設定によって制御されます。

項目のコントロールによって項目が表示される場合があり、この場合は、データが項目の基本型です。 ここでは、ItemsPresenter が関与します。 データ自体は FrameworkElement 派生型ではありませんが、ItemsPresenter は、この派生型です。このため、プレゼンターの HorizontalAlignmentVerticalAlignment を設定でき、その配置が、項目コントロールで表示されるときにデータ項目に適用されます。

配置プロパティは、親レイアウト コンテナーのサイズに余分なスペースがある場合にのみ効果があります。 既にレイアウト コンテナーでコンテンツがクリッピングされている場合、配置は、クリッピングが適用される要素の領域に影響を与える可能性があります。 たとえば、HorizontalAlignment="Left" を設定すると、要素の適正なサイズがクリッピングされます。

余白

Margin プロパティは、レイアウトの状態で要素とピアとの間隔を説明し、さらに、要素と、その要素を含むコンテナーのコンテンツ領域の間の距離について説明します。 要素を、サイズが ActualHeightActualWidth である境界ボックスまたは四角形であると考える場合は、Margin レイアウトが、その四角形の外側に適用され、ActualHeightActualWidth にピクセルは追加されません。 また、余白は、入力イベントのヒット テストとソースの目的のために要素の一部と見なされることもありません。

一般的なレイアウト動作では、Margin 値のコンポーネントは最後に制約され、HeightWidth が既に 0 までに制約された後にのみ制約されます。 したがって、コンテナーが既にクリッピングしたり、要素を制約したりしている場合は余白に注意してください。注意していないと、余白が原因で要素が表示されなくなる場合があります (余白が適用された後に要素のサイズのいずれかが 0 に制約されているため)。

各余白の値は、Margin="20" などの構文を使って均等にすることができます。 この構文を使用すると、20 ピクセルの均等な余白が要素に適用され、左右と上下の端に 20 ピクセルの余白が作成されます。 余白の値は、4 つの異なる値にすることもでき、それぞれの値は左、上、右、下に (この順序で) 適用される異なる余白を表します。 たとえば、Margin="0,10,5,25" と記述します。 Margin プロパティの基になる型は Thickness 構造で、そのプロパティは、Left 値、Top 値、Right 値、および Bottom 値を個別の Double 値として保持しています。

余白は加算できます。 たとえば、2 つの要素がそれぞれ、10 ピクセルの均等な余白を指定し、いずれかの向きで隣り合うピアである場合、要素間の距離は 20 ピクセルです。

負の余白も使用できます。 ただし、負の余白を使用すると、クリッピングやピアの過剰な描画が発生することが多いため、負の余白の使用は一般的な手法ではありません。

Margin プロパティを適切に使用すると、要素の描画位置と、隣り合う要素と子の描画位置を非常に細かく制御できます。 Visual Studio で XAML デザイナー内の要素をドラッグしてその位置を設定すると、変更された XAML に、その要素の Margin の値があるのがわかります。この値を使って、位置の変更が元の XAML へとシリアル化されています。

Block クラスは、Paragraph の基本クラスであり、Margin プロパティも備えています。 このクラスには、その Paragraph の位置が親コンテナー内でどのように設定されるかについて同様の効果があります。この親コンテナーは、通常は RichTextBlock オブジェクトまたは RichEditBox オブジェクトです。また、この効果は、複数の段落の位置が、RichTextBlock.Blocks コレクションの他の Block のピアに対してどのように設定されるかにも及びます。

余白

Padding プロパティは、要素と、それに含まれる子要素またはコンテンツの間の距離を説明します。 コンテンツは、複数の子を持つことができる要素である場合、すべてのコンテンツを囲む単一の境界ボックスとして処理されます。 たとえば、2 つの項目を含む ItemsControl がある場合は、Padding が、これらの項目を含む境界ボックスの周りに適用されます。 Padding は、コンテナーの測定パスと配置パスの計算では、利用可能なサイズから減算されます。また、コンテナー自体でそれを含む要素のレイアウト パスが実行されるときは、目的のサイズの値の一部です。 Margin とは異なり、PaddingFrameworkElement のプロパティではありません。実際は、複数のクラスがあり、それぞれが独自の Padding プロパティを定義しています。

  • Control.Padding: すべての Control 派生クラスに継承されます。 コンテンツのないコントロールもあるため、一部のコントロール (AppBarSeparator など) では、プロパティを設定しても効果はありません。 コントロールに境界線がある場合 (Control.BorderThickness を参照) は、パディングがその内部に適用されます。
  • Border.Padding: BorderThickness/BorderBrush によって作成された四角形の線と Child 要素の間のスペースを定義します。
  • ItemsPresenter.Padding: 指定された余白を各項目の周囲に配置して、項目コントロールの項目に生成されるビジュアルの外観を向上させます。
  • TextBlock.Padding および RichTextBlock.Padding: テキスト要素のテキストの周囲まで境界ボックスを拡大します。 これらのテキスト要素には Background がありません。このため、テキストのパディングと、テキスト要素のコンテナーが適用した他のレイアウト動作を判別しにくい場合があります。 この理由により、テキスト要素のパディングはほとんど使用されず、含まれる Block コンテナーに Margin 設定を使用する方が一般的です (RichTextBlock の場合)。

このような場合のそれぞれで、同じ要素に Margin プロパティもあります。 余白とパディングの両方が適用される場合、いずれも、外部のコンテナーと内部のコンテンツの間に見える距離は余白とパディングを加算したものであるという意味で、加算可能です。 コンテンツ、要素、またはコンテナーに適用されるさまざまなバックグラウンド値がある場合、余白が終了し、パディングが開始されるポイントは、表示によって判別できる可能性があります。

サイズ (高さ、幅)

FrameworkElementHeight プロパティと Width プロパティは、多くの場合、レイアウト パスの実行時の配置、余白、およびパディングのプロパティの動作に影響します。 特に、実数 Height および Width 値は、Stretch の配置を取り消すと同時に、レイアウトの測定のパスで確立される DesiredSize 値のコンポーネントの候補として昇格されます。 HeightWidth には、次の制約プロパティがあります。Height 値は、MinHeightMaxHeight で制約でき、Width 値は、MinWidthMaxWidth で制約できます。 また、ActualWidthActualHeight は、レイアウト パスの完了後にのみ有効な値を含む、計算された読み取り専用プロパティです。 サイズと、制約プロパティまたは集計プロパティの相関方法について詳しくは、FrameworkElement.HeightFrameworkElement.Width の注釈をご覧ください。

リファレンス