WPF4.5入門その20 「レイアウトに影響を与えるプロパティ」

過去記事

レイアウトに影響を与えるプロパティ

ここまでレイアウトを制御する代表的なコントロールを見てきました。これらのコントロールを組み合わせて使うことで、思った場所にコントロールを置くことができます。ここでは、WPFのほぼすべてのコントロールが共通でもつレイアウトに影響を与えるプロパティについてみていきます。レイアウトコントロールと、ここで紹介するプロパティを組み合わせることでWPFの協力なレイアウトシステムを余すことなく使うことが出来るようになります。

水平方向・垂直方向の位置指定

まず、コントロールの水平方向・垂直方向の位置を指定するプロパティを以下に示します。

プロパティ	説明
HorizontalAlignment HorizontalAlignment { get; set; }	水平方向の配置方法を指定します。左寄せの場合はLeft、右寄せの場合はRight、中央寄せの場合はCenter、全体にひろげる場合はStretchを指定します。デフォルト値はStretchです。一部のコントロール（Labelなど）ではデフォルト値が変わっているものもあります。
VerticalAlignment VerticalAlignment { get; set; }	素直方向の配置方法を指定します。上寄せの場合はTop、下寄せの場合はBottom、中央寄せの場合はCenter、全体にひろげる場合はStretchを指定します。デフォルト値はStretchです。一部のコントロール（ComboBoxItemなど）ではデフォルト値が変わっているものもあります。

サイズの指定

コントロール自身の大きさを指定するプロパティを以下に示します。

プロパティ	説明
double Width { get; set; }	コントロールの幅を設定します。デフォルト値はNaNです。
double Height { get; set; }	コントロールの高さを設定します。デフォルト値はNaNです。
double MinWidth { get; set; }	コントロールの最小の幅を設定します。デフォルト値は0です。
double MinHeight { get; set; }	コントロールの最少の高さを設定します。デフォルト値は0です。
double MaxWidth { get; set; }	コントロールの最大の幅を設定します。デフォルト値はPositiveInfinityです。
double MinHeight { get; set; }	コントロールの最大の高さを設定します。デフォルト値はPositiveInfinityです。

XAMLで指定する場合は、数字以外に以下のような値を設定できます。

10(10pxと同じ意味)：ピクセル単位で指定します。
10in：インチで指定します。
10cm：センチメートルで指定します。
10pt：ポイントで指定します。
Auto(WidthとHeightのみ)：NaNを設定するのと同じ意味です。

幅と高さを指定すると、可能な限りその大きさで配置されます。コントロールにサイズを指定する場合は、可能な限りMin****やMax****を使って指定することをお勧めします。こうすることで、ローカライズ時に文字が切れたりレイアウトが意図しない形に崩れたりといったことを防ぐことができます。Min****やMax****を指定すると、その範囲内で適切な大きさでコントロールが表示されます。

余白(マージン)の指定

最後に余白(マージン)を指定するMarginプロパティについて紹介します。マージンは名前の通りコントロールの周りに指定したサイズの余白をとります。XAMLで指定する場合は、以下のような指定方法があります。

5（数字1つだけの場合）：上下左右に5pxの余白をとります
5, 10（数字2つだけの場合）：左右に5px、上下に10pxの余白をとります
5, 10, 15, 20（全て指定する場合）：左に5px、上に10px、右に15px、下に20pxの余白をとります

サンプルプログラム

ここで紹介したプロパティの動作を見るためのサンプルを示します。このサンプルは、3 x 3で行と列のサイズを*に指定したGridコントロールの各マスにコントロールを配置しています。

1行目：HorizontalAlignmentプロパティとVerticalAlignmentプロパティの動作確認
2行目：Widthプロパティなどのサイズを指定するプロパティの動作確認
3行目：マージンを指定するプロパティの動作確認

XAMLを以下に示します。

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <!-- HorizontalAlignment VerticalAlighmentに関する設定 -->
    <Button Grid.Row="0" Grid.Column="0" Content="Default(Stretch)" />
    <Button Grid.Row="0" Grid.Column="1" Content="Left-Bottom" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
    <Button Grid.Row="0" Grid.Column="1" Content="Left-Top" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <Button Grid.Row="0" Grid.Column="1" Content="Right-Top" HorizontalAlignment="Right" VerticalAlignment="Top" />
    <Button Grid.Row="0" Grid.Column="1" Content="Right-Bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
    <Button Grid.Row="0" Grid.Column="1" Content="Center-Center" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <Button Grid.Row="0" Grid.Column="2" Content="Left-Center" HorizontalAlignment="Left" VerticalAlignment="Center" />
    <Button Grid.Row="0" Grid.Column="2" Content="Right-Center" HorizontalAlignment="Right" VerticalAlignment="Center" />
    <Button Grid.Row="0" Grid.Column="2" Content="Center-Top" HorizontalAlignment="Center" VerticalAlignment="Top" />
    <Button Grid.Row="0" Grid.Column="2" Content="Center-Bottom" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
 
    <!-- サイズの設定 -->
    <Button Grid.Row="1" Grid.Column="0" Content="Fixed" Width="50" Height="30" />
    <Button Grid.Row="1" Grid.Column="1" Content="MinWidth-MinHeight" MinWidth="300" MinHeight="150" />
    <Button Grid.Row="1" Grid.Column="2" Content="MaxWidth-MaxHeight" MaxWidth="125" MaxHeight="50" />
 
    <!-- 余白の設定 -->
    <Button Grid.Row="2" Grid.Column="0" Content="5, 10, 15, 20" Margin="5, 10, 15, 20" />
    <Button Grid.Row="2" Grid.Column="1" Content="15" Margin="15" />
    <Button Grid.Row="2" Grid.Column="2" Content="5, 15" Margin="5, 15" />
</Grid>

このXAMLを記述したWindowを表示すると以下のようになります。

MinWidthプロパティとMinHeightプロパティの例は、わかりにくいかもしれませんがGridのセルの大きさがボタンの最小の大きさよりも小さいためボタンがはみ出しています。

WPFにおけるピクセルについて

WPFでのピクセルは、物理的なピクセルではなくデバイス非依存ピクセルになります。デバイス非依存ピクセルとは、dpi(1インチあたりのドット数)にかかわらず1ピクセルが1/96インチになります。このため、WPFでは72dpiのモニタでも19,200dpiのプリンタでも同じサイズで描画が可能になっています。