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

 

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.

One Response to Simple Expander – Silverlight Toolkit

  1. Επισκευή καρτας γραφικων στην Βαρυμπομπη γρηγορα
    και οικονομικα. Η EASolutions βρισκεται κοντα σας.

    Για οποιαδηποτεπληροφορια μη διστασετε να καλεσετε στα τηλεφωνα μας.

Leave a Reply

Your email address will not be published.