How to: Create a GroupBox

This example shows how to create a container by using the GroupBox control. The container has a title and a visible border that encloses its content.

Example

The following example defines a GroupBox control that is titled My Employee Info. The control encloses a TabControl and a Button in a StackPanel. The example defines the title by setting the Header property to the Label string.

<GroupBox Width="300" Height="410">
  <GroupBox.Header>
    <Label>Employee Data</Label>
  </GroupBox.Header>
  <StackPanel>
  <TabControl Name="myTabControl" 
     TabStripPlacement="Top" 
         Margin="0, 0, 0, 10" Height="350"
     >
    <TabItem Name="PersonalInfo">
      <TabItem.Header>_Personal Info</TabItem.Header>
      <StackPanel>
        <TextBlock>Employee</TextBlock>
        <TextBlock>Select your name</TextBlock>
        <ListBox Name="empName" SelectionChanged="updateSummary">
          <ListBoxItem IsSelected="true">Esther</ListBoxItem>
          <ListBoxItem>George</ListBoxItem>
          <ListBoxItem>Alan</ListBoxItem>
          <ListBoxItem>Eric</ListBoxItem>
        </ListBox>
       </StackPanel>
    </TabItem>
    <TabItem>
      <TabItem.Header>_Job Info</TabItem.Header>
        <StackPanel>
        <TextBlock>Select a job</TextBlock>
        <ListBox Name ="job" SelectionChanged="updateSummary">
          <ListBoxItem IsSelected="true">Programmer</ListBoxItem>
            <ListBoxItem>Tester</ListBoxItem>
            <ListBoxItem>Writer</ListBoxItem>
            <ListBoxItem>Manager</ListBoxItem>
          </ListBox>
        </StackPanel>
        </TabItem>
        <TabItem Name="Skill">
          <TabItem.Header>_Skill</TabItem.Header>
          <StackPanel>
            <TextBlock>
                Select your strongest skill
            </TextBlock>
        <ListBox Name="skills" SelectionChanged="updateSummary">
            <ListBoxItem IsSelected="true">C#</ListBoxItem>
            <ListBoxItem>Visual Basic</ListBoxItem>
            <ListBoxItem>.NET</ListBoxItem>
            <ListBoxItem>JScript</ListBoxItem>
          </ListBox>
      </StackPanel>
      </TabItem>
      <TabItem Name="Summary" >
        <TabItem.Header>Su_mmary</TabItem.Header>
        <StackPanel>
        <TextBlock Name="emp"/>
        <TextBlock Name="ejob"/>
        <TextBlock Name="eskill"/>
      </StackPanel>
    </TabItem>
  </TabControl>
    <Button Content="Show Summary" Click="goToSummaryTab"/>
  </StackPanel>
</GroupBox>

You must also define an event handler on a code-behind page in order to handle the Click event that occurs when a user clicks the Show Summary button.

For the complete sample, see GroupBox Sample.

See Also

Reference

GroupBox

Concepts

GroupBox Overview

Other Resources

GroupBox Sample
GroupBox How-to Topics