Silverlightの？レイアウト

せっかく細々とSilverlightを弄ってるので、ノウハウをまとめておこうと思う次第。WPFのレイアウトと若干かぶりますが、まずはGrid系のレイアウトを設定します。

Gridレイアウト基礎

html等でデザインした事のある方なら、「テーブルレイアウトと一緒だよ」とか言えば通じると思います。
さて、記述するのが苦手な私は早速コードを書きますよ。

<!-- Page.xaml -->
    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Image Grid.Column="1" Grid.Row="1" Source="App_Data/Sai_note066.png" />
    </Grid>

Page.xamlのポイントは以下の点です。（※ 確認しやすくするために、「ShowGridLines="True"」属性を追加しています。）

• Gridのレイアウト定義部分
  • Grid.ColumnDefinitionsで、Gridの列を定義している。
  • Grid.RowDefinitionsで、Gridの行を定義している。
• レイアウトを使用する部分
  • Gridタグ直下の部分に、描画したいタグ（例ではImage）を記述し、「Grid.Column」で列の位置、「Grid.Row」で行の位置を定義します。（Column、Rowの位置は0から始まりますので、この例では真ん中にImage要素が来ます）

Page.xamlの例に従って記述すると、大体以下の例の様な画像になります。真ん中に

Gridレイアウト（サイズ変更、分割）

さて、さらに文を書く気力を失ってきたので、サンプルコードと画像を示しますよ。

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="200" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="200" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Image Grid.Column="1" Grid.Row="1" Source="App_Data/Sai_note066.png"  />
    <Grid x:Name="LayoutRoot2" Background="White" ShowGridLines="True"
     Grid.Column="3" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Image Grid.Column="1" Grid.Row="1" Source="App_Data/Sai_note066.png"  />
    </Grid>
</Grid>

ついでに表示例。