次の方法で共有

配置、余白、パディング

  • [アーティクル]

XAML アプリでは、ほとんどのユーザー インターフェイス (UI) 要素が FrameworkElement クラスから継承されます。 すべての FrameworkElement には、レイアウトの動作に影響を与える、寸法、配置、余白、パディングの各プロパティがあります。 次のガイダンスでは、これらのレイアウト プロパティを使用して、アプリの UI が読みやすく、任意のコンテキストで使いやすいことを確認する方法の概要を示します。

寸法 (高さ、幅)

適切なサイズ設定により、すべてのコンテンツが明確で読みやすくなります。 ユーザーは、プライマリ コンテンツを解読するためにスクロールまたはズームする必要はありません。

ディメンションを示す図

  • Height と Width は要素のサイズを指定します。 既定値は数学的に NaN (数値ではありません) です。 効果のないピクセル単位で測定された固定値を設定することもAutoまたはの適切なサイズ設定を使用して流動的な動作を行うことができます。

  • ActualHeight と ActualWidth は、実行時の要素のサイズを指定する読み取り専用プロパティです。 柔軟なレイアウトが拡大または縮小されると、 SizeChanged イベントの値が変化します。 RenderTransformでは ActualHeight と ActualWidth の値は変更されないことに注意してください。

  • MinWidth/MaxWidth と MinHeight/MaxHeight は柔軟なサイズ変更が有効な場合に、要素のサイズを制限する値を指定します。

  • FontSize とその他のテキストのプロパティは、テキスト要素のレイアウトのサイズを制御します。 テキスト要素には明示的に宣言されたディメンションはありませんが、ActualWidth と ActualHeight が計算されています。

Alignment

配置により、UI はきちんと整理され、バランスが取れた外観になり、視覚的な階層とリレーションシップを確立するために使用することもできます。

配置を示す図

  • HorizontalAlignment と VerticalAlignment は、親コンテナー内の要素の配置方法を指定します。

    • HorizontalAlignment の値は、Left、Center、Right、および Stretch です。
    • VerticalAlignment の値は、Top、Center、Bottom、および Stretch です。

  • Stretch は両方のプロパティの既定値であり、要素は親コンテナーに用意されているすべてのスペースを埋めます。 実数の Height と Width は Stretch 値を取り消し、代わりに中央の値として機能します。 Button などの一部のコントロールは、既定のスタイルで既定の Stretch 値をオーバーライドします。

  • HorizontalContentAlignment と VerticalContentAlignment は、コンテナー内の子要素の配置方法を指定します。

  • 配置は、レイアウト パネル内のクリッピングに影響を与える可能性があります。 たとえば、 HorizontalAlignment="Left"では、コンテンツが ActualWidth より大きい場合、要素の右側がクリップされます。

  • テキスト要素は、 TextAlignment プロパティを使用します。 一般に、既定値の左揃えを使用することをお勧めします。 テキストのスタイル設定の詳細については、「 Typography」を参照してください。

余白とパディング

余白とパディングのプロパティを使用すると、UI の見た目が乱雑になりすぎたり、スパースになりすぎないようにしたり、ペンやタッチなどの特定の入力を簡単に使用したりすることもできます。 コンテナーとそのコンテンツの余白とパディングを表示する図を次に示します。

xaml 余白と埋め込み図

Margin

Margin は、要素を囲む空白のスペースの量を制御します。 Margin は ActualHeight と ActualWidth にピクセルを追加せず、ヒット テストとソース入力イベントの要素の一部とは見なされません。

  • 余白の値は、均一または個別にすることができます。 Margin="20"では、20 ピクセルの均一な余白が、左側、上、右、および下部の要素に適用されます。 Margin="0,10,5,25"では、値は (その順序で) 左、上、右、および下に適用されます。

  • 余白は加法です。 2 つの要素がどちらも 10 ピクセルの均一な余白を指定し、任意の向きの隣接するピアである場合、それらの間の距離は 20 ピクセルです。

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

  • 余白の値は最後に制約されるため、コンテナーは要素をクリップまたは制約できるため、余白には注意してください。 Margin 値は、要素がレンダリングされない原因である可能性があります。Margin を適用すると、要素のディメンションを 0 に制限できます。

Padding

Padding は、要素の内側の境界線と、その子コンテンツまたは要素の間のスペースの量を制御します。 正の Padding 値を指定すると、要素のコンテンツ領域が減少します。

Margin とは異なり、Padding は FrameworkElement のプロパティではありません。 それぞれが独自の Padding プロパティを定義するクラスがいくつかあります。

  • Control.Padding: すべての Control 派生クラスに継承されます。 すべてのコントロールにコンテンツがあるわけではないため、これらのコントロールでは、プロパティを設定しても何も行われません。 コントロールに罫線がある場合は、その境界線の内側に埋め込みが適用されます。
  • Border.Padding: BorderThickness/BorderBrush によって作成された四角形の線と Child 要素の間のスペースを定義します。
  • ItemsPresenter.Padding: 指定されたパディングを各項目の周囲に配置して、アイテム コントロールの項目の外観を向上させます。
  • TextBlock.Padding および RichTextBlock.Padding: テキスト要素のテキストの周囲まで境界ボックスを拡大します。 これらのテキスト要素には Background がないため、視覚的に見えにくい場合があります。 そのため、代わりに、Block コンテナーで Margin 設定を使用します。

これらの各ケースでは、要素にも Margin プロパティがあります。 Margin と Padding の両方が適用されている場合、これらは加法です。外側のコンテナーと内部コンテンツの間の見かけ上の距離は、余白とパディングになります。

例

実際のコントロールに対する余白とパディングの効果を見てみましょう。 既定の余白とパディングの値が 0 のグリッド内の TextBox を次に示します。

余白とパディングが 0 の TextBox

次に示すのは、この XAML に示すように、TextBox の余白とパディングの値を持つ TextBox と Grid です。

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

正の余白とパディング値を持つ TextBox

Style リソース

コントロールで各プロパティ値を個別に設定する必要はありません。 通常、プロパティ値を Style リソースにグループ化し、Style をコントロールに適用する方が効率的です。 これは、多くのコントロールに同じプロパティ値を適用する必要がある場合に特に当てはまります。 スタイルの使用方法の詳細については、「 XAML スタイルを参照してください。

一般的な推奨事項

  • 特定の主要要素にのみ測定値を適用し、他の要素に対して流動的なレイアウト動作を使用します。 これにより、ウィンドウの幅が変更されたときに応答 UI が提供されます。

  • 測定値を使用する場合は、 すべての寸法、余白、およびパディングを 4 epx ずつインクリメントする必要があります。 XAML で 効果のないピクセルとスケーリングを使用して すべてのデバイスと画面サイズでアプリを読みやすくする場合は、UI 要素を 4 の倍数でスケーリングします。 4 単位で値を使用すると、ピクセル全体に合わせて配置することで最適なレンダリングが得られます。

  • 小さいウィンドウ幅 (640 ピクセル未満) の場合は、12 epx の余白をお勧めします。ウィンドウの幅を大きくするには、24 epx の余白をお勧めします。

推奨される余白