Adding Multiple Controls to the Content Panel

You cannot set the Content property to more than one control at a time. However, you can circumvent this issue by adding a panel-based control that can accept more than one control, such as a StackPanel control, to the content panel of the C1Expander control. When you add multiple controls to the panel-based control, each one will appear within the C1Expander control's content panel.

At Design Time

To add multiple controls to the content panel, complete the following steps:

1.   In the Design pane, click the C1Expander control once to select it.

2.   In the Toolbox, double-click the StackPanel icon to add a StackPanel control the content panel of the C1Expander control.

3.   In the Source pane, click within the <StackPanel> tag to bring focus to the StackPanel control.

4.   In the Toolbox, double-click the TextBlock icon to add a TextBlock control to the StackPanel. Repeat this step twice to add two more TextBlock controls to the StackPanel.

5.   Click within the first <TextBlock> tag to reveal its properties in the Properties window and then set its Text property to "1st TextBlock.

6.   Click within the second <TextBlock> tag to reveal its properties in the Properties window and then set its Text property to "2nd TextBlock". 

7.   Click within the third <TextBlock> tag to reveal its properties in the Properties window and then set its Text property to "3rd TextBlock".

8.   Expand the C1Expander control and observe that each of the three TextBlock controls appear in the content panel.

In XAML

To add multiple controls to the content panel, complete these steps:

1.   Place the following XAML markup between the <c1ext:C1Expander> and </c1ext:C1Expander> tags:

            <c1ext:C1Expander.Content>

                <StackPanel>

                    <TextBlock Text="1st TextBlock"/>

                    <TextBlock Text="2nd TextBlock"/>

                    <TextBlock Text="3rd TextBlock"/>

                </StackPanel>

            </c1ext:C1Expander.Content>

2.   Run the program.

3.   Expand the C1Expander control and observe that each of the three TextBlock controls appear in the content panel.

In Code

To add multiple controls to the content panel, complete these steps:

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

•      Visual Basic

'Create a stack panel and add it to C1Expander 

Dim StackPanel1 As New StackPanel() 

C1Expander1.Content = (StackPanel1) 

'Create three TextBlock control and set their Text properties 

Dim TextBlock1 As New TextBlock() 

Dim TextBlock2 As New TextBlock() 

Dim TextBlock3 As New TextBlock() 

TextBlock1.Text = "1st TextBlock" 

TextBlock2.Text = "2nd TextBlock" 

TextBlock3.Text = "3rd TextBlock" 

'Add TextBlock controls to StackPanel 

StackPanel1.Children.Add(TextBlock1) 

StackPanel1.Children.Add(TextBlock2) 

StackPanel1.Children.Add(TextBlock3) 

•      C#

//Create a stack panel and add it to C1Expander

StackPanel StackPanel1 = new StackPanel();

c1Expander1.Content = (StackPanel1);

//Create three TextBlock control and set their Text properties

TextBlock TextBlock1 = new TextBlock();

TextBlock TextBlock2 = new TextBlock();

TextBlock TextBlock3 = new TextBlock();

TextBlock1.Text = "1st TextBlock";

TextBlock2.Text = "2nd TextBlock";

TextBlock3.Text = "3rd TextBlock";

//Add TextBlock controls to StackPanel

StackPanel1.Children.Add(TextBlock1);

StackPanel1.Children.Add(TextBlock2);

StackPanel1.Children.Add(TextBlock3);

2.   Run the program.

3.   Expand the C1Expander control and observe that each of the three TextBlock controls appear in the content panel.

 This Topic Illustrates the Following:

When the C1Expander control is expanded, three TextBlock controls will appear in the content panel as follows: