WPF之GroupBox

*Major*-莙工科技有限公司

于 2025-06-16 17:03:14 发布

阅读量789

点赞数 16

CC 4.0 BY-SA版权

文章标签： wpf

本文链接：https://blog.csdn.net/qq_41375318/article/details/148695703

WPF 中 GroupBox 控件教程

GroupBox 是 WPF 中一个常用的容器控件，用于将相关控件分组在一起，并提供一个标题栏。本教程将详细介绍 GroupBox 的基本用法、自定义样式和高级功能。

1. 基本用法

1.1 添加 GroupBox 到 XAML

<Window x:Class="GroupBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GroupBox 示例" Height="350" Width="525">
    <Grid>
        <GroupBox Header="用户信息" Margin="20">
            <StackPanel>
                <TextBlock Text="姓名:" Margin="0,5,0,0"/>
                <TextBox Margin="0,0,0,10"/>
                <TextBlock Text="年龄:" Margin="0,5,0,0"/>
                <TextBox Margin="0,0,0,10"/>
                <TextBlock Text="性别:" Margin="0,5,0,0"/>
                <ComboBox Margin="0,0,0,10">
                    <ComboBoxItem Content="男"/>
                    <ComboBoxItem Content="女"/>
                </ComboBox>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

1.2 关键属性

Header: 设置 GroupBox 的标题文本
HeaderTemplate: 自定义标题的外观
BorderBrush: 边框颜色
BorderThickness: 边框粗细
Background: 背景色
Padding: 内容与边框的内边距
Margin: 外边距

2. 自定义样式

2.1 基本样式自定义

<GroupBox Header="自定义样式示例" Margin="20"
          BorderBrush="DarkBlue" BorderThickness="2"
          Background="LightYellow" Padding="10">
    <!-- 内容 -->
</GroupBox>

2.2 使用样式资源

<Window.Resources>
    <Style x:Key="CustomGroupBoxStyle" TargetType="GroupBox">
        <Setter Property="BorderBrush" Value="DarkGreen"/>
        <Setter Property="BorderThickness" Value="3"/>
        <Setter Property="Background" Value="LightGreen"/>
        <Setter Property="Foreground" Value="DarkGreen"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Padding" Value="15"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupBox">
                    <Grid>
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="5">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                
                                <ContentPresenter 
                                    ContentSource="Header"
                                    RecognizesAccessKey="True"
                                    Margin="5,0,5,5"
                                    VerticalAlignment="Center"/>
                                
                                <ContentPresenter 
                                    Grid.Row="1"
                                    Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <GroupBox Header="自定义模板示例" Margin="20"
              Style="{StaticResource CustomGroupBoxStyle}">
        <!-- 内容 -->
    </GroupBox>
</Grid>

3. 高级功能

3.1 动态绑定 Header

<GroupBox Header="{Binding GroupTitle}" Margin="20">
    <!-- 内容 -->
</GroupBox>

3.2 使用 HeaderTemplate 自定义标题

<GroupBox Margin="20">
    <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <Image Source="icon.png" Width="16" Height="16" Margin="0,0,5,0"/>
            <TextBlock Text="带图标的标题" FontWeight="Bold"/>
        </StackPanel>
    </GroupBox.Header>
    <!-- 内容 -->
</GroupBox>

3.3 嵌套 GroupBox

<GroupBox Header="主设置" Margin="20">
    <StackPanel>
        <GroupBox Header="网络设置" Margin="0,0,0,10">
            <StackPanel>
                <CheckBox Content="启用代理" Margin="0,5"/>
                <TextBlock Text="代理地址:" Margin="0,10,0,0"/>
                <TextBox Margin="0,0,0,5"/>
            </StackPanel>
        </GroupBox>
        
        <GroupBox Header="显示设置">
            <StackPanel>
                <CheckBox Content="全屏模式" Margin="0,5"/>
                <CheckBox Content="高对比度" Margin="0,5"/>
            </StackPanel>
        </GroupBox>
    </StackPanel>
</GroupBox>

4. 完整示例

<Window x:Class="GroupBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GroupBox 完整示例" Height="450" Width="600">
    <Window.Resources>
        <Style x:Key="CustomGroupBox" TargetType="GroupBox">
            <Setter Property="BorderBrush" Value="#FF4A6BA5"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Background" Value="#FFF0F8FF"/>
            <Setter Property="Foreground" Value="#FF2E5EAA"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupBox">
                        <Grid>
                            <Border BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{TemplateBinding Background}"
                                    CornerRadius="8">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    
                                    <Border Grid.Row="0" Background="#FFE6F0FF" Padding="5,2">
                                        <ContentPresenter 
                                            ContentSource="Header"
                                            RecognizesAccessKey="True"
                                            VerticalAlignment="Center"/>
                                    </Border>
                                    
                                    <ContentPresenter 
                                        Grid.Row="1"
                                        Margin="{TemplateBinding Padding}"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid Margin="10">
        <StackPanel>
            <GroupBox Header="基本用法" Style="{StaticResource CustomGroupBox}" Margin="0,0,0,15">
                <StackPanel>
                    <TextBlock Text="用户名:" Margin="0,5"/>
                    <TextBox Margin="0,0,0,10"/>
                    <TextBlock Text="密码:" Margin="0,5"/>
                    <PasswordBox Margin="0,0,0,10"/>
                    <Button Content="登录" Width="100" HorizontalAlignment="Left"/>
                </StackPanel>
            </GroupBox>
            
            <GroupBox Header="高级选项" Style="{StaticResource CustomGroupBox}" Margin="0,0,0,15">
                <StackPanel>
                    <CheckBox Content="记住密码" Margin="0,5"/>
                    <CheckBox Content="自动登录" Margin="0,5"/>
                    <CheckBox Content="使用HTTPS" Margin="0,5"/>
                </StackPanel>
            </GroupBox>
            
            <GroupBox Header="服务器设置" Style="{StaticResource CustomGroupBox}">
                <StackPanel>
                    <TextBlock Text="服务器地址:" Margin="0,5"/>
                    <TextBox Margin="0,0,0,10"/>
                    <TextBlock Text="端口号:" Margin="0,5"/>
                    <TextBox Margin="0,0,0,10"/>
                    <Button Content="测试连接" Width="100" HorizontalAlignment="Left"/>
                </StackPanel>
            </GroupBox>
        </StackPanel>
    </Grid>
</Window>