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

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

×