I recently described the HeaderControl from the Silverlight Toolkit. Derived from the HeaderControl (and thus, to be thought of as a specialized version of the HeaderControl) is the Expander.
In its simplest form, the Expander has two properties that do all the work: the Header property and the Content property. Put text into each, and hey! presto! you have a working expander.
<UserControl xmlns:controls="clr-namespace:Microsoft.Windows.Controls;
assembly=Microsoft.Windows.Controls"
x:Class="Expnder.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<controls:Expander x:Name="Expander1"
ExpandDirection="Down"
Header="Q: Why did the chicken cross the road?"
Content="To Get To The Other Side. Wanka Wanka.">
</controls:Expander>
</Grid>
</UserControl>
— Streaming Example Start —
— Streaming Example End —
You can enhance the appearance of the expander in numerous ways a couple of which are shown in the next variation:
<UserControl xmlns:controls="clr-namespace:Microsoft.Windows.Controls;
assembly=Microsoft.Windows.Controls"
x:Class="Expnder.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<controls:Expander x:Name="Expander2"
HorizontalAlignment="Left" FontSize="14"
ExpandDirection="Down"
Header="Q: Why did the chicken cross the road?" >
<ContentControl FontSize="24" HorizontalAlignment="Center"
Foreground="Blue"
Content="To get to the other side" />
</controls:Expander>
</Grid>
</UserControl>
In this second version I’ve added a FontSize property, but more important I’ve broken out the Content property using a ContentConrol to take over how the content is rendered.
(click on image for information on how and where the code was tested)
— Streaming Example Start —
— Streaming Example End —
In the next entry I’ll review how you can use templating to make the content fade in and out as you toggle the button.
Next: Expander Control Part II
