Revision as of 18:54, 5 October 2012 by Vaishali Rawat (Talk | contribs)

ExpanderView in Silverlight for Windows Phone Toolkit

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use ExpanderView crontrol in Window Phone 7

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: Vaishali Rawat (05 Oct 2012)



ExpanderView is a Expander control which comes with Silverlight Windows Phone Toolkit.An Expander allows a user to view a header and expand that header to see further details, or to collapse a section up to a header.When the header is tapped , the list Expands or Collapses. ExpanderView control can simply be used either to display the data or to choose a particular item for a given list. The Sample Application provides a breif about how to include this control and use it.

Getting Started

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

 <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"/>

In this , we have a ExpanderView Control named "Header 1", comprising of 8 textblock items.

== Defining ExpanderView Control using CSharp ==
  • first we create an instance of ExpanderView:
     ExpanderView Header1 = new ExpanderView();
  • defining ExpanderView
 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 key Events

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

  • When ExpanderView (eg:Teams) is expanded
  private void Header1_Expanded(object sender, RoutedEventArgs e)
// can define any specific action we want to take when the ExpanderView expands
  • When ExpanderView (eg:Teams) is Collapsed
  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.


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

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