Exploring Silverlight Accordian...

By: Brian Mains Date: August 10, 2009 Printer Friendly Version

Introduction

If you've worked with ASP.NET AJAX and used the AJAX control toolkit, you may have noticed the Accordion control. This control provides an expandable and collapsible view of accordion panels within the accordion control. By clicking on the header expands or collapses that accordion panel. It's also possible to bind data to the Accordion control in ASP.NET, a subject I've written about before on this site.

The Silverlight Accordion works similarly. This container provides a default interface to show/hide the accordion's content. The control can be bound to, creating repeatable AccordionItems to create the Accordion user interface. We'll examine all of this in this article.

Overview of Accordion

The accordion control is a flexible container that consists of a series of collapsible panels, made up of the AccordionItem control. The underlying source of the control is ItemsControl, meaning that the control can contain multiple objects to make up the user interface, by supplying values to the Items collection. In addition, the ItemsControl can be bound to using the ItemsSource property, which uses the underlying object to dynamically create the Accordion item object, supplying the underlying object to the header and content.

A lot of the plumbing comes from the ItemsControl base class; however, each derived class that inherits ItemsControl implements it in a different way. For instance, the HeaderedItemsControl class uses the items bound to it to create a repeatable list of content. The Accordion, however, uses each object bound to it to create an AccordionItem class that has its own header/content.

Accordion Items

Each accordion item works like an expander; clicking it shows or hides the content. However, the accordion has a special feature that only enables one item at a time. There may be other ways to get around this, but the primary nature of the Accordion is meant to work this way. To get the ability to have one or more items open at a given time, bind a list control, and use an Expander as the template.

The header and content properties can be specified in a variety of ways. Listing 1 contains some of the ways that it can be listed.

Listing 1: Header and Content

 <Accordion>
     <AccordionItem Header="First Header" Content="First Content" />
     <AccordionItem Header="Second Header">
         <TextBlock Text="Second Content" />
     </AccordionItem>
     <AccordionItem>
         <AccordionItem.Header>
             <TextBox Text="Third Item" />
         </AccordionItem.Header>
         <AccordionItem.Content>
             <TextBlock Text="Third Item" />
         </AccordionItem.Content>
     </AccordionItem>
     <AccordionItem>
         <AccordionItem.Header>
             <TextBlock Text="Fourth Item" />
         </AccordionItem.Header>
         <TextBlock Text="Third Item" />
     </AccordionItem>
 </Accordion>

In these four scenarios, notice the differences between them. In their simplest forms, the AccordionItem component can accept a textual header and content to display within it. All content controls can accept a wide array of content, so the AccordionItem takes a TextBlock element as its content parameter.

The third item uses long-form for the header and content properties, specifying the elements that should appear within the header and content. Notice the explicit header and content designations, but the content designation is missing from the second and now the fourth examples. This comes to be because the Content property is the default, and any content not within a property designation is considered to be a part of the control's content.

Notice the short-hand and long-hand form: the short-hand form uses attributes to specify the parameter values, while the long-hand form use a child element in the form of . Any values, including other elements to display, must be used in the long-hand form, unless using templates (a subject not discussed in this article)

Here's a note about content controls in general: content controls can only have one child. Because of this restriction, the AccordionItem.Content property must have a container control to group the accordion's interface.

Templates

The Accordion control also supports the HeaderTemplate and ContentTemplate properties. These templates generate AccordionItem objects based upon some underlying data source. The HeaderTemplate and ContentTemplate uses a DataTemplate object to provide the UI for each item. Anything can be within the template to display data about the underlying data. Below is an example layout, shown below.

Listing 2: Binding Content to the Accordion

 <Accordion>
     <Accordion.HeaderTemplate>
         <DataTemplate>
             <WrapPanel>
                 <Label Content="{Binding Title}" />
             </WrapPanel>
         </DataTemplate>
     </Accordion.HeaderTemplate>
     <Accordion.ContentTemplate>
         <DataTemplate>
             <StackPanel>
                 <TextBlock Text="{Binding Abstract}" />
                 <TextBlock Text="{Binding Description}" />
             </StackPanel>
         </DataTemplate>
     </Accordion.ContentTemplate>
 </Accordion>

In this scenario, the HeaderTemplate and ContentTemplate present simplistic templates for the accordion. The header displays the title, and the content displays an abstract and description. These values must match an object that's bound to it, such as the following:

Listing 3: Object Bound to Accordion

 public class Article
 {
     public string Title { get; set; }
     public string Abstract { get; set; }
     public string Description { get; set; }
 }

At runtime, each Article object that's in a list, bound to the Accordion, gets an AccordionItem that represents it. The Accordion's Header/Content template represents the header content of the AccordionItem that represents it. So if 4 Article objects in a list get bound to the Accordion, that Accordion will have 4 AccordionItem objects, of which only one can be visible at a time.

Accordion Settings

There are some other settings that can affect how the Accordion works. I mentioned before that the Accordion only displays one AccordionItem in the control. This is an adjustable setting controlled by the SelectionMode property. This enumerated property controls whether only one entry can be expanded, zero entries can be expanded, or multiple entries can be expanded. For instance, changing this value to the value ZeroOrOne will allow zero items to be selected (by clicking the selected accordion a second time).

Setting the ExpandDirection property changes the expander to expand up, down, left, or right, by changing the value (an enumerated property). The SelectionSequence determines the actions the Accordion takes when selecting an item. If Simultaneous is set, the Accordion shows and hides the AccordionItem at the same time; otherwise, the currently selected item is collapsed, followed by expanding the newly selected item.

The Accordion keeps track of which items are selected via SelectedItem, SelectedIndex, and SelectedIndices (in modes where multiple selections are allowed). These properties can be read or set accordingly.

Conclusion

The Accordion is a useful control in the Silverlight environment, and it has a lot of capabilities that developers will want to make use of. It can be bound to a data source or statically defined. It supports template overriding, and provides a variety of settings to override the default behavior of the control.