3D Capabilities in Silverlight 3
page 3 of 5
by Sergey Zwezdin
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 34434/ 76

An Animation

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


View Entire Article

User Comments

Title: Silverlight 3D   
Name: I. Ivanov
Date: 2010-07-21 8:15:25 PM
Comment:
Hello. You can try our new Silverlight component for 3D visualization. We support many features common to the modern 3D engines and the rendering is fast. You can load your 3DS files with a single step. If you are interested go to http://postvision.net/SilverMotion/Demos.aspx to see some demos ;)
Title: Software Engineer   
Name: Sai
Date: 2009-12-20 11:41:53 PM
Comment:
It really helped me a lot, Thanks for your effort.
Title: Iulian   
Name: Iulian
Date: 2009-10-21 2:33:26 PM
Comment:
Very good tutorial. Anyway I have a question. How can I combine the next scenarious: When the button is clicked then the grid will zoom in 10% and after is RotationY=180 after the rotation is complet the zoom is coming back from 90% to 100%. Do you have an example for this? Thank you
Title: Jeroen   
Name: Jeroen
Date: 2009-07-14 8:57:51 AM
Comment:
Thanks, was looking for this as a beginning in Silverlight since I found out that 3D Direct X programming (or even XNA) will consume to much time and will not produce a product which makes me happy since

I hope in the next Silverlight they also allow 3DMax/DirectX x objects and animation to it. That would make it very interesting for small game dev. For example a web remake of Doom.

Thanks for the article. It is good, solid an easy to read.
Title: Idea   
Name: Daniel
Date: 2009-07-13 4:31:24 AM
Comment:
Quick way to show 3d features in silverlight3. Quick, helpful and easy :)
nice!
Title: Good work!   
Name: Manish Kumar
Date: 2009-07-03 1:47:20 AM
Comment:
Great article and useful for me
Title: Nice work   
Name: Mohammad Reza Pazooki
Date: 2009-06-30 10:59:42 PM
Comment:
I think we will see a great enhancement in web graphic.

good job Sergey Zwezdin






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-07-17 10:46:22 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search