タイトルの通りです。要はマージンの話。
WPFは、レイアウトを指定すると、そのレイアウトの通りにコントロールを配置してくれる。
恐らくお世話になる率が高いGridレイアウトは、大体のレイアウトをこれだけで記述できちゃうくらいパワフルな代物です。
たとえば、下のようなコードを書くと絵のような画面になります。
<UserControl x:Class="SilverlightTest2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="何か入れてね" />
<TextBox Grid.Row="1" AcceptsReturn="True" />
<StackPanel Grid.Row="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Content="決定" />
<Button Content="キャンセル" />
</StackPanel>
</Grid>
</UserControl>
割とありがちな、画面の説明のためのテキストと入力欄とOKなのかNGなのかを選択するためのボタンがあるタイプの画面です。なんというか、敷き詰められた感があって手抜き感たっぷりに感じてしまう。
何かの番組（今もしてるのかな？）に出てきそうな「ゆとりの空間魔術師」とまでは行かなくても、普通にそれっぽい隙間は入れたいと思うのは人間の性。そういうときに、マージンを使います。
マージンを指定するのは簡単で、Marginプロパティに値を設定するだけ。四方に同じマージンを指定する場合は、単純に値を１つ設定するだけでいいようになってる。
たとえば、ボタンやテキストボックスの周りに幅５のマージンが欲しかったら下のようにすればいい。
<TextBlock Grid.Row="0" Text="何か入れてね" />
<TextBox Grid.Row="1" AcceptsReturn="True" />
<StackPanel Grid.Row="2"
Margin="5"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Margin="5" Content="決定" />
<Button Margin="5" Content="キャンセル" />
</StackPanel>
一律に５とったもんだから、若干不自然な感じもするけど、隙間は開いた。こんな風に調整していけばピッチピチに詰まった画面じゃなくなる。後はセンスの問題だ！
ちなみに、マージンの指定方法には知ってるだけだと下のような指定方法がある。
多分これで全部じゃないかな…？
Margin="5"：上下左右に5
Margin="5,10"：左右に5、上下に10
Margin="10,20,30,40"：左に10、上に20、右に30、下に40
ここら辺の変換は、Marginプロパティにコンバータがしかけてあるのだろう。実際のMarginプロパティの型はLeft,Top,Right,Bottomというdouble型のプロパティを持つThickness構造体であらわされてる。
C#からマージンを指定する場合は、この型を使うことになる。
投稿日時 : 2008年7月1日 17:04