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

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

293 page views in the last 30 days.