WPF 控件专题 GroupBox控件详解

1、GroupBox 介绍

    GroupBox 表示一个控件，该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。

    GroupBox 只能包含一个子元素，但这没问题——只需将这个控件设置为面板，您就可以自由地向面板添加多个控件。

**************************************************************************************************************

2、常用属性介绍

    FontFamily：字体系列；    FontSize：字体大小；    FontStretch：字体在屏幕上紧缩或加宽的程度；FontWeight：字体粗细；
    
    Background：背景；    BorderBrush：边框颜色；    BorderThickness：边框宽度；    Foreground：前景色；
    
    Width/Height：宽度/高度；    Name：元素标识名称；    IsEnabled：使能，是否可用；    Margin：外边距；
    
    Opacity：透明度；    Visibility：可见性；    IsVisible：是否可见；    FlowDirection：其子元素的流动方向；
    
    LayoutTransform：在执行布局时应该应用于此元素的图形转换方式。    RenderTransform：元素的呈现位置的转换信息；
    
    RenderTransformOrigin：由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。
    
    HorizontalAlignment/VerticalAlignment：在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。
    
    HorizontalContentAlignment/VerticalContentAlignment：控件内容的水平对齐方式/垂直对齐方式。

    Content：获取或设置 ContentControl 的内容。
    
    Header：获取或设置每个控件的标题所用的数据。

**************************************************************************************************************

3、具体示例

Style代码

<Style  TargetType="{x:Type GroupBox}" x:Key="Group">
	<Setter Property="Margin" Value="5"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type GroupBox}">
				<Grid >
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto" />
						<RowDefinition Height="*" />
					</Grid.RowDefinitions>
					<Border x:Name="border" Grid.Row="0" SnapsToDevicePixels="True" BorderBrush="{TemplateBinding Background}" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" BorderThickness="0"  CornerRadius="2,2,0,0" >
						<Grid Margin="5">
							<ContentPresenter Name="header" Visibility="Collapsed" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Left" VerticalAlignment="Center"/>
							<TextBlock FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" Text="{Binding ElementName=header, Path=Content}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
						</Grid>
					</Border>
					<Border Grid.Row="1" BorderBrush="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="1,0,1,1" CornerRadius="0,0,2,2" >
						<ContentPresenter Margin="10" x:Name="cpmdi" />
					</Border>
				</Grid>
				<ControlTemplate.Triggers>
					<Trigger Property="Header" Value="{x:Null}">
						<Setter TargetName="cpmdi" Property="Margin" Value="10"/>
						<Setter TargetName="border" Property="Height" Value="32"/>
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

使用样式示例

<WrapPanel Margin="10">
	<GroupBox Margin="10" Header="GroupBox自定义示例" MinWidth="200" FontSize="15" FontFamily="思源黑体" HorizontalAlignment="Left" >
		<StackPanel >
			<Button Margin="0,10" Height="30" Content="相思相见知何日"/>
			<TextBox Text=" 相思相见知何日，此时此夜难为情" Margin="0 10" Foreground="#dddddd"/>
		</StackPanel>
	</GroupBox>
	<GroupBox Margin="10" Header="GroupBox自定义示例" MinWidth="200" FontSize="15" FontFamily="思源黑体" HorizontalAlignment="Left" Foreground="Red" Style="{StaticResource Group}" Background="Teal">
		<StackPanel >
			<Button Margin="0,10" Height="30" Content="相思相见知何日"/>
			<TextBox Text=" 相思相见知何日，此时此夜难为情" Margin="0 10" Foreground="#dddddd"/>
		</StackPanel>
	</GroupBox>
</WrapPanel>

**************************************************************************************************************

4、效果图

    左侧为原生态的GroupBox效果图，右侧是使用Style样式的显示效果图；

**************************************************************************************************************

5、总结和扩展

    原生态的GroupBox样式还是挺难看的，建议使用时进行样式改写，比如头部变圆角等。

**************************************************************************************************************