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

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight 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, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published.