GroupBox is a lightweight content control used to display a group of relevant information in a round-corner, stylish box.

It sports Windows 7-style group box with 3D round corner border and closed caption. A host of appearance properties enable you to easily customize the look-and-feel of the control, such as customizing the header’s position, display mode, icon, font size, and more.

Content Control

GroupBox is inherited from IsHeaderedContentControl, which means it has both Header and Content that can contain a single object of any type (such as a string, an image, or a panel). For more information about this content model see Content Model Overview.

Using GroupBox

You use GroupBox to represent a single object that defined in the Content property. To display a title to the GroupBox, you set the Header property to a string value that you desire.

The following example shows how to define a simple GroupBox in XAML.

<Intersoft:GroupBox Header="Likes and Interests"
                    Width="300" Height="200">
    
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="Content"/>
    </StackPanel>
    
</Intersoft:GroupBox>

GroupBox automatically measures the text width of the Header and draws a smooth round-corner 3D line around it, such as shown in the following figure.

You can customize many of the header settings and border appearance which are discussed later in this topic.

Customizing Header Appearance and Behaviors

GroupBox provides a variety of properties that allow you to customize the appearance and behaviors related to the header such as discussed in the following sections.

Adding an Image to the Header

GroupBox uses content control architecture which allows you to put any arbitrary object to its Header and Content. GroupBox extends the content model with ImageContent presentation to provide an efficient way to display an image to the Header.

The following example shows how to configure the GroupBox to add an Image to its Header.

<Intersoft:GroupBox Header="Likes and Interests"
                    HeaderDisplayMode="ContentAndImage"  
                    HeaderImage="../Assets/Images/Interest.png"
                    Width="300" Height="200">
    
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="Content"/>
    </StackPanel>
    
</Intersoft:GroupBox>

The result looks like the following figure.

You can also customize a variety of settings related to the ImageContent model such as TextImageRelation, ImageWidth and ImageHeight. For more information, see Content Model Overview.

Customizing the Border Appearance

One of the unique features in the GroupBox is the capability to draw a smooth 3D border around the control. You can easily customize the appearance of the border such as the round corner radius, stroke thickness as well as the border brush.

The following example shows a simple GroupBox with customized border appearance, and then followed with the result.

<Intersoft:GroupBox Header="Likes and Interests"
                    CornerRadius="12" 
                    StrokeThickness="1.2" 
                    BorderBrush="#FF0065C9"
                    Width="300" Height="200">
    
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="Content"/>
    </StackPanel>
    
</Intersoft:GroupBox>

Customizing Header Position

GroupBox offers two kind of built-in header presentation such as discussed in the following.

• Border
  This is the default mode of the header presentation which position the header element vertically centered in the top edge of the border. As the result, the top border layout is also adjusted to fit the header. This style of header presentation is commonly found in Windows applications.
   
• Inside
  With this mode, GroupBox positions the header inside the border of the box. This style of header presentation is ideal for modern web applications, and is typically found in Mac applications.
  
  The following figure shows the GroupBox that uses Inside header position.
    

Customizing Header Appearance

GroupBox provides several properties that let you easily customize the header appearance such as the HeaderFontSize and HeaderForeground property. The following example shows how to customize the header appearance of the group box.

<Intersoft:GroupBox Header="Likes and Interests"
                    HeaderFontSize="12" HeaderForeground="Navy"
                    Width="300" Height="200">
    
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="Content"/>
    </StackPanel>
    
</Intersoft:GroupBox>

Using Custom Header Template

In certain cases, you may want to use a more complex UIElement for the header of the GroupBox. You can completely customize the header template by assigning a DataTemplate to the HeaderTemplate property of the GroupBox in XAML.

To learn more how to customize the template of a control, see Styles and Template Overview.

Hiding the Header Entirely

You can hide the header entirely by setting the HeaderVisibility property of the GroupBox to Collapsed. 

Customizing GroupBox Appearance

You can easily customize the GroupBox appearance through the following properties.

If you would like to completely customize the control appearance or if you want to change the styles of each visual state, you can edit the template of the control and do the modification accordingly.

To learn more how to customize the template and visual states, see Styles and Template Overview.

Focus Scope

GroupBox is among the content controls in ClientUI that implements focus scope architecture. This means that input controls within the GroupBox would be logically grouped to provide focus related functions such as modal input, default button, group options, and more.

For more information about focus scope architecture, see User Experiences Overview.

Samples and Walkthroughs

For the list of ClientUI walkthroughs, see Walkthroughs and How-to Topics.

For the list of ClientUI samples available in local installation, see Locating the Samples in Local Installation.