Monday, December 01, 2008

Simple Expander – Silverlight Toolkit

by jesseliberty via Jesse Liberty - Silverlight Geek on 12/1/2008 5:32:00 PM

[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,

 
[Composite image]

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

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.

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