Revision as of 07:19, 8 October 2012

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

Introduction

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.

• 

  Sample Application Page

• 

  ExpanderView displaying list of Teams participation in Cricket Match when "Team" Header is tapped

• 

  ExpanderView displaying list of matches to choose from when "Choose Team" Header is tapped

• 

  Displays the result after selection

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.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Defining ExpanderView Control through XAML

 <toolkit:ExpanderView x:Name="Header1" Header="Teams " FontSize="40" Expanded="Header1_Expanded"/>
                    <toolkit:ExpanderView.Items>
                        <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"/>                      
                    </toolkit:ExpanderView.Items>
  </toolkit:ExpanderView>

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()
        {
            InitializeComponent();
            Header1.Header = "Expander Header"; 
            stackpanel.Children.Add(Header1);  
            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: ExpanderView has IsNonExpandable property which makes the ExpanderView non expandable.

Downloads

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