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 ...