Working with the Accordion Control in Silverlight 4.0

In this example we will use the Accordion control to display a list of books, grouped by category.

1. Create a new SL application in VS 2010 called AccordionControl. Allow VS to create a web applition project to host the application.

2. With the MainPage.Xaml file selected, position the cursor in the source in Layout Grid. Find and double-click on the Accordion control in the Toolbox. This will add the control to the page, as well as the proper namespace reference:

xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

3. After you have added the Accordion, right-click on the control in the design view and select Reset Layout -> All. Then Name the Accordion BookList, set its width to 200, and specify a Margin of 10.

<Grid x:Name="LayoutRoot" Background="White" >

　　<toolkit:Accordion Name="BookList" Width="200" Margin="10" />

</Grid>

4. Switch to the code behind in the file MainPae.xaml.cs file. We need to define the data we'll be binding to the Accordion. For simplicity, we'll define the data right in the code behind file. Add two classes, one for Categories and one for Books.

 public class BookCategory
    {
        public string CategoryName { get; set; }
        public List<Booknew> Books { get; set; }
    }
    public class Booknew
    {
        public string Title { get; set; }
    }

5. Next we need to populate the classes with some data. To do this, first wire up the Loaded event and insert the following code:

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }
 
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            List<BookCategory> Library = new List<BookCategory>();
 
            BookCategory cat1 = new BookCategory() { 
                CategoryName = "Silverlight", 
                Books = new List<Book>() };
            cat1.Books.Add(new Book() { Title = "Beginning Silverlight 4" });
            cat1.Books.Add(new Book() { Title = "Pro Silverlight 4" });
            Library.Add(cat1);
 
            BookCategory cat2 = new BookCategory() { 
                CategoryName = "ASP.NET", 
                Books = new List<Book>() };
            cat2.Books.Add(new Book() { Title = "Pro ASP.NET 4" }) ;
            Library.Add(cat2);
        }
    }
 
    public class BookCategory
    {
        public string CategoryName { get; set; }
        public List<Book> Books { get; set; }
    }
 
    public class Book
    {
        public string Title { get; set; }
    }
} 

6. Now we need to define the header and content items, using the ItemTemplate for the header and the ContentTemplate for the content. For the ItemTemplate, we will simply define a TextBlock that will display the BookCategory. For the CotentTemplate, we will define a ListBox control that will contain a list of TextBlocks, each displaying a book Title.

<toolkit:Accordion Width="200" x:Name="BookList" Margin="10" >
            <toolkit:Accordion.ContentTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding Books}" BorderThickness="0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock FontWeight="Bold" Text="{Binding Title}" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </toolkit:Accordion.ContentTemplate>
            <toolkit:Accordion.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding CategoryName}" />
                </DataTemplate>
            </toolkit:Accordion.ItemTemplate>
        </toolkit:Accordion>

7. Next we need to bind the Library data source to the Accordion Control.

　　　　　　this.BookList.ItemsSource = Library;

8. Press F5 to run the solution.