In addition to using themes to change the appearance of the Accordion control, you can completely customize the Accordion's appearance at design time and in XAML. We will set the properties for the HeaderBackground, ExpandedBackground, and MouseOverBrush.
Follow these steps to change the Accordion's appearance:
At Design Time in Visual Studio
Follow these steps:
1. Add three C1AccordionItems to your C1Accordion control (see Adding Accordion Panes to the C1Accordion Control).
2. Select the first C1AccordionItem to view the Properties window.
3. Locate and select the HeaderBackground property.
4. Use the dropdown arrow to reveal the color-picker and choose a color for the HeaderBackground property.
5. Choose colors for the following C1AccordionItem properties:
6. Repeat the steps for the two remaining C1AccordionItems.
7. Run your application. Your C1Accordion control should reflect the changes you have made to its appearance.
In XAML
Follow these steps:
1. Locate the <Grid> </Grid> tags in your markup. Insert the following XAML markup between the tags to add a C1Accordion control and three C1AccordionItems:
<c1:C1Accordion>
<c1:C1AccordionItem> </c1:C1AccordionItem>
<c1:C1AccordionItem> </c1:C1AccordionItem>
<c1:C1AccordionItem> </c1:C1AccordionItem>
</c1:C1Accordion>
2. Click in the first <c1:C1AccordionItem> tag and add the following XAML to set the HeaderBackground, ExpandedBackground, and MouseOverBrush properties:
ExpandedBackground="#FFF5E006" HeaderBackground="#FF32640C" MouseOverBrush="#FF007C00"
The whole tag should appear as follows:
<c1:C1AccordionItem BorderBrush="Black" ExpandedBackground="#FFF5E006" HeaderBackground="#FF32640C" MouseOverBrush="#FF007C00">
3. Click the second<c1:C1AccordionItem> tag and add the following XAML to set the HeaderBackground, ExpandedBackground, and the MouseOverBrush properties:
ExpandedBackground="#FFF5E006" FocusBrush="#FFC900F2" HeaderBackground="#FF0071E4" MouseOverBrush="#FF007C00"
The whole tag should appear as follows:
<c1:C1AccordionItem ExpandedBackground="#FFF5E006" HeaderBackground="#FF0071E4" MouseOverBrush="#FF007C00">
4. Click in the third <c1:C1AccordionItem> tag and add the following XAML to set the HeaderBackground, ExpandedBackground, and MouseOverBrush properties:
MouseOverBrush="#FF8E45FF" HeaderBackground="#FFF5C318" ExpandedBackground="#FFF88325"
The whole tag should appear as follows:
<c1:C1AccordionItem MouseOverBrush="#FF8E45FF" HeaderBackground="#FFF5C318" ExpandedBackground="#FFF88325">
5. Press F5 to run your application. The C1Accordion control should appear as in the following image: