ExpanderView in Silverlight for Windows Phone Toolkit

Comments

Hamishwillee - Subedited - thanks and some suggestions

Hi Vaishali

Thanks for the article. A useful tool.

I've subedited, mostly for readability. Please check that it still says what you want it to. Note please the following changes so you can consider these for your next articles:

1. I've used Icode to mark up inline code. This includes ExpanderView everywhere.
2. Normally I'd make the first mention of ExpanderView a link to the reference for the class. You had a link (which I have removed) because its not clear that the Expander you linked to is exactly the same as an ExpanderView in terms of API reference
3. I've added SeeAlso with links to other useful documents and tutorials on how to use the component.
4. I usually use 2 spaces for code indentation.
5. You correctly explained what IsNonExpandable does - it is useful to also explain why this might be useful, since on the face of it an ExpanderView that doesn't expand is not very useful.

In addition, before creating an article it is worth considering whether you can improve on other articles. There isn't much point in creating a new article unless its better than the existing reference material around the place.

In terms of "room for improvement" this article shows how to include the control in a project. It might be worth also showing how to add the Sliverlight toolkit to your installation (or at least pointing to where this information can be found in the SeeAlso).

You've also shown how to display a hard coded list. What if someone doesn't know what the list is, or wants a more exiting layout. It might well be worth having a section showing how a DataTemplate can be used to define the appearance of the list, and use binding to populate the list. Something to think about anyway!

Lastly, the vertical line to the left of the list looks like it goes a little high (touches the header). Is this something you can control?

Regards

Hamish

hamishwillee 08:35, 8 October 2012 (EEST)

Hamishwillee - Improved title

Note also, I improved the title. It doesn't hurt to say exactly where this comes from, and using the "correct" component name is also good in this case, because it is a meaningful name.

hamishwillee 08:37, 8 October 2012 (EEST)

Vaishali Rawat - Vaishali - @Hamishwillee

Thanks Hamish for the sub-edits and suggestions. Regarding the vertical line going little high, Its the standard functionality of the control. However, this can be controlled/manuplated by using the "EXPANDER" property. Inside that we can use a blank textblock.

Ex:Considering the Xaml Explained in the Article

<toolkit:ExpanderView x:Name="Header1" Header="Teams " FontSize="40" Expanded="Header1_Expanded"/>    
     <toolkit:ExpanderView.Expander>      
                 <Textblock  Height="80" Text=""/>  
     </toolkit:ExpanderView.Expander>

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

Regards,

Vaishali Rawat

Vaishali Rawat 18:42, 14 October 2012 (EEST)

Hamishwillee - Thanks for letting me know

Much appreciated

hamishwillee 08:05, 15 October 2012 (EEST)

Yordanpavlov - Windows Phone Toolkit ExpanderView in depth

For a more in-depth information on the Windows Phone Toolkit ExpanderView control you can take a look at the following articles:

http://www.windowsphonegeek.com/articles/Windows-Phone-Toolkit-ExpanderView-in-depth-Part1-key-concepts-and-API http://windowsphonegeek.com/articles/Windows-Phone-Toolkit-ExpanderView-in-depth-Part2-Data-Binding http://www.windowsphonegeek.com/articles/Expand-and-Collapse-ExpanderView-inside-data-bound-ListBox-via-code

You can find more articles about the Windows Phone Toolkit here: http://www.windowsphonegeek.com/articles/21-WP7-Toolkit-in-Depth-articles-covering-all-controls

And of course in the excellent book here:

http://windowsphonegeek.com/WPToolkitBook2nd

yordanpavlov 13:53, 21 October 2012 (EEST)

Hamishwillee - Yordanpavlov - thanks!

The windowsphonegeek articles and book were already linked in the "seealso" box to top right of page, but I added link to http://www.windowsphonegeek.com/articles/Expand-and-Collapse-ExpanderView-inside-data-bound-ListBox-via-code

I will add a link to http://www.windowsphonegeek.com/articles/21-WP7-Toolkit-in-Depth-articles-covering-all-controls in Silverlight for Windows Phone Toolkit

Thanks very much for pointing these out.

Regards

Hamish

hamishwillee 08:39, 26 October 2012 (EEST)

Log in or Join to leave comments.

This code example explains how to use ExpanderView control from the Silverlight for Windows Phone Toolkit.

See Also

• Silverlight for Windows Phone Toolkit In Depth (EBook)
• Expander control tutorial (CESPage.com)
• Expand and Collapse ExpanderView inside data bound ListBox via code (windowsphonegeek.com)
• Windows Phone Toolkit ExpanderView in depth (windowsphonegeek.com)
  • Part1: key concepts and API
  • Part2: Data Binding

Article Metadata

---

Code Example

Source file: Media:ExpanderControl.zip

---

Tested with

SDK: Windows Phone 7.1

Devices(s): Tested with the Lumia 800

---

Compatibility

Platform(s): Windows Phone 7.5

Device(s): All Windows Phones

---

Article

Keywords: Expander control

Created: Vaishali Rawat (05 Oct 2012)

Last edited: hamishwillee (30 Nov 2012)

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.

• 

  Example app with expanders "closed"

• 

  "Teams" header expanded: view displays list of teams in cricket match

• 

  "Choose Match" expanded: view displays list of matches (checkable)

• 

  Example app with selected match

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