(Difference between revisions)

ExpanderView in Silverlight for Windows Phone Toolkit

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Add link to (windowsphonegeek.com))
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5)
Line 111: Line 111:
You can download sample project code from this file  [[File:ExpanderControl.zip]].
You can download sample project code from this file  [[File:ExpanderControl.zip]].
<!-- Translation --> [[zh-hans:Silverlight for Windows Phone Toolkit中的ExpanderView控件]]
<!-- Translation --> [[zh-hans:Silverlight for Windows Phone Toolkit中的ExpanderView控件]][[Category:Windows Phone 7.5]]

Revision as of 08:15, 30 November 2012

This code example explains how to use ExpanderView control from the Silverlight for Windows Phone Toolkit.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Devices(s): Tested with the Lumia 800
Platform(s): Windows Phone 7.5
Windows Phone 7.5
Device(s): All Windows Phones
Created: Vaishali Rawat (05 Oct 2012)
Last edited: hamishwillee (30 Nov 2012)



ExpanderView comes with the Silverlight for Windows Phone Toolkit. It has a header which the user can toggle to expand/collapse additional content (this type of control is sometimes referred to as a collapsible panel or as an accordion control).

This article provides a brief overview of how to include and use the control in your projects. The example uses two ExpanderView components: the first displays a list of teams participating in a game, while the second allows you to select a specific game from a list.

Adding the control to your project

First create a Windows Phone application:

  • Open Visual Studio and select Windows Phone Application from the installed templates
  • Select Windows Phone 7.1 as the Target Version.
  • Right-click on the “References” in the project and click “Add Reference…”.Browse the “Microsoft.Phone.Controls.Toolkit.dll” and add it to the project.
  • Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.

Defining ExpanderView Control through XAML

The XAML code below shows how we create a ExpanderView named "Header 1", comprising of 8 TextBlock items.

 <toolkit:ExpanderView x:Name="Header1" Header="Teams " FontSize="40" Expanded="Header1_Expanded"/>
<TextBlock FontSize="20" Text="Afganistan"/>
<TextBlock FontSize="20" Text="Australia"/>
<TextBlock FontSize="20" Text="Bangladesh"/>
<TextBlock FontSize="20" Text="Ireland"/>
<TextBlock FontSize="20" Text="New Zealand"/>
<TextBlock FontSize="20" Text="South Africa"/>
<TextBlock FontSize="20" Text="Sri Lanka"/>
<TextBlock FontSize="20" Text="Zimbabwe"/>

Defining ExpanderView Control using CSharp

The same control can be created in C# as shown below:

  • First we create an instance of ExpanderView (in this case called Header1):
     ExpanderView Header1 = new ExpanderView();
  • Then we set the header text, add the expander to a stackpanel, and set the content of the expander as a list.
public MainPage()
Header1.Header = "Expander Header";
this.Header1.ItemsSource = new List<string>() { "Afganistan", "Australia", "Bangladesh",
"Ireland", "New Zealand", "South Africa", "Sri Lanka", "Zimbabwe" };

Expanded and collapsed events

ExpanderView has two key events Expanded and Collapsed which are triggered when the state of ExpanderView is changed.

When the Header1 ExpanderView is expanded its Expanded handler is called:

private void Header1_Expanded(object sender, RoutedEventArgs e)
// can define any specific action we want to take when the ExpanderView expands

Similarly, when it is collapsed, the Collapsed handler is called:

private void Header1_Collapsed(object sender, RoutedEventArgs e)
// can define any specific action we want to take when the ExpanderView collapses

Note.pngNote: ExpanderView has IsNonExpandable property which makes the ExpanderView non expandable. This is useful if the expander can only be used in certain circumstances - perhaps after its content is fully populated.


You can download sample project code from this file File:ExpanderControl.zip.

336 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.