1 out of 3 rated this helpful - Rate this topic

GroupBox Styles and Templates

.NET Framework 4.5

This topic describes the styles and templates for the GroupBox control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

GroupBox Parts

The GroupBox control does not have any named parts.

GroupBox States

The following table lists the visual states for the GroupBox control.

VisualState Name	VisualStateGroup Name	Description
Valid	ValidationStates	The control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocused	ValidationStates	The Validation.HasError attached property is true has the control has focus.
InvalidUnfocused	ValidationStates	The Validation.HasError attached property is true has the control does not have focus.

GroupBox ControlTemplate Example

The following example shows how to define a ControlTemplate for the GroupBox control.

XAML

<Style TargetType="GroupBox">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="GroupBox">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
          </Grid.RowDefinitions>
          <Border Grid.Row="0"
                  BorderThickness="1"
                  CornerRadius="2,2,0,0">
            <Border.BorderBrush>
              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource BorderLightColor}"
                                  Offset="0.0" />
                    <GradientStop Color="{DynamicResource BorderDarkColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Border.BorderBrush>

            <Border.Background>
              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource ControlLightColor}"
                                  Offset="0.0" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Border.Background>

            <ContentPresenter Margin="4"
                              ContentSource="Header"
                              RecognizesAccessKey="True" />
          </Border>

          <Border Grid.Row="1"
                  BorderThickness="1,0,1,1"
                  CornerRadius="0,0,2,2">
            <Border.BorderBrush>
              <SolidColorBrush Color="{StaticResource BorderMediumColor}" />
            </Border.BorderBrush>
            <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1"
                                   MappingMode="RelativeToBoundingBox"
                                   StartPoint="0.5,0">
                <GradientStop Color="{DynamicResource ContentAreaColorLight}"
                              Offset="0" />
                <GradientStop Color="{DynamicResource ContentAreaColorDark}"
                              Offset="1" />
              </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter Margin="4" />
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The ControlTemplate uses one or more of the following resources.

XAML

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

For the complete sample, see Styling with ControlTemplates Sample.

Reference

Style

ControlTemplate

Concepts

Styling and Templating

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Other Resources

Control Styles and Templates

Control Customization

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)