×
Namespaces

Variants
Actions
(Difference between revisions)

ExpanderView in Silverlight for Windows Phone Toolkit

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5)
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]]
+
[[Category:Windows Phone]][[Category:UI]][[Category:Code Examples]]
{{Abstract|This article explains how to use ExpanderView crontrol in Window Phone 7 }}  
+
{{Abstract|This code example explains how to use {{Icode|ExpanderView}} control from the [[Silverlight for Windows Phone Toolkit]].}}  
 
+
{{SeeAlso|
 +
* [[Silverlight for Windows Phone Toolkit In Depth (EBook)]]
 +
*  [http://cespage.com/silverlight/wp7tut24.html Expander control tutorial] (CESPage.com)
 +
* [http://www.windowsphonegeek.com/articles/Expand-and-Collapse-ExpanderView-inside-data-bound-ListBox-via-code Expand and Collapse ExpanderView inside data bound ListBox via code] (windowsphonegeek.com)
 +
* Windows Phone Toolkit ExpanderView in depth (windowsphonegeek.com)
 +
** [http://www.windowsphonegeek.com/articles/Windows-Phone-Toolkit-ExpanderView-in-depth-Part1-key-concepts-and-API Part1: key concepts and API]
 +
** [http://windowsphonegeek.com/articles/Windows-Phone-Toolkit-ExpanderView-in-depth-Part2-Data-Binding Part2: Data Binding]
 +
}}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:ExpanderControl.zip]] <!-- Link to example source code e.g.  -->
 
|sourcecode= [[Media:ExpanderControl.zip]] <!-- Link to example source code e.g.  -->
Line 26: Line 33:
  
 
== Introduction ==
 
== Introduction ==
ExpanderView is a  [http://msdn.microsoft.com/en-us/library/system.windows.controls.expander.aspx Expander control] which comes with [http://silverlight.codeplex.com/releases/view/75888 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.
+
{{Icode|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).
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.
+
This article provides a brief overview of how to include and use the control in your projects. The example uses two {{Icode|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.
 +
 
 
<gallery widths=200px heights=350px>
 
<gallery widths=200px heights=350px>
File:Expander1.png|Sample Application Page
+
File:Expander1.png|Example app with expanders "closed"
File:Expander2.png|ExpanderView displaying list of Teams participation in Cricket Match when "Team" Header is tapped
+
File:Expander2.png|"Teams" header expanded: view displays list of teams in cricket match
File:Expander3.png|ExpanderView displaying list of matches to choose from when "Choose Team" Header is tapped
+
File:Expander3.png|"Choose Match" expanded: view displays list of matches (checkable)
File:Expander4.png|Displays the result after selection
+
File:Expander4.png|Example app with selected match
 
</gallery>
 
</gallery>
  
== Getting Started==
+
== Adding the control to your project ==
First create a Windows Phone application.
+
First create a Windows Phone application:
 
+
 
* Open Visual Studio and select '''Windows Phone Application''' from the installed templates
 
* Open Visual Studio and select '''Windows Phone Application''' from the installed templates
 
* Select Windows Phone 7.1 as the Target Version.
 
* Select Windows Phone 7.1 as the Target Version.
Line 48: Line 55:
  
 
== Defining ExpanderView Control through XAML ==
 
== Defining ExpanderView Control through XAML ==
 +
The XAML code below shows how we create a {{Icode|ExpanderView}} named "Header 1", comprising of 8 {{Icode|TextBlock}} items.
 
<code xml>
 
<code xml>
 
  <toolkit:ExpanderView x:Name="Header1" Header="Teams " FontSize="40" Expanded="Header1_Expanded"/>
 
  <toolkit:ExpanderView x:Name="Header1" Header="Teams " FontSize="40" Expanded="Header1_Expanded"/>
Line 62: Line 70:
 
   </toolkit:ExpanderView>
 
   </toolkit:ExpanderView>
 
</code>
 
</code>
 
In this, we have a ExpanderView Control named "Header 1", comprising of 8 textblock items.
 
  
 
== Defining ExpanderView Control using CSharp ==
 
== Defining ExpanderView Control using CSharp ==
* first we create an instance of ExpanderView: <code csharp> ExpanderView Header1 = new ExpanderView();</code>  
+
The same control can be created in C# as shown below:
*defining ExpanderView
+
* First we create an instance of {{Icode|ExpanderView}} (in this case called {{Icode|Header1}}):
 +
*: <code csharp> ExpanderView Header1 = new ExpanderView();</code>  
 +
* Then we set the header text, add the expander to a {{Icode|stackpanel}}, and set the content of the expander as a list.
 
<code csharp>
 
<code csharp>
public MainPage()
+
public MainPage()
        {
+
  {
            InitializeComponent();
+
  InitializeComponent();
            Header1.Header = "Expander Header";  
+
  Header1.Header = "Expander Header";  
            stackpanel.Children.Add(Header1);   
+
  stackpanel.Children.Add(Header1);   
            this.Header1.ItemsSource = new List<string>() { "Afganistan", "Australia", "Bangladesh", "Ireland", "New Zealand", "South Africa", "Sri Lanka", "Zimbabwe" };
+
  this.Header1.ItemsSource = new List<string>() { "Afganistan", "Australia", "Bangladesh",
        }
+
      "Ireland", "New Zealand", "South Africa", "Sri Lanka", "Zimbabwe" };
 +
  }
 
</code>
 
</code>
  
==Expanded and Collapsed key Events==
+
==Expanded and collapsed events==
ExpanderView has two key events Expanded and Collapsed which takes place when the state of ExpanderView is changed.  
+
{{Icode|ExpanderView}} has two key events {{Icode|Expanded}} and {{Icode|Collapsed}} which are triggered when the state of {{Icode|ExpanderView}} is changed.  
  
*When ExpanderView (eg:Teams) is expanded
+
When the {{Icode|Header1}} {{Icode|ExpanderView}} is expanded its {{Icode|Expanded}} handler is called:
 
<code csharp>
 
<code csharp>
  private void Header1_Expanded(object sender, RoutedEventArgs e)
+
private void Header1_Expanded(object sender, RoutedEventArgs e)
        {
+
  {
            // can define any specific action we want to take when the ExpanderView expands
+
  // can define any specific action we want to take when the ExpanderView expands
        }   
+
  }   
 
</code>
 
</code>
  
*When ExpanderView (eg:Teams) is Collapsed
+
Similarly, when it is collapsed, the {{Icode|Collapsed}} handler is called:
 
<code csharp>
 
<code csharp>
  private void Header1_Collapsed(object sender, RoutedEventArgs e)
+
private void Header1_Collapsed(object sender, RoutedEventArgs e)
        {
+
  {
            // can define any specific action we want to take when the ExpanderView collapses
+
  // can define any specific action we want to take when the ExpanderView collapses
        }   
+
  }   
 
</code>
 
</code>
  
{{Note|ExpanderView has IsNonExpandable property which makes the ExpanderView non expandable.}}
+
{{Note|{{Icode|ExpanderView}} has {{Icode|IsNonExpandable}} property which makes the {{Icode|ExpanderView}} non expandable. This is useful if the expander can only be used in certain circumstances - perhaps after its content is fully populated.}}
  
 
== Downloads ==
 
== Downloads ==
 
You can download sample project code from this file  [[File:ExpanderControl.zip]].
 
You can download sample project code from this file  [[File:ExpanderControl.zip]].
[[Category:Code Examples]]
+
 
 +
<!-- 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
Compatibility
Platform(s): Windows Phone 7.5
Windows Phone 7.5
Device(s): All Windows Phones
Article
Created: Vaishali Rawat (05 Oct 2012)
Last edited: hamishwillee (30 Nov 2012)

Contents

Introduction

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.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

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

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()
{
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 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.

Downloads

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

295 page views in the last 30 days.
×