Accordion Control in Silverlight 3

In this article I will show you how to design the Accordion Control in Silverlight 3.

 
In this article I will show you how to design the Accordion Control in Silverlight 3.

The Accordion control is part of the Silverlight toolkit which can be downloaded from here.

The XAML for the control is:

<layoutToolkit:Accordion Margin="126,105,218,94" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

The control is made of differect sections which can be expanded or collapsed according to the need. The different sections of the control is made up of AccordionItem control.

Now we will see how to add AccordionItem to our Accordion control.

AccordionItem can be added by right clicking the control and selecting "Add AccordionItem". In this example I have inserted four AccordionItem to the control.

The default style of the control is shown below:


 
The XAML of the above is shown below:

<layoutToolkit:Accordion Margin="126,105,218,94" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
          <layoutToolkit:AccordionItem Content="Content" Header="Header"/>
          <layoutToolkit:AccordionItem Content="Content" Header="Header"/>
          <layoutToolkit:AccordionItem Content="Content" Header="Header"/>
          <layoutToolkit:AccordionItem Content="Content" Header="Header"/>
</layoutToolkit:Accordion>

Now we are going to do some styling to this control.

The header style will look like this:


 
Now we are going to place some content to the containers within the control.

Below example shows only one of the four AccordionItem I have created.

<layoutToolkit:AccordionItem Header="Friends" FontFamily="Verdana" FontSize="13.333">
      <Canvas Height="286" Width="393">
          <Image Height="75" Width="61" Source="Images/mahesh.jpg" Stretch="Fill" Canvas.Left="42" Canvas.Top="15"/>
          <TextBlock Height="19" Width="79" Canvas.Left="54" Canvas.Top="94" FontSize="12" FontWeight="Bold" Text="Mahesh" TextWrapping="Wrap"/>
          <Image Height="75" Width="61" Source="Images/dpatra.jpg" Stretch="Fill" Canvas.Left="260" Canvas.Top="17"/>
          <Image Height="75" Width="61" Source="Images/mahesh.jpg" Stretch="Fill" Canvas.Left="50" Canvas.Top="15"/>
          <Image Height="75" Width="61" Source="Images/dhananjaycoder.jpg" Stretch="Fill" Canvas.Left="50" Canvas.Top="123"/>
          <TextBlock Height="19" Width="93" Canvas.Left="258" Canvas.Top="96" FontSize="12" FontWeight="Bold" Text="Diptimaya" TextWrapping="Wrap"/>
          <TextBlock Height="19" Width="85" Canvas.Left="48" Canvas.Top="202" FontSize="12" FontWeight="Bold" Text="Dhananjay" TextWrapping="Wrap"/>
      </Canvas>
</layoutToolkit:AccordionItem>

The final output of our control will be as follows:

 

 



 

Happy styling!