×
Namespaces

Variants
Actions
(Difference between revisions)

ExpanderView in Silverlight for Windows Phone Toolkit

From Nokia Developer Wiki
Jump to: navigation, search
Vaishali Rawat (Talk | contribs)
(Vaishali Rawat - - Defining ExpanderView Control through XAML)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
Line 9: Line 9:
 
|platform= Windows Phone 7.5 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= Windows Phone 7.5 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= All Windows Phones <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= All Windows Phones <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= [http://msdn.microsoft.com/en-us/library/system.windows.controls.expander.aspx Expander control]  
+
|keywords= [http://msdn.microsoft.com/en-us/library/system.windows.controls.expander.aspx Expander control]
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
Line 26: Line 26:
  
 
== 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.
+
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.
 
ExpanderView control can simply be used either to display the data or to choose a particular item for a given list.
 
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.
 
The Sample Application provides a breif about how to include this control and use it.
Line 63: Line 63:
 
</code>
 
</code>
  
In this , we have a ExpanderView Control named "Header 1", comprising of 8 textblock items.
+
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 ==
Line 79: Line 79:
  
 
==Expanded and Collapsed key Events==
 
==Expanded and Collapsed key Events==
ExpanderView has two key events Expanded and Collapsed which takes place when the state of ExpanderView is changed.  
+
ExpanderView has two key events Expanded and Collapsed which takes place when the state of ExpanderView is changed.  
  
 
*When ExpanderView (eg:Teams) is expanded
 
*When ExpanderView (eg:Teams) is expanded
Line 101: Line 101:
 
== 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]]

Revision as of 07:19, 8 October 2012

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
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 (08 Oct 2012)

Contents

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.

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.pngNote: ExpanderView has IsNonExpandable property which makes the ExpanderView non expandable.

Downloads

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

331 page views in the last 30 days.
×