VB のたまご

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



GroupBox

    イメージ
  •  GroupBox は、ヘッダー名付きの領域を作成するコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「GroupBoxWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="GroupBoxWindow1"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="GroupBoxWindow1" Height="300" Width="300">
    
        <Grid>
    
            <GroupBox Header="groupbox1" Margin="10">
                <Button Content="button1" Margin="10" />
            </GroupBox>
            
        </Grid>
        
    </Window>
    

  •  GroupBox は1つのコントロールしか配置できないので、レイアウト系コントロールを敷いてその中に複数のコントロールを配置して使います。

  • <Window x:Class="GroupBoxWindow2"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="GroupBoxWindow2" Height="300" Width="300">
        
        <Grid>
    
            <GroupBox Header="groupbox1" Margin="10">
                <StackPanel>
                    <Button Content="button1" Margin="10" />
                    <Button Content="button2" Margin="10" />
                </StackPanel>
            </GroupBox>
            
        </Grid>
        
    </Window>
    

    スポンサーリンク


  •  少し複雑に配置した例です。 WPF ではレイアウト系コントロール、コンテナ系コントロール、そしてユーザーとの対話系コントロールの3つの組み合わせを考慮しながら画面設計する必要がありますので、 コントロールの特徴を知ることと組み合わせての配置設定が、慣れるまでは難しいところかと思います。

  • <Window x:Class="GroupBoxWindow3"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="GroupBoxWindow3" Height="350" Width="525">
    
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="150" />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="150" />
            </Grid.ColumnDefinitions>
    
            <!-- 左上のグループボックス -->
            <GroupBox Header="groupbox1" Margin="10"
                      Grid.Row="0" Grid.Column="0">
    
                <WrapPanel>
                    <Button Content="button1" Margin="10" />
                    <Button Content="button2" Margin="10" />
                    <Button Content="button3" Margin="10" />
                    <Button Content="button4" Margin="10" />
                    <Button Content="button5" Margin="10" />
                </WrapPanel>
    
            </GroupBox>
    
            <!-- 中央横一直線の領域変更線 -->
            <GridSplitter Height="5"
                          Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
                          HorizontalAlignment="Stretch" VerticalAlignment="Center" />
    
            <!-- 左下のグループボックス -->
            <GroupBox Header="groupbox2" Margin="10"
                      Grid.Row="2" Grid.Column="0">
    
                <WrapPanel>
                    <Button Content="button1" Margin="10" />
                    <Button Content="button2" Margin="10" />
                    <Button Content="button3" Margin="10" />
                    <Button Content="button4" Margin="10" />
                    <Button Content="button5" Margin="10" />
                </WrapPanel>
    
            </GroupBox>
    
            <!-- 中央縦一直線の領域変更線 -->
            <GridSplitter Width="5"
                          Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"
                          HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    
            <!-- 右上のグループボックス -->
            <GroupBox Header="groupbox3" Margin="10"
                      Grid.Row="0" Grid.Column="2">
    
                <WrapPanel>
                    <Button Content="button1" Margin="10" />
                    <Button Content="button2" Margin="10" />
                    <Button Content="button3" Margin="10" />
                    <Button Content="button4" Margin="10" />
                    <Button Content="button5" Margin="10" />
                </WrapPanel>
    
            </GroupBox>
    
            <!-- 右下のグループボックス -->
            <GroupBox Header="groupbox4" Margin="10"
                      Grid.Row="2" Grid.Column="2">
    
                <WrapPanel>
                    <Button Content="button1" Margin="10" />
                    <Button Content="button2" Margin="10" />
                    <Button Content="button3" Margin="10" />
                    <Button Content="button4" Margin="10" />
                    <Button Content="button5" Margin="10" />
                </WrapPanel>
    
            </GroupBox>
    
        </Grid>
    
    </Window>