前のエントリでコードでガリガリ作ったものと同じものをXAMLで書いてみようと思う。
まずは、２ｘ２のグリッドを定義してみたもの。
<Window x:Class="XAMLGridLayout.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAML Grid Window" Height="300" Width="300">
<Grid ShowGridLines="True">
<!-- 行との定義 -->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- 列の定義 -->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Window>
Grid.RowDefinitionsで行の定義、Grid.ColumnDefinitionsで列の定義を書く。
これを実行すると、２ｘ２に区切られたWindowが出てくる。
ここにボタンを乗せてみようと思う。
<Window x:Class="XAMLGridLayout.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="XAML Grid Window" Height="300" Width="300">
<Grid ShowGridLines="True">
<!-- 行との定義 -->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- 列の定義 -->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Grid.Rowで行をGrid.Columnで列の場所を指定 -->
<Button Content="0,0" Grid.Row="0" Grid.Column="0" />
<Button Content="0,1" Grid.Row="0" Grid.Column="1" />
<Button Content="1,0" Grid.Row="1" Grid.Column="0" />
<Button Content="1,1" Grid.Row="1" Grid.Column="1" />
</Grid>
</Window>
こんな感じ。コードでわかれば楽だ。