# Accordion XAML Quick Reference

## Content



This topic is dedicated to providing a quick overview of the XAML used to complete various [C1Accordion](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.html) tasks. For more information, see the [Accordion for Silverlight Task-Based Help](/componentone/docs/wpf/online-extended/Accordion/AccordionTask-BasedHelp) section.

**C1Accordion with C1AccordionItems**

The following XAML markup creates a [C1Accordion](http://helpcentral.componentone.com/nethelp/sl_extended/XMLDocuments/SLExtendedReference/html/T_C1_Silverlight_Extended_C1Accordion.htm) control with three [C1AccordionItem](http://helpcentral.componentone.com/nethelp/sl_extended/XMLDocuments/SLExtendedReference/html/T_C1_Silverlight_Extended_C1AccordionItem.htm)s.

```xml
<c1:C1Accordion Height="100" HorizontalAlignment="Left" Name="c1Accordion1" VerticalAlignment="Top" Width="200">
     <c1:C1AccordionItem IsTabStop="False" />
     <c1:C1AccordionItem IsTabStop="False" />
     <c1:C1AccordionItem IsTabStop="False" />
</c1:C1Accordion>
```

**C1AccordionItems with Content**

The following XAML markup creates a [C1Accordion](http://helpcentral.componentone.com/nethelp/sl_extended/XMLDocuments/SLExtendedReference/html/T_C1_Silverlight_Extended_C1Accordion.htm) control containing three [C1AccordionItem](http://helpcentral.componentone.com/nethelp/sl_extended/XMLDocuments/SLExtendedReference/html/T_C1_Silverlight_Extended_C1AccordionItem.htm)s. It is similar to the markup under [C1Accordion](http://helpcentral.componentone.com/nethelp/sl_extended/XMLDocuments/SLExtendedReference/html/T_C1_Silverlight_Extended_C1Accordion.htm) with [C1AccordionItem](http://helpcentral.componentone.com/nethelp/sl_extended/XMLDocuments/SLExtendedReference/html/T_C1_Silverlight_Extended_C1AccordionItem.htm)s, but this time each C1AccordionItem contains content. The first item contains a **TextBlock**, the second item contains a **Button** control, and the third item contains a **Calendar** control.

```xml
<c1:C1Accordion Height="276" HorizontalAlignment="Left" Name="c1Accordion1" VerticalAlignment="Top" Width="355">
    <c1:C1AccordionItem IsTabStop="False">
       <TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top">Hello world, my name is Studio for Silverlight.</TextBlock>
    </c1:C1AccordionItem>
    <c1:C1AccordionItem IsTabStop="False">
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
     </c1:C1AccordionItem>
     <c1:C1AccordionItem IsTabStop="False">
         <sdk:Calendar Height="169" HorizontalAlignment="Left" Margin="15,15,0,0" Name="calendar1" VerticalAlignment="Top" Width="230" />
     </c1:C1AccordionItem>
</c1:C1Accordion>
```