MetroStyleApp入門 vol39.Grid入門

日曜日 , 29, 7月 2012 Leave a comment

 (本記事はVisualStudio2012RC+Windows8RP環境で確認しております。製品版では動作が異なる可能性があるのでご注意ください。)

 

 今回はGridレイアウトについておさらいします。

 GridやCanvas、StackPanelはレイアウトを決める重要なコントロールですが、意外とちゃんと理解しないままで使っている人も多いですよね(俺だけか・・・)。

 

Grid基礎

 

 Gridを横に区切るにはRowDefinitionsを利用します。

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="300" />
            <RowDefinition Height="200" />
            <RowDefinition Height="150" />
        </Grid.RowDefinitions>
        
        <Canvas Grid.Row="0" Background="White" />
        <Canvas Grid.Row="1" Background="Blue" />
        <Canvas Grid.Row="2" Background="Yellow" />
    </Grid>

 

 上記は300px, 200px, 150pxの高さで画面を区切っています。

 それぞれの区切りにCanvasを配置しているのですが、Grid.Rowプロパティで何番目のRowDefinitionの対応しているかを定義しています。

 実行すると以下のような結果が得られます。

 

 

 おそらく直観的な結果ではないでしょうか。

 

 縦方向への区切りを入れたい場合は同様にColumnDefinitionsで定義します。

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="300" />
            <RowDefinition Height="200" />
            <RowDefinition Height="150" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="500" />
        </Grid.ColumnDefinitions>
        
        <Canvas Grid.Row="0" Grid.Column="0" Background="White" />
        <Canvas Grid.Row="1" Grid.Column="1" Background="Blue" />
        <Canvas Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

 

 このコードの実行結果は以下のようになります。

 

 この結果も直観通りだったのではないでしょうか?

 

Autoと*

 

 RowDefinition(ColumnDefinition)の指定の仕方にAutoと*(スター)という指定方法があります。
 Autoは要素の大きさに応じて自動で幅を変える指定です。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Canvas Height="100" Grid.Row="0" Grid.Column="0" Background="White" />
        <Canvas Height="200" Grid.Row="1" Grid.Column="1" Background="Blue" />
        <Canvas Height="300" Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

 上記レイアウトの実行結果が以下です。

<a href="http://coelacanth.heteml.jp/blog/wp-content/uploads/2012/07/0037.png"><img class="alignnone size-medium wp-image-1530" title="003" src="http://coelacanth.heteml.jp/blog/wp-content/uploads/2012/07/0037-300x169.png" alt="" width="300" height="169" /></a>

 内包するCanvasに指定したHeightプロパティに応じて高さが調整されました。
 例えば以下のようにCanvasにHeightプロパティを指定しないと画面上にはGridが表示されない(高さ0として表示される)ので注意しましょう。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!--高さの指定がない-->
        <Canvas Grid.Row="0" Grid.Column="0" Background="White" />
        <Canvas Grid.Row="1" Grid.Column="1" Background="Blue" />
        <Canvas Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

Auto指定で子要素の高さ指定がない場合

 

 Gridで指定した幅の残りを埋めるように拡張させる指定が*(スター)です。

 これはコードと実行結果を見た方がわかりやすいでしょう。

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Canvas Grid.Row="0" Grid.Column="0" Background="White" />
        <Canvas Grid.Row="1" Grid.Column="1" Background="Blue" />
        <Canvas Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

 

 2段目のRowが画面幅に合わせて拡張されます。

 

 

 *は比率を指定することもできます。

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Canvas Grid.Row="0" Grid.Column="0" Background="White" />
        <Canvas Grid.Row="1" Grid.Column="1" Background="Blue" />
        <Canvas Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

 

 上の場合、2つめのRowが2、3つめが1の比率になるように調整されます。

*を指定。2段目の行と3段目の行が2:1の割合で配置された

 

コードビハインドからの指定

 

 コードビハインドから動的にGridの定義を変更する場合は以下のように行います。

 以下のようなレイアウトのグリッドがあるとします。

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Canvas Grid.Row="0" Grid.Column="0" Background="White" />
        <Canvas Grid.Row="1" Height="300" Grid.Column="1" Background="Blue" />
        <Canvas Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

 

 2つめのCanvasは高さ300の指定がされているにも関わらずGridでは高さが100しかありません。

 実行結果は当然Canvasがはみ出してしまいます。

 

 2つめのRowにAutoの指定をしたい場合は以下のように指定します。

 

this.mainGrid.RowDefinitions[1].Height = GridLength.Auto;

 

RowDefinitionsは配列として要素にアクセスできます。

(XAML上のRowDefinitionにx:Name属性を与えて直接アクセルすることもできます)

 

 

  Auto指定が効いてGridが拡張されました。

 

  今度はピクセル指定をしてみましょう。

 XAMLコードは前述と同じとします。

 

            RowDefinition def = new RowDefinition();
            def.Height = new GridLength(400, GridUnitType.Pixel);

            this.mainGrid.RowDefinitions[1] = def;

 

 実行結果は以下です。

 

 

Canvas(青)の指定は300ピクセルですがGridの幅を400ピクセルに指定したため、上下に空きが発生しました。

GridUnitType列挙体の内容は以下、

Auto Auto指定です
Pixel ピクセル指定です
Star *(スター)指定です

スクロールバーを表示する

 

 先ほどの青色のCanvasがはみ出したXAMLのケースで、Autoで自動で拡張するのではなく、高さを100ピクセルのままでスクロールバーを表示させたい場合があるでしょう。

 その場合はScrollViewを利用して以下のように記述します。

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Canvas Grid.Row="0" Grid.Column="0" Background="White" />
        <ScrollViewer  Grid.Row="1" Grid.Column="1">
            <Canvas Height="300" Background="Blue" />
        </ScrollViewer>
        <Canvas Grid.Row="2" Grid.Column="0" Background="Yellow" />
    </Grid>

 

 実行するとスクロールバーが表示されているのがわかると思います。

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です