MetroStyleApp入門 vol39.Grid入門

日曜日 , 29, 7月 2012 mac WinRT(UWP), C# 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>


 


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


 





            
 このエントリーをはてなブックマークに追加

            

            

            

            
LINEで送る

    







関連記事:
    

  1. Microsoftカンファレンス(2日目) 
    2. 

  2. MetroStyleApp入門 vol22.Tabキーに対応する 
    3. 

  3. MetroStyleApp入門 vol43.トースト通知を行う(1) 
    4. 

  4. MetroStyleApp入門 vol41.TextBlockの改行について 
    5. 




  
			
	


			
            


	    
  
  

  

	

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





 


	

	
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。