C#WPFで画面を3分割するグリッドレイアウトの作り方【コピペでOK】

最終更新日: 20240307

目標

このような画面を作れるようになる

ソースコード

xamlのソースコードです
コピペでOK

   <Grid>
       <!-- グリッドレイアウト定義 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2" />
            <RowDefinition Height="260" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- GridSplitterを使ってパネルの移動が可能 -->
        <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" />


        <!-- 上部の画面領域 -->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            
            <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
            
            
            <!-- 上部左側の画面 -->
            <Border Background="LightGray">
                <!-- 上部左側の画面のコンテンツをここに配置 -->
                
            
            </Border>
            
            <!-- 上部右側の画面 -->
            <Border Grid.Column="2" Background="LightBlue" >
                <!-- 上部右側の画面のコンテンツをここに配置 -->


            </Border>
        </Grid>

        <!-- 下部の画面領域 -->
        <Border Grid.Row="2" Background="LightGreen">
            <!-- 下部の画面のコンテンツをここに配置 -->

        </Border>
        
    </Grid>

おわりに

画面を分割するUiをグリッドレイアウトって呼称するのは
記事を書こうと思って初めて知りました
覚えとかないとなあ