Expander Control Part 1

 

 

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>

WorksOnMyComputer 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


This work is licensed under a Creative Commons Attribution By license.

About Jesse Liberty

Jesse Liberty is a Senior Consultant with Wintellect, with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight & LinkedIn Learning courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *