Using the Silverlight Accordion Control
page 4 of 6
by Brian Mains
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 46218/ 70


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

                 <Label Content="{Binding Title}" />
                 <TextBlock Text="{Binding Abstract}" />
                 <TextBlock Text="{Binding Description}" />

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.

View Entire Article

User Comments

Title: reply   
Name: dana
Date: 2012-03-14 12:53:32 PM
How do I reference the description textblock from code
Title: Accordion imports?   
Name: davraf
Date: 2010-09-06 11:43:07 AM
what's the xmlns to use?
Title: reply   
Name: samantha
Date: 2009-07-01 2:57:24 AM
giv some more code and give a full example how to bind data source to accordion
Title: Re   
Name: Jack
Date: 2009-06-11 9:14:41 PM
Accordion is a fashion style since Outlook first bring it to us, a fashion control
Title: Needs some screen shots   
Name: graphics
Date: 2009-06-11 8:00:30 PM
It is nice to see what the code produces, show a screen shot .....

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2021  |  Page Processed at 2021-04-16 10:22:41 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search