Mobile Zone is brought to you in partnership with:

A.k.a. LocalJoost (which sounds very much like localhost); Senior software architect/Developer C#, ASP.NET, Windows Phone 7 Developer MVP, XAML enthusiast, MVVMLight addict, Rogue R&D hacker, Gardener, Photograper, Amateur philosopher. Joost is a DZone MVB and is not an employee of DZone and has posted 61 posts at DZone. You can read more from them at their website. View Full User Profile

A Behavior to Animate Mirroring of GUI Elements on Windows Phone

08.29.2013
| 2234 views |
  • submit to reddit

imageIn this third and final installment of my scaling and opacity animation series I am going to show how easy it is to build more behaviors on top of the now existing framework I wrote about in my earlier post about extension methods for animating scales and opacity and the post after that, which showed a behavior to animate folding in and out a GUI element.

Building on top of the extension methods from the first post and the BaseScaleBehavior of the second post, I made a second behavior called MirrorBehavior. In Blend, its property panel looks like the identical twin of UnfoldBehavior, which is not a coincidence, as all of the properties are in its base class.

Its use case is very simple: suppose you have the completely hypothetical *cough* situation that you have created a game which the controls are on the bottom of the screen or near the side of the screen, very near the back, start and search buttons of the phone. In the heat of the game they regularly strike one of those buttons – end of game. It would be nice to be able to get the controls out of the way.  You can let people rotate the phone, but ‘’upside down” is not supported. So you have the choice of giving your users an option to either rotate or mirror the playing field. This is exactly what I ran into during the building of my last game – of which I am very happy to say that it has passed certification this morning and is now sitting hidden in the Store while its availability is being propagated to the various servers. I took the latter approach – mirroring - and this is what happening in this space invaders ‘game as well.

Like I said, this behavior has exactly the same properties as Unfoldbehavior. If “Activated” is true, the object to which the behavior is attached will be mirrored, if it's false it is displayed normally. The rest of the properties have the same meaning as in Unfoldbehavior, so see that article for more explanation. How this behavior’s effect worked out is displayed in this video.


MirrorBehavior in action

As you can see, you can also mirror horizontal and vertical at the same time, but that doesn’t make as much sense – the effect isn’t very pretty. The red background is to show the background is staying where it is – just the element (the image) to which the behavior is attached changes.

And like Unfoldbehavior, only the two abstract methods BuildTransform and BuildStoryBoard need to be filled in. Since all the heavy lifting is already done in the previous two posts, all that remains to be written is this code:

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using Wp7nl.Utilities;

namespace Wp7nl.Behaviors
{
  /// <summary>
  /// Behaviors that mirrors an object via using an animation
  /// </summary>
  public class MirrorBehavior : BaseScaleBehavior
  {
    protected override CompositeTransform BuildTransform()
    {
      return new CompositeTransform
      {
        ScaleX = (Direction == Direction.Horizontal || Direction == Direction.Both) && 
                  Activated ? -1 : 1,
        ScaleY = (Direction == Direction.Vertical || Direction == Direction.Both) && 
                  Activated ? -1 : 1
      };
    }

    protected override Storyboard BuildStoryBoard()
    {
      var storyboard = new Storyboard {FillBehavior = FillBehavior.HoldEnd};
      var transform = BuildTransform();
      var duration = new Duration(TimeSpan.FromMilliseconds(Duration));
      storyboard.AddScalingAnimation(
        AssociatedObject,
        AssociatedObject.GetScaleXProperty(), transform.ScaleX,
        AssociatedObject.GetScaleYProperty(), transform.ScaleY,
        duration);
      return storyboard;
    }
  }
}

BuildTransform is nearly the same, only Activated is not negated, and the values runs from -1 to 1 instead of 0 to 1. That’s the only trick involved – scaling to -1 ín XAML mirrors an object. Life can be so simple. BuildStoryBoard is even more the same as in UnfoldBehavior, only it now only animates the scale, and not the opacity.

That is all there is to it this time. Stay tuned for my game using this code -- and ore that I still have to blog about -- which is scheduled for release on Friday, August 23, at 8 p.m. (or 20:00) CET.

The demo solution, as always, can be found here.




Published at DZone with permission of Joost Van Schaik, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)