Let's make use of PlaneProjection to program other 3D effects : carousels in this post.

First a simple one, to show how easy it is : just a few lines of code !

The images are not included in the xap file as internal ressources, they are loaded from the web server at run time (to do so, the images must be copied in the ClientBin folder, the one that contains the xap file to be published).

We define a playing ground for the carousel :
 <Grid x:Name="ground" Width="400"  />

The code is self-explanatory (just a bit of very basic geometry to put each image at different angle) :
 string[] arImageNames = { "Amsterdam", "London", "Moskow", "Paris", "Pisa", "Roma",
                           "TajMahal", "Venice" };
 Image[] arImages;
 public MainPage()
 {
  InitializeComponent();
  InitializeCarrousel();
 }
 private void InitializeCarrousel()
 { 
  Storyboard stb = new Storyboard();
  int N = arImageNames.Length;       // number of images
  arImages = new Image[N];
  // for each image
  for (int i = 0; i < N; i++)
  {
   // load image first from the server
   arImages[i] = new Image();
   arImages[i].Width = 150; arImages[i].Height = 150;
   arImages[i].Source = new BitmapImage(new Uri(arImageNames[i] + ".jpg", UriKind.Relative));
   // prepare an image for the carousel
   Image img = new Image();
   img.Width = img.Height = 150;
   img.Source = arImages[i].Source;
   img.Stretch = Stretch.Fill;
   // prepare rotation around the Y-axis
   PlaneProjection pp = new PlaneProjection();
   pp.CenterOfRotationZ = -250;  // center behind the screen
   img.Projection = pp;
   // prepare the animation
   DoubleAnimation da = new DoubleAnimation();
   da.From = i * 360 / N;     // each image at different angle
   da.By=360; da.Duration = TimeSpan.FromSeconds(10);
   da.RepeatBehavior = RepeatBehavior.Forever;
   Storyboard.SetTarget(da, pp);
   Storyboard.SetTargetProperty(da, new PropertyPath("RotationY"));
   stb.Children.Add(da);
   
   // add image to the carousel
   ground.Children.Add(img);
  }
  this.Resources.Add("stb", stb);
  stb.Begin();
 }

Let's now create a more sophisticated carousel :

We replaced each image with a stack panel made of :
- a semi-transparent black rectangle,
- an image,
- another semi-transparent black rectangle.

A bit more geometry to compute the width of each semi-transparent rectangle.

To change speed, we handle the MouseMove event in a colored rectangle and change the Duration property of each animation (as many as images to be displayed). To change rotation, we need to stop the animation and restart it.

To end the day, another carousel :

Each city is displayed as a TextBlock inside a border. For each such border, we add 6 containers (again borders). Doing so, the figure looks more as a circle. The trick is to compute the height of each elementary border : we fixed the

height of each display panel, we know how many cities we have. And we know from basic geometry that a circonference is 2*PI*radius...

Let's make use of PlaneProjection to program 3D effects : flipping effects in this post (more effects to come in next posts).

As usual, let's start with the easiest one. Please, note that all images have a red circle in the upper-left corner : whenever displaying an image and playing with rotations, it's important to be sure the image is correctly displayed and not the inverted one (the "back side" or mirrored image if you prefer) and it's so easy to be confused without a mark.

The images are not included in the xap file as internal ressources, they are loaded from the web server at run time. To do so, the images must be copied in the ClientBin folder (the one that contains the xap file to be published). To load these images at run-time (here at start-up time) :
 string[] arImageNames={"Amsterdam", "London", "Moskow", "Paris", "Roma" };
 Image[] arImages;
 .....
 public MainPage()
 {
  InitializeComponent();
  arImages = new Image[arImageNames.Length];
  for (int i=0; i<arImageNames.Length; i++)
  {
   arImages[i] = new Image();
   arImages[i].Source = new BitmapImage(new Uri(arImageNames[i]+".jpg", UriKind.Relative));
  }
  .....
 }
The image is declared in xaml as follows (with an initial -90° rotation along the Y-axis to render it initially invisible) :
 <Image x:Name="img" Width="150" Height="150" Stretch="Fill" ..... >
  <Image.Projection>
   <PlaneProjection x:Name="pp" RotationY="-90" />
  </Image.Projection>
 </Image>

We animate the plane projection from -90° to 90° (we will change image at the end of each elementary animation) :
 <Grid.Resources>
  <Storyboard x:Name="stb"  Completed="stb_Completed" >
   <DoubleAnimation x:Name="da" Storyboard.TargetName="pp" Storyboard.TargetProperty="RotationY" Duration="0:0:4" From="-90" To="90"  />
  </Storyboard>
 </Grid.Resources>

The DoubleAnimation line could be written, without giving a name (here pp) to the PlaneProjection :
 <DoubleAnimation x:Name="da" Storyboard.TargetName="img" Storyboard.TargetProperty="(Image.Projection).RotationY" Duration="0:0:4" From="-90" To="90" />

In the function that handles the Completed event (N being the index of the image being displayed) :
 private void stb_Completed(object sender, EventArgs e)
 {
  N = ++N % arImageNames.Length;
  img.Source = arImages[N].Source;
  stb.Begin();
 }
Really, nothing complicated !

And now another way to flip pages :

We use three panels and each panel is made of two images :
- a small image of the spirals (just half of it), inserted as a ressource,
- the displayed image (not always the same, for instance Amsterdam.jpg or the first or the last image), these images being kept on the web server (in the same folder as the xap file).

These three panels (all with CenterOfRotationX equal to 0) are :
- one panel for the left side : fixed, with RotationY of 180° (so, we can see a full spiral from two half-sized images) and image initially invisible,
- one panel for the right side : fixed, with RotationY of 0° and an image (title image) initially present,
- a moving panel, initially invisible (it will become visible when the users clicks the Next or Previous link button).

When the user clicks Next or Previous and the action is valid (they are more images to be displayed), we :
- prepare the moving panel (copy of an image and preparation of the storyboard),
- prepare the left panel (if click on Previous) or the right panel (if click on Next) with a copy of an image that will become more and more visible,
- make the moving panel visible and start the animation.

Whenever we flip page from left-to-right or right-to-left, the animation is performed in two steps : - for a right-to-left-flip (Next action), a first animation from 0° to 85° (we then change image in the moving panel) and then a second animation from 85° to 180° (the moving panel becomes then invisible),
- for a left-to-right flip (Previous action), a first animation from 180° to 85° (with then a change of image in the moving panel) and then a second animation from 85° to 0° (the moving panel becomes then invisible).

More details in the source code file available.
 

Flipping is not restricted to images. We can flip between data forms :

This animation is similar (even easier) to the previous one : we have again three panels. We just added :
- RotationX="-340" and RotationY="-40" to the PlaneProjection of the back panel
- RotationX="-20" and RotationY="-40" to the PlaneProjection of the front panel.

Since we accept to see the back side of data forms during animations, the animations can be performed in only one step (a RotationX from -20° to -340° for Next and -340° to -20° for Previous).

See soon for other effects.

Silverlight 3 Tools may now be installed with non English versions of Visual Studio and Visual Web Developer Express. Available languages are : French, German, Italian, Japanese, Korean, Spanish and Chinese' (both simplified and traditional).

Download these tools here

Those using non-ENU versions of development tools can now enjoy Silverlight 3 development.