As all properties of PlaneProjection object are DependencyProperty, it is possible to use them for the creation of animation. It is possible to animate any properties of this object (rotation, the object centre, and positioning).

Let us consider a small example. In this application there is a panel with controls and animation, which is located in resources.

Listing 3 - An animation of 3D-projection for StackPanel control

<Grid.Resources>
  <Storyboard x:Name="Rotation">
    <DoubleAnimation 
           Storyboard.TargetName="Projection" 
           Storyboard.TargetProperty="RotationX"
           From="0"
           To="360"
           RepeatBehavior="Forever"
           AutoReverse="True"
           Duration="0:00:02.5"/>
  </Storyboard>
</Grid.Resources>
 
<StackPanel Margin="15">
  <StackPanel.Projection>
    <PlaneProjection x:Name="Projection" RotationY="-50"/>
  </StackPanel.Projection>
  
  <TextBlock Text="First name:"/>
  <TextBox />
 
  <TextBlock Text="Last name:"/>
  <TextBox />
 
  <TextBlock Text="E-mail:"/>
  <TextBox />
 
  <Button Content="Click!" Click="Button_Click"/>
</StackPanel>

Besides, it is necessary to define the moment of the beginning of this animation. In this case, animation will begin when the button is pressed.

Listing 4 - Beginning of animation moment

private void Button_Click(object sender, RoutedEventArgs e)
{
  Rotation.Begin();
}

In an example, animation on an axis X on 360 degrees is set. After the start of this animation, it will repeat infinitely because RepeatBehavior property is declared. Also the rotation will work in both ways because AutoReverse property is declared.

Figure 3: Sample application

Similarly, it is possible to define animations for other properties of PlaneProjection object.

Examples of construction of the user interfaces

Now, when ways of creation of 3D projections in Silverlight have been considered, we will consider examples of construction of the user interfaces with use of the given possibilities.

One of interesting examples for the user applications is collapsing of inactive panels. For example, in the application there can be some textboxes. One textbox is filled necessarily, and others - not necessarily. In this case, it is possible to make two panels which settle down one over another. On the panel which is above, it is possible to place fields which are required for filling. On this panel it is possible to place the button for opening of the second panel. On another panel it is possible to place fields unessential for filling. By pressing the button rotation of the main panel on axis Y, it will be made so that it has decreased in size. Besides, the transparency of this panel will decrease to value 0.3. Thus, we will receive the following code for definition of two panels.

Listing 5 - Defining of two panels

<StackPanel Margin="80,15,35,15">
      <!-- Additional panel -->
</StackPanel>
 
<StackPanel Margin="15" Name="Panel1" Background="White">
  <StackPanel.Projection>
    <PlaneProjection x:Name="Projection"/>
  </StackPanel.Projection>
 
      <!-- Main panel -->
</StackPanel>

We will receive a code which contains animations for the main panel.

Listing 6 - Storyboard for main panel a showing and a hiding

<Storyboard x:Name="HidePanelAnimation">
  <DoubleAnimation 
         Storyboard.TargetName="Projection" 
         Storyboard.TargetProperty="RotationY"
         To="-80"
         Duration="0:00:00.3"/>
  <DoubleAnimation 
         Storyboard.TargetName="Panel1" 
         Storyboard.TargetProperty="Opacity"
         To="0.3"
         Duration="0:00:00.3"/>
</Storyboard>
<Storyboard x:Name="ShowPanelAnimation">
  <DoubleAnimation 
         Storyboard.TargetName="Projection" 
         Storyboard.TargetProperty="RotationY"
         To="0"
         Duration="0:00:00.3"/>
  <DoubleAnimation 
         Storyboard.TargetName="Panel1" 
         Storyboard.TargetProperty="Opacity"
         To="1"
         Duration="0:00:00.3"/>
</Storyboard>

Starting this or that animation, it is possible to hide or show the main panel. In this case the application will look as follows.

Figure 4: Sample application - storyboard of hiding of main panel

An application in which there is a panel with two parties (the main and the back) can be another example. On the main panel settle down fields which are required for filling. On the back there are other fields. By pressing the button the form is rotated by 180 degrees and the back is displayed.

Figure 5: Model of animation

To implement similar behavior, we will create a main Grid object in which we will place two additional Grid objects. Each such additional Grid object will contain one of the parties for display. Thus, the panel, which settles down on the back, is necessary to rotate 180 degrees. It is necessary that at a turn of the main panel 180 degrees, the underside was displayed without distortions. The additional panel (which is displayed on a back) is, by default, displayed by the transparent.

Listing 7 - Control with back panel

<Grid>
  <Grid.Projection>
    <PlaneProjection x:Name="Projection"/>
  </Grid.Projection>
 
 
  <Grid Name="MainPanel" Background="Silver">
    <Grid.Projection>
      <PlaneProjection RotationY="0"/>
    </Grid.Projection>
    <StackPanel Margin="15">
      <!-- ... -->
    </StackPanel>
  </Grid>
 
  <Grid Name="BackPanel" Opacity="0" Background="LightBlue">
    <Grid.Projection>
      <PlaneProjection RotationY="180"/>
    </Grid.Projection>
    <StackPanel Margin="15">
      <!-- ... -->
    </StackPanel>
  </Grid>
</Grid>

After that it is necessary to implement animation which will rotate the panel on axis Y. For this purpose it is necessary to create the objects implementing animation. Besides, at the display of the back panel it is necessary to set a value of a transparency equal to 100%. For these purposes it is possible to use DoubleAnimationUsingKeyFrames object. Thus, we will give the following definitions of animation.

Listing 8 - Animations for panels

<Storyboard x:Name="ShowBackPanel">
  <DoubleAnimation Storyboard.TargetName="Projection" 
           Storyboard.TargetProperty="RotationY"
           To="180"
           Duration="0:00:00.4"/>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackPanel"
      Storyboard.TargetProperty="Opacity">
    <DiscreteDoubleKeyFrame KeyTime="0:00:00.2" Value="1"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ShowMainPanel">
  <DoubleAnimation 
           Storyboard.TargetName="Projection" 
           Storyboard.TargetProperty="RotationY"
           To="0"
           Duration="0:00:00.4"/>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackPanel"
       Storyboard.TargetProperty="Opacity">
    <DiscreteDoubleKeyFrame KeyTime="0:00:00.2" Value="0"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Now it is necessary to press this button to start these animations.

Listing 9 - Begins of animations

private void MainPanelButton_Click(object sender, RoutedEventArgs e)
{
      ShowMainPanel.Begin();
}
 
private void BackPanelButton_Click(object sender, RoutedEventArgs e)
{
      ShowBackPanel.Begin();
}

After these operations the application looks as follows.

Figure 6