WPFレイアウトまとめ(基本事項)

コンピュータ

WPFのレイアウトは「自動レイアウト」が前提です。
固定サイズ指定で組むよりも、親コンテナ(Panel)に配置ルールを持たせて組み立てる方が破綻しにくく、拡張もしやすいです。


1. コントロールは基本的に親の領域いっぱいに広がる

WPFのコントロールは、特に指定しない場合は親コンテナのサイズに合わせて自動的に伸縮します。
多くのコントロールはデフォルトで Stretch 相当の動作になります。

<Button Content="OK"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch" />

2. Width / Height は基本的に使わない(最終手段)

サイズを固定したい場合は Width / Height を指定できますが、基本は避けるのが無難です。

<Button Content="OK" Width="200" Height="50" />

避けたい理由:

  • ウィンドウサイズ変更に追従しない
  • DPI変更(表示倍率)に弱い
  • フォントサイズ変更に弱い
  • ローカライズ(文字列が長くなる)に弱い
  • 自動レイアウトの利点が消える

3. Margin と Padding

Margin(外余白)

コントロールの外側の余白です。

<Button Content="OK" Margin="10" />
<Button Content="OK" Margin="10,20,10,20" />  <!-- Left,Top,Right,Bottom -->

Padding(内余白)

コントロール内部の余白です。ボタンなら「枠」と「文字」の間の余白になります。

<Button Content="OK" Padding="10" />

4. Grid がレイアウトの基本

Grid はWPFで最も重要なレイアウトコンテナです。領域を行・列に分割し、サイズを自動/固定/相対で指定できます。

サイズ指定の種類

  • Auto:内容サイズに合わせる
  • 数値:固定サイズ
  • *:残り領域を相対割合で割る
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <TextBlock Text="Header" />
  <TextBox Grid.Row="1" />
</Grid>

比率指定例(2 : 1):

<RowDefinition Height="2*" />
<RowDefinition Height="*" />

5. レイアウトは「親コンテナ(Panel)」が決める

WPFでは「子コントロールが勝手に配置される」のではなく、親コンテナが配置ルールを持つのが基本です。
そのため、画面を組むときは「器(Panel)をどうするか」を先に考えると作りやすくなります。

代表的なコンテナ:

コンテナ 用途
Grid 領域分割(最重要)
StackPanel 縦/横に順番に並べる
DockPanel 上下左右にドッキング配置
WrapPanel 折り返し配置
Canvas 絶対座標(固定配置)
UniformGrid 均等分割(全セル同サイズ)

6. ItemsControl系は「コレクション表示」の器

一覧表示など、コレクションを表示する場合は ItemsControl 系を使います。

  • ItemsControl
  • ListBox
  • ListView
  • ComboBox

内部的には ItemsPanel が「どのように並べるか(レイアウト)」を決めています。


7. 自動レイアウトがWPFの基本思想

WPFは固定レイアウトではなく、自動レイアウトで伸縮しながら成立する思想です。
そのため、Width/Height よりも、Grid や各種 Panel を組み合わせてレイアウトを構築するのが基本になります。


まとめ

  1. コントロールは基本 Stretch(親に合わせて伸縮)
  2. Width / Height は最終手段
  3. Margin / Padding で余白調整
  4. Grid がレイアウトの中心
  5. レイアウトは「親コンテナ(Panel)」が決める
  6. 一覧表示は ItemsControl
  7. WPFは自動レイアウト前提で考える

コメント