There are a lot of neat options now available to us programmers thanks to WPF.
One of these is the expander. The expander is a control pretty much like a groupbox which can hold various controls. The main difference between a groupbox and an expander is the controls in a groupbox are always visible where the expander gives the developer, and by extension the user, the ability to hide any controls and conserve valuable space on a windows form.
As you can see in the image below, the groupbox and expander both contain two radio buttons.
The advantage of the expander, as I see it, is when I click the little arrow next to the caption of the expander. Once clicked the expander collapses to the height of its header hiding the controls, in this example the radio buttons, from view.
I will admit that I had to do a little tinkering with the expander to get it looking and working like I wanted it.
I dragged and expander from the toolbox onto my window, sized it and set the background colour, then added a stack panel, and within the stack panel, the two radio buttons.
This, unfortunately, was not quite what I wanted because the whole background of the expander was light blue and I only wanted the header to be blue with a small border around the controls.
To solve this I had to put a border on the expander before putting the stack panel and the radio buttons. Setting the background colour of the border to white and adding a margin and padding for the border completed the look I was attempting.
Well it had the look as long as the expander was expanded. Once I clicked the button to collapse the expander I was left with a blue square.
No radio buttons but not perfect either.
To get the desired effect of a growing and shrinking panel I used the Expanded and Collapsed methods of the expander to set the height when expanded and collapsed.
Now I have the effect I was after.
Here is the XAML for the expander with the frame, stack panel and two radio buttons.
