Silverlight Gridで複数のTextBlockを表示する

このドキュメントの内容は、以下の通りです。

• Silverlight関連記事

MicrosoftのSilverlightベースのアプリケーションで文字列を表示するのに TextBlockを利用することができる。

XAMLに複数のTextBlockを並べる。
このまま実行すると４つのTextBlockが重なって表示される。

<UserControl x:Class="SilverlightApplication1.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">
        <TextBlock Foreground="Blue" FontSize="24">1</TextBlock>
        <TextBlock Foreground="Red" FontSize="24">2</TextBlock>
        <TextBlock Foreground="Green" FontSize="24">3</TextBlock>
        <TextBlock Foreground="Orange" FontSize="24">4</TextBlock>
    </Grid>
</UserControl>

このままだと表示しているテキストが読めない。
TextBlockを囲んでいるGridがあるが、このGridは子要素を行と列に配置することができる。
Gridは、デフォルトでは、１行１列で構成されている。
行と列を複数定義するためには、 ColumnDefinitionsとRowDefinitionsを使用する。

Gridの行と列を定義する。TextBlockの属性 Gird.RowとGrid.ColumnでGridのどの位置に表示するかを指定する。

<UserControl x:Class="SilverlightApplication1.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.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

	<!-- 列の定義 -->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock Foreground="Blue" FontSize="24"
		Grid.Row="0" Grid.Column="0">1</TextBlock>
        <TextBlock Foreground="Red" FontSize="24"
		Grid.Row="0" Grid.Column="1">2</TextBlock>
        <TextBlock Foreground="Green" FontSize="24"
		Grid.Row="1" Grid.Column="0">3</TextBlock>
        <TextBlock Foreground="Orange" FontSize="24"
		Grid.Row="1" Grid.Column="1">4</TextBlock>
    </Grid>
</UserControl>

Gridの属性値 ShowGridLines="True" を指定するとGridの境界線を表示できる。

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">

Silverlight関連記事

[2009-02-06-1] Silverlight 2の開発言語
[2009-02-07-1] Silverlight 2の開発環境を構築する
[2009-02-08-1] Silverlight アプリケーションを開発する Hello World編
[2009-02-09-1] Silverlight TextBlockで文字列を表示する
[2009-02-11-1] Silverlight Gridで複数のTextBlockを表示する

---