Step 2 of 3: Adding Content to the C1Expander Control

In the last step, you customized the appearance and behavior of the C1Expander control. In this step, you will add controls to the C1Expander control's content panel.

Complete the following steps:

1. Place your cursor between the <c1ext:C1Expander> and </c1ext:C1Expander> tags and press ENTER.

2. Navigate to the Toolbox and double-click the StackPanel icon to add a StackPanel control to the C1Expander control. The XAML markup will resemble the following:

<c1ext:C1Expander Height="200" Width="250" Name="C1Expander1" Background="Aqua" Header="Expander Quick Start" ExpandDirection="Up">

</c1ext:C1Expander>

You are adding a StackPanel control to the C1Expander control's content panel because you'll be adding more than one control to the content panel in this quick start. The C1Expander control, as a content control, can only accept one child item at a time; however, you can get around this limitation by adding a panel-based control, which can accept multiple child items, to the C1Expander control.

3. Add HorizontalAlignment="Center" to the <StackPanel> tag so that all content added to the panel will be centered. The XAML markup will resemble the following:

4. Place your cursor between the <StackPanel> and </StackPanel> tags and press ENTER.

5. Navigate to the Toolbox and double-click the TextBlock icon to add the control to the StackPanel control. Repeat this twice so that a total of three TextBlock controls are added as the StackPanel's content. The XAML markup will resemble the following:

</StackPanel>

6. Add Text="Control 1" to the first <TextBlock> tag, Text="Control 2" to the second <TextBlock> tag, and Text="Control 3" to the third <TextBlock>tag so that the XAML markup resembles the following:

In this step, you added content to the C1Expander control. In the next step, you will run the project and observe the run-time features of the C1Expander control.