Accordion Pane Content Area

An accordion pane's content area initially consists of an empty space. In the content area, you can add grids, text, images, and arbitrary controls. When working in Blend or Visual Studio's Design view, elements in the content area of the control can be added and moved on the control through a simple drag-and-drop operation.

The following image labels the content area of an accordion pane.

You can add text to the content area by setting the item's Content property or by adding a TextBox element to the content area. Adding WPF elements to the content area at run time is simple: You can either use simple drag-and-drop operations or XAML in Visual Studio or Blend. If you'd prefer to add a control at run time, you can use C# or Visual Basic code.

A C1AccordionItem item can only accept one child element at a time. However, you can circumvent this issue by adding a panel-based control as its child element. Panel-based controls, such as a StackPanel control, are able to hold multiple elements. The panel-based control meets the one control limitation of the C1AccordionItem item, but its ability to hold multiple elements will allow you to show several controls in the content area of the accordion pane.

Attribute Syntax versus Property Element Syntax

When you want to add something simple to the content area, such as an unformatted string or a single control, you can simply use the common XML attributes in your XAML markup, such as in the following:

<c1ext:C1AccordionItem Content="Hello World"/>

However, there may be times where you want to add more complex elements, such as grids or panels, to the content area. In this case you can use property element syntax, such as in the following:

<c1ext:C1AccordionItem Width="150" Height="55" Name="C1AccordionItem1">

<c1ext:C1AccordionItem.Content>

</StackPanel>

</c1ext:C1AccordionItem.Content>

</c1ext:C1AccordionItem>