VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



Grid

    イメージ
  •  Grid は、領域を分割して行列となるテーブルレイアウトを提供するレイアウトコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「GridWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="GridWindow1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow1" Height="300" Width="300">
        
        <Grid>
    
            <Button Content="button1" Width="80" Height="30" />
            <Button Content="button2" Width="80" Height="30" />
            <Button Content="button3" Width="80" Height="30" HorizontalAlignment="Right" />
            <Button Content="button4" Width="80" Height="30" VerticalAlignment="Top" />
            <Button Content="button5" Width="80" Height="30" VerticalAlignment="Top" Margin="20,200,40,0" />
    
        </Grid>
        
    </Window>
    

  •  この例では領域分割はせず、デフォルト領域にボタンを配置しています。button1 が隠れていて button2 が表示されていますね。 同じ場所に配置すると後勝ちになる動きとなります。 重ならないようにコントロールを配置するためには、HorizontalAlignment, VerticalAlignment や Margin を記載して配置します。

  •  次に、領域の分割をしてみます。 こうすると、縦に3分割(行を3つ)分割することができます。

  • <Window x:Class="GridWindow2"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow2" Height="300" Width="300">
        
        <Grid ShowGridLines="True">
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Button Content="Row=0" />
            <Button Content="Row=1" Grid.Row="1" Width="120" Height="30" />
            <Button Content="Row=2" Grid.Row="2" Margin="10" />
    
        </Grid>
        
    </Window>
    

  •  ShowGridLines を True に設定すると、実行時も分割線が表示されるので、分割領域がパッと見で分かります。 横に2分割(列を2つ)分割してみます。

  • <Window x:Class="GridWindow3"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow3" Height="300" Width="300">
        
        <Grid ShowGridLines="True">
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <!-- 0 行目や 0 列目は省略可能、書いても OK -->
            <Button Content="Column=0" Grid.Column="0" />
            <Button Content="Column=1" Grid.Column="1" Margin="35" />
    
        </Grid>
        
    </Window>
    

  •  そして、縦に2分割、横に3分割してみます。

  • <Window x:Class="GridWindow4"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow4" Height="300" Width="300">
        
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <Button Content="Row=0,Column=0" Grid.Row="0" Grid.Column="0" />
            <Button Content="Row=0,Column=1" Grid.Row="0" Grid.Column="1" />
            <Button Content="Row=0,Column=2" Grid.Row="0" Grid.Column="2" />
    
            <Button Content="Row=1,Column=0" Grid.Row="1" Grid.Column="0" />
            <Button Content="Row=1,Column=1" Grid.Row="1" Grid.Column="1" />
            <Button Content="Row=1,Column=2" Grid.Row="1" Grid.Column="2" />
    
        </Grid>
        
    </Window>
    

  •  ここまでは、全て均等に分割しましたが、分割の割合を変えることも可能です。 以降では行で作っていますが、列でも同じことが可能です。

  •  まずは基本からです。RowDefinition は 高さ(Height)を指定することができます。 通常「高さ」には数値をセットしますが(もちろん数値をセットできますが)、アスタリスク(*)を指定することができます。 RowDefinition に何もセットしなかった場合はアスタリスクがセットされます。 アスタリスクの場合、高さは比率となり、以下の例だと、1:1の割合で高さが決まります。

  • <Window x:Class="GridWindow5"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow5" Height="300" Width="300">
        
        <Grid>
    
            <Grid
                <RowDefinition />
                <RowDefinition Height="*" />
            </Grid
            
        </Grid>
        
    </Window>
    

  •  1:2の割合にしたい場合は以下のように、数値* と設定します。

  • <Window x:Class="GridWindow6"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow6" Height="300" Width="300">
    
        <Grid ShowGridLines="True">
    
            <Grid
                <RowDefinition />
                <RowDefinition Height="2*" />
            </Grid
    
        </Grid>
    
    </Window>
    

  •  1:2:3の割合にしたい場合は以下のように設定します。

  • <Window x:Class="GridWindow7"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow7" Height="300" Width="300">
    
        <Grid ShowGridLines="True">
    
            <Grid
                <RowDefinition />
                <RowDefinition Height="2*" />
                <RowDefinition Height="3*" />
            </Grid
    
        </Grid>
    
    </Window>
    

  •  固定値にしたい場合は数値を設定します。以下では、固定値にした行にボタンを配置しています。 しかし、表示文字列が見切れてしまい、何て書いてあるのか読むことができません。

  • <Window x:Class="GridWindow8"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow8" Height="300" Width="300">
        
        <Grid ShowGridLines="True">
    
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <Button Content="Height=10" Grid.Row="1" />
    
        </Grid>
        
    </Window>
    

  •  こういう時は、Auto に設定します。Auto は内部に配置したコントロールサイズに合わせて、行の領域を決めてくれます。

  • <Window x:Class="GridWindow9"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow9" Height="300" Width="300">
    
        <Grid ShowGridLines="True">
    
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <Button Content="Height=10" Grid.Row="1" />
    
        </Grid>
    
    </Window>
    

    スポンサーリンク


  •  さて、エクスプローラーだとフォルダーツリーとファイル一覧の間を D&D で境界線を掴んで、サイズ変更できますよね。 同じような事をしたい場合は、GridSplitter というコントロールを使います。以下サンプルです。

  • <Window x:Class="GridWindow10"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow10" Height="300" Width="300">
        
        <Grid ShowGridLines="True">
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <!-- GridSplitter は境界線をD&D移動できるコントロール -->
            
            <!-- これだと点になってしまう -->
            <!--<GridSplitter Grid.Row="1" />-->
    
            <!-- 行用の分割線は、横:左右最大幅、縦:中央、掴みやすいように高さ 5 -->
            <!-- これだと左側しか D&D できない。左、中央、右にまたいで、横一列D&D したい -->
            <!--<GridSplitter 
                Height="5"
                Grid.Row="1" 
                HorizontalAlignment="Stretch" VerticalAlignment="Center" />-->
    
            <GridSplitter 
                Height="5"
                Grid.Row="1"
                Grid.ColumnSpan="3"
                HorizontalAlignment="Stretch" VerticalAlignment="Center" />
    
            <!-- 列用の分割線は、横:中央、縦:上下最大高さ、掴みやすいように幅 5 -->
            <GridSplitter
                Width="5"
                Grid.Column="1"
                Grid.RowSpan="3"
                HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    
        </Grid>
        
    </Window>
    

  •  GridSplitter は使い方が難しく、いつもどっちがどういう設定だったっけ?と忘れてしまいます。 また、「Grid.ColumnSpan」、「Grid.RowSpan」というプロパティが出てきましたが、これはいくつ行をまたぐか(列をまたぐか)を設定するためのものです。 こちらも以下にサンプルを記載します。

  • <Window x:Class="GridWindow11"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w02_LayoutControls"
            mc:Ignorable="d"
            Title="GridWindow11" Height="300" Width="300">
        
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <Button 
                Content="button1"
                Margin="10"
                Grid.Row="0" Grid.ColumnSpan="3" />
    
            <Button
                Content="button2"
                Margin="10"
                Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" />
    
            <Button
                Content="button3"
                Margin="10"
                Grid.Column="1" Grid.ColumnSpan="2"
                Grid.Row="1" Grid.RowSpan="2" />
    
        </Grid>
        
    </Window>
    

  •  Grid は何度も使いますので、何回も手打ちして覚えてください。