Step 2 of 4: Adding Content to the C1Reflector Control

In this section of the quick start tutorial, you will add two controls to the C1Reflector control; however, the Content property can only accept one control at a time. You can circumvent this issue by adding a panel-based control as the C1Reflector control's content and adding then stacking multiple controls in the panel. The C1Reflector control will create a reflection for all controls added to a panel.

Complete the following steps:

Place your cursor between the <c1ext:C1Reflector> and </c1ext:C1Reflector> tags and press ENTER.
Navigate to the Toolbox and double-click the StackPanel icon to add the panel to MainPage.xaml.
Place your cursor between the <StackPanel> and </StackPanel> tags and press ENTER.
Navigate to the Toolbox and double-click the C1DateTimePicker icon to add the C1DateTimePicker control to the StackPanel control. Since the C1DateTimePicker control is interactive, it will allow you to see the C1Reflector control's auto-update feature.
Add Width="190" to the </c1datetime:C1DateTimePicker> tag to set the width of the control.
Place your cursor after the </c1datetime:C1DateTimePicker> tag and press ENTER.
Navigate to the Toolbox and double-click the TextBox icon to add a TextBox control beneath the C1DateTimePicker control.
Add Text="Change the date/time and watch the reflection change" to the <TextBox> tag to add text to the control
Add FontSize=18 to the <TextBox> tag to change the size of the font.

You have successfully added custom content to the C1Reflector control. In the next step, you will utilize Blend to modify the appearance of the C1Reflector control.