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