Simple Expander – Silverlight Toolkit

[Updated 16:00 GMT-5 to include working version and link to code:  Expander.zip ]

 

The new Silverlight Toolkit includes a Expander control that, in its simplest form, is incredibly easy to add to your program,

 

Expander 
[Composite image]

 

To create the simplest expander, add a reference to Microsoft.Windows.Controls to your project,

ExpanderReferences

and add the namespace at the top of your xaml file

xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"

First Expander

A simple expander takes a direction, text for the header, and content; in this case an ellipse:

<controls:Expander Grid.Row="0" Grid.Column="1" 
      ExpandDirection="Down" Header="Click to Expose Ellipse">
  <controls:Expander.Content>
    <Ellipse Width="40" Height="40" Fill="red" />
  </controls:Expander.Content>
</controls:Expander>
(Special thanks to Justin Blunk)

You can vary the direction of the expansion, and you can vary what is in the header. Of course, you can do much more with templates, but that is for another day (and probably best shown in a video.  To give you a sense of the flexibility, however, I’ve created a second expander that opens to the right and whose header is not a string of text but is managed by a TextBlock. Also note that in this case the contents are not a single object, but rather a set of objects maintained in a stack panel.  I’ve not databound any of the contents, but that is easily done as well.  Here’s the code, followed by the before and after images.

<controls:Expander  
  ExpandDirection="Right" 
  Grid.Row="1"
  Grid.Column="0"
  Grid.ColumnSpan="2" BorderThickness="0" >
  <controls:Expander.Header>
    <TextBlock Text="Please fill in your secret code word" />
  </controls:Expander.Header>
  <controls:Expander.Content>
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="secret codeword" FontSize="14" 
                   Margin="5" VerticalAlignment="Bottom"/>
        <PasswordBox PasswordChar="?" FontSize="14" 
                     Margin="5" Width="120" Height="30" 
                     VerticalAlignment="Bottom"/>
      </StackPanel>
    </controls:Expander.Content>
</controls:Expander>

It is all in the Xaml, there is no C# code needed.

ExpanderCode

Here’s the working example, streaming from Silverlight Streamling Live Services

 

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was 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 Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

One Response to Simple Expander – Silverlight Toolkit

Comments are closed.