C# WPF Gridを使用する

作成日 2023.01.01
WPF
WPF

WPFで、テーブルレイアウトを構成できるGridを使用する手順を記述してます。ここでは実際に「XAML」上に「Grid」を記述した結果を掲載します。

1. 環境
2. Gridを使用
3. 比率を指定
4. 幅を指定
5. コントロールを配置

環境

OS windows10 pro 64bit
Microsoft Visual Studio Community 2022 Version 17.2.392

Gridを使用

Gridを使用すると、行列のテーブルレイアウトを行うことが可能です。

実際に「XAML」に記述して使用してみます。

<Window x:Class="sample.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:sample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!-- 行を2個 -->
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!-- 列を2個 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

4分割に整列されていることが確認できます。

比率を指定

以下のように、数値を指定すると比率を指定することもできます。

<Window x:Class="sample.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:sample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <!-- 1:2 -->
            <RowDefinition Height="1*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- 1:2 -->
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

実行結果

幅を指定

以下のように、数値を指定すると幅を指定することもできます。
※「auto」は自動で配置されてる子要素の大きさに合わせてくれます。

<Window x:Class="sample.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:sample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <!-- 1:2 -->
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- 1:2 -->
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

実行結果

コントロールを配置

実際に、位置を指定「コントロール」を配置してみます。

<Window x:Class="sample.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:sample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <!-- 1:2 -->
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- 1:2 -->
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Button Content="Button" Grid.Row="0" Grid.Column="0" />
        <Button Content="Button" Grid.Row="0" Grid.Column="1" />
        <Button Content="Button" Grid.Row="1" Grid.Column="0" />
        <Button Content="Button" Grid.Row="1" Grid.Column="1" />
    </Grid>
</Window>

実行結果