Programming WPF, 2nd Edition

GroupBox and Expander

GroupBox and Expander are very similar controls: both provide a container for arbitrary content and a place for a header on top. Figure 5-16 shows both controls. Aside from their different appearances, the main difference between these controls is that the Expander can be expanded and collapsed; the user can click on the arrow at the top left to hide and show the content. A GroupBox always shows its content.

Figure 5-16. Header and Expander controls

Both controls derive from HeaderedContentControl, which in turn derives from ContentControl. So, we can place whatever content we like directly inside the control, as shown in Example 5-14.

Example 5-14. Using Header and Expander

<StackPanel Orientation="Horizontal">

 <GroupBox Header="Glass">
    <Border Margin="2" Background="White" Padding="3">
      <StackPanel>
        <RadioButton Content="Half-full" IsChecked="True" />
        <RadioButton Content="Half-empty" />
      </StackPanel>
    </Border>
  </GroupBox>

 <Expander Header="Glass" IsExpanded="True"
       Background="#def" VerticalAlignment="Center" MinWidth="90"
       Margin="10,0">
    <Border Margin="2" Background="White" Padding="3">
      <StackPanel>
        <RadioButton Content="Half-full" IsChecked="True" />
        <RadioButton Content="Half-empty" />
      </StackPanel>
    </Border>
  </Expander>

</StackPanel>

The HeaderedContentControl supports a dual form of content model: not only can the body of an Expander or GroupBox be anything ...