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:
1. Place your cursor
between the <my:C1Reflector> and
</my:C1Reflector> tags and press ENTER.
2. Add the following
<my:C1Reflector.ContentProjection> markup between the
<my:C1Reflector> and </my:C1Reflector>
tags to customize the reflection displayed in the C1Reflector control so
your markup will appear similar to the following:
<my:C1Reflector>
<my:C1Reflector.ContentProjection>
<PlaneProjection GlobalOffsetX="20" GlobalOffsetY="20" GlobalOffsetZ="1"/>
</my:C1Reflector.ContentProjection>
</my:C1Reflector>
3. Add the
<StackPanel></StackPanel> tags between
the <my:C1Reflector> and </my:C1Reflector>
tags to add a StackPanel within the C1Reflector control. Your
markup will appear similar to the following:
<my:C1Reflector>
<my:C1Reflector.ContentProjection>
<PlaneProjection GlobalOffsetX="20" GlobalOffsetY="20" GlobalOffsetZ="1"/>
</my:C1Reflector.ContentProjection>
<StackPanel></StackPanel>
</my:C1Reflector>
4. Add the <Slider Width="400"/> tag between the <StackPanel></StackPanel> tags to create a standard Slider control. Your markup will appear similar to the following:
<my:C1Reflector>
<my:C1Reflector.ContentProjection>
<PlaneProjection GlobalOffsetX="20" GlobalOffsetY="20" GlobalOffsetZ="1"/>
</my:C1Reflector.ContentProjection>
<StackPanel>
<Slider Width="400"/>
</StackPanel>
</my:C1Reflector>
Since the Slider control is interactive, it will allow you to see the C1Reflector control's auto-update feature.
5. Add the <TextBlock Text="The reflection will change when the slider moves."></TextBlock> tag below the <Slider Width="400"/> tag to add a standard TextBlock control. Your markup will appear similar to the following:
<my:C1Reflector>
<my:C1Reflector.ContentProjection>
<PlaneProjection GlobalOffsetX="20" GlobalOffsetY="20" GlobalOffsetZ="1"/>
</my:C1Reflector.ContentProjection>
<StackPanel>
<Slider Width="400"/>
<TextBlock FontSize="18" Text="The reflection will change when the slider moves."></TextBlock>
</StackPanel>
</my:C1Reflector>
You have successfully added custom content to the C1Reflector control and set properties that altered the appearance of the C1Reflector control and its contents.