Accordion in Silverlight

Silverlight Accordian control is same as Ajax Accordian control. The functionality of this control is to expand and collapse the content within the accordian control. The accordion control is a flexible container that consists of a series of collapsible panels, made up of the AccordionItem control.  The AccordionItem control contain header and content to hide and show the data. By Clicking header part, the content will show and hide.

Ex:

<layoutToolkit:Accordion>

<layoutToolkit:AccordionItem Header= “Item A Header” Content=”Item A Content”></layoutToolkit:AccordionItem>

<layoutToolkit:AccordionItem Header= “Item B Header” Content=”Item B Content”></layoutToolkit:AccordionItem>

</layoutToolkit:Accordion>

In Silverlight Accordion, AccordionItem contain ContentControl, this will add other silverlight controls like HyperlinkButton, Button, Label….

Ex2:

<layoutToolkit:Accordion>

<layoutToolkit:AccordionItem Header=”Item B Header”>

<ContentControl>

<StackPanel>

<HyperlinkButton NavigateUri=”http://silverlight.net/GetStarted/”  Content=”silverlight” TargetName=”_blank”></HyperlinkButton>

<HyperlinkButton NavigateUri=”http://www.google.co.in”  Content=”Google” TargetName=”_blank”></HyperlinkButton>

</StackPanel>

</ContentControl>

</layoutToolkit:AccordionItem>

</layoutToolkit:Accordion>

The header and content properties can be specified in a variety of ways.

Complete Sample Code :

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

<StackPanel Orientation=”Horizontal” VerticalAlignment=”Top”>

<layoutToolkit:Accordion>

<layoutToolkit:AccordionItem Header= “Item A Header” Content=”Item A Content”></layoutToolkit:AccordionItem>

<layoutToolkit:AccordionItem Header=”Item B Header”>

<ContentControl>

<StackPanel>

<HyperlinkButton NavigateUri=”http://silverlight.net/GetStarted/”  Content=”silverlight” TargetName=”_blank”></HyperlinkButton>

<HyperlinkButton NavigateUri=”http://www.google.co.in”  Content=”Google” TargetName=”_blank”></HyperlinkButton>

</StackPanel>

</ContentControl>

</layoutToolkit:AccordionItem>

</layoutToolkit:Accordion>

</StackPanel>

</Grid>