C#WPFの道#17！GroupBoxの書き方と使い方を解りやすく解説

GroupBox（グループボックス）とは？

GroupBoxとは、グループ単位でコントロールを整理して配置するパネル的なコントロールです。

GroupBoxの使い方

基本的にはタイトルとしてのヘッダーに文言を設置し、グループの中にラジオボタンなどのコントロールを設置して使います。

<GroupBox Margin="10"
          Header="group A"
          FontSize="20">
    <StackPanel>
        <RadioButton FontSize="20" Content="AAA"/>
        <RadioButton FontSize="20" Content="BBB"/>
    </StackPanel>
</GroupBox>

ヘッダーに複数のコントロールを組み合わせる方法

ヘッダー部分に文字のみを表示する場合はいいのですが、画像と文字や、チェックボックスと文字など、コントロールを組み合して表示したい場合があります。その場合はGroupBox.Headerというキーワードを使用します。

<GroupBox Margin="10">
    <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <CheckBox Content="check box" FontSize="20"/>
            <TextBlock Text="AAA" FontSize="20" Margin="10,0,0,0"/>
        </StackPanel>
    </GroupBox.Header>
    <StackPanel>
        <RadioButton FontSize="20" Content="CCC"/>
        <RadioButton FontSize="20" Content="DDD"/>
    </StackPanel>
</GroupBox>

サンプルコード

<Window x:Class="WPF017.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:WPF017"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <StackPanel>
            <GroupBox Margin="10"
                      Header="group A"
                      FontSize="20">
                <StackPanel>
                    <RadioButton FontSize="20" Content="AAA"/>
                    <RadioButton FontSize="20" Content="BBB"/>
                </StackPanel>
            </GroupBox>

            <GroupBox Margin="10">
                <GroupBox.Header>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox Content="check box" FontSize="20"/>
                        <TextBlock Text="AAA" FontSize="20" Margin="10,0,0,0"/>
                    </StackPanel>
                </GroupBox.Header>
                <StackPanel>
                    <RadioButton FontSize="20" Content="CCC"/>
                    <RadioButton FontSize="20" Content="DDD"/>
                </StackPanel>
            </GroupBox>
        </StackPanel>
    </Grid>
</Window>

WPFの道！