Expander Control Part 1 : Silverlight Feeds

Expander Control Part 1

by jesseliberty via Jesse Liberty - Silverlight Geek on 2/2/2009 4:33:00 PM

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.