Expander Content Area

The C1Expander control'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, 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 the C1Expander control.

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

Content controls like C1Expander can only accept one child element at a time. However, you can circumvent this issue by adding a panel-based control as the C1Expander control's 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 C1Expander control, but its ability to hold multiple elements will allow you to show several controls in the content area.

For task-based help about adding content to the content area, see Adding Content to the Content Area.

Attribute Syntax versus Property Element Syntax

When you want to add something simple to the C1Expander 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:

XAML	Copy Code
<c1ext:C1Expander 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:

XAML	Copy Code
<c1ext:C1Expander ExpandDirection="Down" Width="150" Height="55" Name="C1Expander1"> <c1ext:C1Expander.Content> <StackPanel> <TextBlock Text="Hello"/> <TextBlock Text="World"/> </StackPanel> </c1ext:C1Expander.Content> </c1ext:C1Expander>

XAML

Copy Code

<c1ext:C1Expander ExpandDirection="Down" Width="150" Height="55" Name="C1Expander1">
            <c1ext:C1Expander.Content>
                <StackPanel>
                    <TextBlock Text="Hello"/>
                    <TextBlock Text="World"/>
                </StackPanel>
            </c1ext:C1Expander.Content>
</c1ext:C1Expander>