ExpanderView in Silverlight for Windows Phone Toolkit - Revision history

Hamishwillee: Hamishwillee - Addition to article of: Category:Windows Phone 7.5

2012-11-30T05:15:51Z

Hamishwillee - Addition to article of: Category:Windows Phone 7.5

Hamishwillee: Hamishwillee - Add link to (windowsphonegeek.com)

2012-10-26T05:38:02Z

Hamishwillee - Add link to (windowsphonegeek.com)

Croozeus: Croozeus - /* Introduction */

2012-10-15T17:08:53Z

Croozeus - - Introduction

Hamishwillee: Hamishwillee - Add link to Chinese translation

2012-10-12T05:58:18Z

Hamishwillee - Add link to Chinese translation

Hamishwillee: moved Expander View In Windows Phone to ExpanderView in Silverlight for Windows Phone Toolkit: More correct title

2012-10-08T05:36:12Z

moved Expander View In Windows Phone to ExpanderView in Silverlight for Windows Phone Toolkit: More correct title

Hamishwillee: Hamishwillee - Subedit

2012-10-08T05:25:46Z

Hamishwillee - Subedit

Hamishwillee: Hamishwillee - Bot update - Fix metadata

2012-10-08T04:19:58Z

Hamishwillee - Bot update - Fix metadata

Vaishali Rawat: Vaishali Rawat - /* Defining ExpanderView Control through XAML */

2012-10-05T15:55:08Z

Vaishali Rawat - - Defining ExpanderView Control through XAML

Vaishali Rawat: Vaishali Rawat -

2012-10-05T15:54:01Z

Vaishali Rawat -

Vaishali Rawat: Vaishali Rawat -

2012-10-05T15:51:57Z

Vaishali Rawat -

New page

[[Category:Windows Phone]]
{{Abstract|This article explains how to use ExpanderView crontrol in Window Phone 7 }}

{{ArticleMetaData 
|sourcecode= 
|installfile= 
|devices= Tested with the Lumia 800 
|sdk= Windows Phone 7.1 
|platform= Windows Phone 7.5 
|devicecompatability= All Windows Phones 
|dependencies= 
|signing=
|capabilities= 
|keywords= [http://msdn.microsoft.com/en-us/library/system.windows.controls.expander.aspx Expander control]
|language= 
|translated-by= 
|translated-from-title= 
|translated-from-id= 
|review-by=
|review-timestamp= 
|update-by= 
|update-timestamp= 
|creationdate= 20121005
|author= [[User:Vaishali Rawat]]
}}

== 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 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.
<gallery widths=200px heights=350px>
File:Expander1.png|Sample Application Page
File:Expander2.png|ExpanderView displaying list of Teams participation in Cricket Match when "Team" Header is tapped
File:Expander3.png|ExpanderView displaying list of matches to choose from when "Choose Team" Header is tapped
File:Expander4.png|Displays the result after selection
</gallery>

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

== Defining ExpanderView Control through XAML ==
<code xml>
<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>
</code>

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: <code csharp> ExpanderView Header1 = new ExpanderView();</code>
*defining ExpanderView
<code csharp>
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" };
}
</code>

==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
<code csharp>
private void Header1_Expanded(object sender, RoutedEventArgs e)
{
// can define any specific action we want to take when the ExpanderView expands
}
</code>

*When ExpanderView (eg:Teams) is Collapsed
<code csharp>
private void Header1_Collapsed(object sender, RoutedEventArgs e)
{
// can define any specific action we want to take when the ExpanderView collapses
}
</code>

{{Note|ExpanderView has IsNonExpandable property which makes the ExpanderView non expandable.}}

== Downloads ==
You can download sample project code from this file [[File:ExpanderControl.zip]].

← Older revision		Revision as of 05:15, 30 November 2012
Line 111:		Line 111:
	You can download sample project code from this file [[File:ExpanderControl.zip]].		You can download sample project code from this file [[File:ExpanderControl.zip]].

−	<!-- Translation --> [[zh-hans:Silverlight for Windows Phone Toolkit中的ExpanderView控件]]	+	<!-- Translation --> [[zh-hans:Silverlight for Windows Phone Toolkit中的ExpanderView控件]][[Category:Windows Phone 7.5]]

@@ Line 4: / Line 4: @@
 * [[Silverlight for Windows Phone Toolkit In Depth (EBook)]]
 *  [http://cespage.com/silverlight/wp7tut24.html Expander control tutorial] (CESPage.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]

@@ Line 34: / Line 34: @@
 {{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).
-This article provides a brief overview of how to include and use the control in your projects. The example uses two {{Icode|ExpanderView}}: the first displays a list of teams participating in a game, while the second allows you to select a specific game from a list.
+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>

← Older revision		Revision as of 05:58, 12 October 2012
Line 109:		Line 109:
	== 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]].
		+
		+	<!-- Translation --> [[zh-hans:Silverlight for Windows Phone Toolkit中的ExpanderView控件]]

@@ 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|
 {{ArticleMetaData <!-- v1.2 -->
 |sourcecode= [[Media:ExpanderControl.zip]] <!-- Link to example source code e.g.  -->
@@ Line 26: / Line 32: @@
 == 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}}: 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>
-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>
-== 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
 * Select Windows Phone 7.1 as the Target Version.
@@ Line 48: / Line 54: @@
 == Defining ExpanderView Control through XAML ==
 <code xml>
   <toolkit:ExpanderView x:Name="Header1" Header="Teams " FontSize="40" Expanded="Header1_Expanded"/>
@@ Line 62: / Line 69: @@
    </toolkit:ExpanderView>
 </code>
 == 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>
- 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>
-==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>
-  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>
-*When ExpanderView (eg:Teams) is Collapsed
+Similarly, when it is collapsed, the {{Icode|Collapsed}} handler is called:
 <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>
-{{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 ==
 You can download sample project code from this file  [[File:ExpanderControl.zip]].

@@ Line 9: / Line 9: @@
 |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) -->
 |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. -->
 |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 -->
 |translated-by= <!-- [[User:XXXX]] -->
 |translated-from-title= <!-- Title only -->
 |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 -->
 |update-by= <!-- After significant update: [[User:username]]-->
@@ Line 26: / Line 26: @@
 == 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.
 The Sample Application provides a breif about how to include this control and use it.
@@ Line 63: / Line 63: @@
 </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 ==
@@ Line 79: / Line 79: @@
 ==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
@@ Line 101: / Line 101: @@
 == Downloads ==
 You can download sample project code from this file  [[File:ExpanderControl.zip]].

@@ Line 3: / Line 3: @@
 {{ArticleMetaData <!-- v1.2 -->
-|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+|sourcecode= [[Media:ExpanderControl.zip]] <!-- Link to example source code e.g.  -->
 |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 |devices= Tested with the Lumia 800 <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->