読者です 読者をやめる 読者になる 読者になる

割と普通なブログ

Microsoft Azure や ASP.NET、Java EE 系の話題を記載します

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>

ついでに表示例。