By default, the C1Accordion control's accordion panes expand from top-to-bottom because the C1Accordion.ExpandDirection property is set to Down. You can easily change the expand direction by setting the ExpandDirection property to Up, Right, or Left in Design view, in XAML, or in code.

This topic assumes that you have added a C1Accordion control with at least one C1AccordionItem to your project.

At Design Time in Design view

To set the ExpandDirection property in Design view, complete the following steps:

1. Click the C1Accordion control once to select it.
2. In the Properties window, click the ExpandDirection drop-down arrow and select one of the options from the list. For this example, select Right.

In XAML

To set the ExpandDirection property to Right in XAML, add ExpandDirection="Right" to the <c1ext:C1Accordion> tag so that it appears similar to the following:

<c1ext:C1Accordion Name="C1Accordion1" ExpandDirection=Right Width="150" Height="55">

In Code

To set the ExpandDirection property in code, complete the following steps:

1. Enter Code view and add the following code beneath the InitializeComponent() method:

Visual Basic	Copy Code
C1Accordion1.ExpandDirection = C1.WPF.Extended.ExpandDirection.Right

 

C#	Copy Code
c1Accordion1.ExpandDirection = C1.WPF.Extended.ExpandDirection.Right;

2. Run the program.

This Topic Illustrates the Following:

By following the instructions in this topic, you have learned how to set the ExpandDirection property. In this topic, you set the ExpandDirection property to Right, which will make the ExpandDirection control resemble the following: