Step 3 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 area and then run the project to observe the run-time features of the application you created in this quick start.

Complete the following steps:

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

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

XAML	Copy Code
<c1:C1Expander Height="200" Width="250" Background="Aqua" Header="Expander Quick Start" ExpandDirection="Up"> <StackPanel></StackPanel> </c1:C1Expander>

You are adding a StackPanel control to the C1Expander control's content area because you'll be adding more than one control to the content area 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.

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:
```
<StackPanel HorizontalAlignment="Center">
```
Place your cursor between the <StackPanel> and</StackPanel> tags and press ENTER.

Navigate to the Tools panel 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:

XAML	Copy Code
<StackPanel HorizontalAlignment="Center" > <TextBlock></TextBlock> <TextBlock></TextBlock> <TextBlock></TextBlock> </StackPanel>

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:

XAML	Copy Code
<TextBlock Text="Control 1"></TextBlock> <TextBlock Text="Control 2"></TextBlock> <TextBlock Text="Control 3"></TextBlock>

From the Debug menu, select Start Debugging to view how your application will appear at run time. Observe that the expander content isn't visible.
Click the C1Expander control's header to expand the content. Observe that the three TextBox controls that you added to the content area appear.

Congratulations! You have successfully completed the Expander for Silverlight quick start. In this quick start, you've created and customized an Expander for Silverlight application, added content to the control content area, and observed several of the control's run-time features.