Tuesday, March 15, 2011

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

2 comments:

  1. thnx, i liked it...

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete