要約
・ 行はGrid.RowDefinitionsタグ内で、RowDefivitionタグで定義
・ 列はGrid.ColumnDefinitionsタグ内で、ColumnDefinitionタグで定義
・ 列はGrid.ColumnDefinitionsタグ内で、ColumnDefinitionタグで定義
・ Grid全体を枠で囲む時は GridをBorderタグの入れ子にする。
・ Grid内の分割領域の枠はGridタグ内で定義。Grid.Column=”列番号”,Grid.Row=”行番号”で位置を指定。
・ GridSplitterの配置はGridタグ内で定義。Grid.Column=”列番号”,Grid.Row=”行番号”で位置を指定。
垂直に動かしたいときはHorizontalAlignment=”Stretch”
水平に動かしたいときはVerticalAlignment=”Stretch”
・ ボタン等のコントロールを配置して、行列をまたいで表示させたいとき(隠れないようにするとき)はGrid.ColumnSpan, Grid.RowSpanで定義。
XAML、コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<Window x:Class="Grid.MainWindow" 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:Grid" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <!-- Grid全体を枠で囲む時は GridをBorderタグの入れ子にする。--> <Border BorderBrush="Black" BorderThickness="1"> <!-- 一番そとのGrid--> <Grid Background="#FF81EC17" > <!-- RowDefivitionsで行を作成--> <Grid.RowDefinitions> <RowDefinition Height="50*"/> <RowDefinition Height="5*"/> <RowDefinition Height="50*"/> <RowDefinition Height="5*"/> <RowDefinition Height="50*"/> </Grid.RowDefinitions> <!-- Grid内の分割領域のボーダーを設定 --> <Border BorderBrush="Black" BorderThickness="1" Grid.Column="0"/> <!-- グリッドスプリッターを配置 1行目(0行始まりなので上から2番目)と3行目 垂直にグリグリ動かしたい場合は、HorizontalAlignment="Stretch" --> <GridSplitter x:Name="gridSplitter" Grid.Row="1" HorizontalAlignment="Stretch" Width="100" VerticalAlignment="Stretch" /> <GridSplitter x:Name="gridSplitter2" Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> <!-- グリッドを配置し列を作成 2行目(0行始まりなので上から3番目)の領域内 --> <Grid Grid.Row="2" Background="Azure"> <Grid.ColumnDefinitions> <ColumnDefinition Width="261*"/> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="170*"/> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="261*"/> </Grid.ColumnDefinitions> <!-- 枠を描画 2行2列目(0行0列始まりなので上から3番目、左から3番目)の領域 --> <Border BorderBrush="Black" BorderThickness="1" Grid.Column="2"/> <!-- グリッドスプリッターを配置 2行1列目(0行0列始まりなので左から2番目) --> <GridSplitter x:Name="gridSplitter3" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> <!-- ボタンを配置 2行0列め--> <Button x:Name="button" Grid.Column="0" Content="Button" HorizontalAlignment="Left" Margin="98,59,0,0" VerticalAlignment="Top" Width="75"/> <!-- ボタンを配置 2行0列から2行2列までまたぐ 一部隠れる--> <Button x:Name="button2" Grid.Column="0" Content="Button" HorizontalAlignment="Left" Margin="200,59,0,0" VerticalAlignment="Top" Width="150"/> <!-- ボタンを配置 2行0列から2行2列までまたぐ 隠れた部分を表示させる。ColumnSpanを使う --> <Button x:Name="button3" Grid.Column="0" Grid.ColumnSpan="3" Content="Button" HorizontalAlignment="Left" Margin="200,90,0,0" VerticalAlignment="Top" Width="150"/> </Grid> </Grid> </Border> </Window> |
XAMLだけで作成。コードは無し。
コメント