Silverlight - Accordion Control in Silverlight

The Accordion is a control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.
In this post i will show you how to use  Silverlight accordion control without data binding and with data binding.

First i will show you without data binding accordion control.In this article i will show how to create image gallery in accordion control. 

Step 1
You need to download Silverlight 4 toolkit from the following link and install in you'r system
http://silverlight.codeplex.com/

Note : Select only April 2010 Toolkit Silverlight 4

Step 2
Create a Silverlight application and give the solution name as AccordianControl_Static.

Step 3
Create a New Folder in the solution and give folder name as Images. Add five images like this

Step 4
Drag a Accordion control in grid from toolbox,it is look like this

<toolkit:Accordion x:Name="MainAccordian"  Width="640" ExpandDirection="Right" VerticalAlignment="Stretch">
</toolkit:Accordion>

Set ExpandDirection as Right.Default ExpandDirection is Down.

Step 5
Add five AccordionItem to our Accordion control,it is look like this

<toolkit:Accordion x:Name="MainAccordian"  Width="640" ExpandDirection="Right" VerticalAlignment="Stretch">

            <toolkit:AccordionItem Header="Kakashi Hatake" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="Kakashi" Source="../Images/Kakashi011.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Naruto Uzumaki" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="naruto" Source="../Images/Naruto.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Jiraiya" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="jiraiya" Source="../Images/1_Jiraiya003.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Gara" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="Gara" Source="../Images/gara.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Yamato" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="Yamato" Source="../Images/yamato.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            </toolkit:Accordion>
        

Run the Project.

Output

1.

Click on Image for Better View

2.

Click on Image for Better View

3.

Click on Image for Better View

4.

Click on Image for Better View

5.

Click on Image for Better View


Full Code

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    x:Class="AccordianControl_Static.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
    
            <toolkit:Accordion x:Name="MainAccordian"  Width="640" ExpandDirection="Right" VerticalAlignment="Stretch">

            <toolkit:AccordionItem Header="Kakashi Hatake" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="Kakashi" Source="../Images/Kakashi011.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Naruto Uzumaki" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="naruto" Source="../Images/Naruto.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Jiraiya" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="jiraiya" Source="../Images/1_Jiraiya003.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Gara" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="Gara" Source="../Images/gara.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            <toolkit:AccordionItem Header="Yamato" VerticalContentAlignment="Center" HorizontalContentAlignment="Stretch" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red">
                    <Image x:Name="Yamato" Source="../Images/yamato.jpg" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </toolkit:AccordionItem>
            </toolkit:Accordion>
        
    </Grid>
</UserControl>

Download
Download Source Code