Silverlight | WPF | Microsoft.Net » 3D Flip

Silverlight 3 Flip TargetedTriggerAction

joel — Thu, 06 Aug 2009 22:36:41 +0000

Last week I created a Trigger Action which flipped a panel. It was intended to be invoked from clicking on the panel directly. Earlier today I was asked if you could invoke this trigger from multiple places. The answer is no, but it is very easily to rewrite this trigger to achieve this behavior. In this blog post I am going to create a TargetedTriggerAction which allows me to add the trigger to a button or multiple UIElement and “Target” a panel to be flipped. What is really cool about this approach is that each button can contain the logic used to flip the panel (Storyboard direction, duration, etc).

The following is the code I used to create my Flip TargetedTriggerAction.

using System.ComponentModel;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Media;
using System.Windows.Media.Animation;
 
namespace FlipTargetedTrigger
{
    public enum RotationDirection
    {
        LeftToRight,
        RightToLeft,
        TopToBottom,
        BottomToTop
    }
 
    public class Flip : TargetedTriggerAction
    {
        public static readonly DependencyProperty FrontElementNameProperty =
            DependencyProperty.Register("FrontElementName", typeof(string),
                                        typeof(Flip), new PropertyMetadata(null));
 
        [Category("Flip Properties")]
        public string FrontElementName
        {
            get
            {
                return (string)GetValue(FrontElementNameProperty);
            }
            set
            {
                SetValue(FrontElementNameProperty, value);
            }
        }
 
        public static readonly DependencyProperty BackElementNameProperty =
            DependencyProperty.Register("BackElementName", typeof(string),
                                        typeof(Flip), new PropertyMetadata(null));
 
        [Category("Flip Properties")]
        public string BackElementName
        {
            get
            {
                return (string)GetValue(BackElementNameProperty);
            }
            set
            {
                SetValue(BackElementNameProperty, value);
            }
        }
 
        public static readonly DependencyProperty DurationProperty =
            DependencyProperty.Register("Duration", typeof(Duration),
                                        typeof(Flip), new PropertyMetadata(null));
 
        [Category("Animation Properties")]
        public Duration Duration
        {
            get
            {
                return (Duration)GetValue(DurationProperty);
            }
            set
            {
                SetValue(DurationProperty, value);
            }
        }
 
        public static readonly DependencyProperty RotationProperty =
            DependencyProperty.Register("Rotation", typeof(RotationDirection),
                                        typeof(Flip), new PropertyMetadata(RotationDirection.LeftToRight));
 
        [Category("Animation Properties")]
        public RotationDirection Rotation
        {
            get
            {
                return (RotationDirection)GetValue(RotationProperty);
            }
            set
            {
                SetValue(RotationProperty, value);
            }
        }
 
        public static readonly DependencyProperty FrontStoryboardProperty =
            DependencyProperty.Register("FrontStoryboard", typeof(Storyboard), typeof(Flip), null);
 
        public Storyboard FrontStoryBoard
        {
            get
            {
                return (Storyboard)GetValue(FrontStoryboardProperty);
            }
        }
        public static readonly DependencyProperty BackStoryboardProperty =
            DependencyProperty.Register("BackStoryboard", typeof(Storyboard), typeof(Flip), null);
 
        public Storyboard BackStoryboard
        {
            get
            {
                return (Storyboard)GetValue(BackStoryboardProperty);
            }
        }
 
        private bool _forward = true;
 
        protected override void OnAttached()
        {
            base.OnAttached();
            FrameworkElement element = this.AssociatedObject as FrameworkElement;
            if (element != null) element.Loaded += TargetLoaded;
        }
 
        void TargetLoaded(object sender, RoutedEventArgs e)
        {
            PlaneProjection pp = Target.Projection as PlaneProjection;
            if (Target.Projection == null)
            {
                pp = new PlaneProjection { CenterOfRotationY = .51 };
 
                Target.RenderTransformOrigin = new Point(.5, .5);
                Target.Projection = pp;
            }
 
            Storyboard sbF = new Storyboard();
            Storyboard sbB = new Storyboard();
 
            UIElement f = null;
            UIElement b = null;
 
            f = Target.FindName(FrontElementName) as UIElement;
            if (f != null)
            {
                PlaneProjection ppFront = new PlaneProjection { CenterOfRotationY = .51 };
                f.Projection = ppFront;
                f.RenderTransformOrigin = new Point(.5, .5);
            }
            b = Target.FindName(BackElementName) as UIElement;
            if (b != null)
            {
                PlaneProjection ppBack = new PlaneProjection { CenterOfRotationY = .51, RotationY = 180.0 };
                b.Projection = ppBack;
                b.RenderTransformOrigin = new Point(.5, .5);
                b.Opacity = 0.0;
            }
 
 
            double to = 0.0;
            double from = 180.0;
            string property = "RotationY";
 
            switch (Rotation)
            {
                case RotationDirection.RightToLeft:
                    to = 180.0;
                    from = 0.0;
                    break;
                case RotationDirection.TopToBottom:
                    property = "RotationX";
                    break;
                case RotationDirection.BottomToTop:
                    to = 0.0;
                    from = 180.0;
                    property = "RotationX";
                    break;
            }
 
            sbF.Duration = Duration;
            sbB.Duration = Duration;
 
            sbF.Children.Add(CreateDoubleAnimation(pp, property, from, to, true));
            sbB.Children.Add(CreateDoubleAnimation(pp, property, to, from, true));
 
            sbF.Children.Add(CreateDoubleAnimation(f, "Opacity", 1.0, 0.0, false));
            sbB.Children.Add(CreateDoubleAnimation(f, "Opacity", 0.0, 1.0, false));
 
            sbF.Children.Add(CreateDoubleAnimation(b, "Opacity", 0.0, 1.0, false));
            sbB.Children.Add(CreateDoubleAnimation(b, "Opacity", 1.0, 0.0, false));
 
            SetValue(FrontStoryboardProperty, sbF);
            SetValue(BackStoryboardProperty, sbB);
 
 
        }
 
        protected override void Invoke(object parameter)
        {
            Storyboard sbF = GetValue(FrontStoryboardProperty) as Storyboard;
            Storyboard sbB = GetValue(BackStoryboardProperty) as Storyboard;
 
            if (_forward)
            {
                sbF.Begin();
                _forward = false;
            }
            else
            {
                sbB.Begin();
                _forward = true;
            }
        }
 
        private static DoubleAnimation CreateDoubleAnimation(DependencyObject element, string property, double from,
                                                             double to, bool addEasing)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.To = to;
            da.From = from;
            if (addEasing)
                da.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseOut, Power = 3 };
 
            Storyboard.SetTargetProperty(da, new PropertyPath(property));
            Storyboard.SetTarget(da, element);
            return da;
        }
    }
}

For the most part the code is very simmiler to the other trigger. When you inherate from TargetTriggerAction you gain access to a new property called “Target” this will contain a reference to the UIELement I plan on flipping. Instead of adding my PlainProjection to the AssociatedObject I instead add it to the target. I made a few other changes like storing my Storyboards as dependency properties which allow me to reuse the same animiation each time I lick the button. These DependencyProperites get stored in the AssociatedObject and not the Target. This allows each item being clicked to have a unique animation. Below is how I implement the TargetTriggerAction.

Code: FlipTargetedTrigger.zip

Silverlight 3 Flip TriggerAction

joel — Thu, 30 Jul 2009 18:26:23 +0000

In this blog post I am going to create a TriggerAction which makes it incredibly simple to take two UIElements and compose them into a panel which can be flipped. I have demonstrated the technique many times, but here it is all packaged up in a nice reusable class.

The following is the code I used to create by Flip TriggerAction.

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Interactivity;
using System.ComponentModel;
 
namespace FlipTriggerAction
{
    public enum RotationDirection
    {
        LeftToRight,
        RightToLeft,
        TopToBottom,
        BottomToTop
    }
 
    public class Flip : TriggerAction
    {
        public static readonly DependencyProperty FrontElementNameProperty =
            DependencyProperty.Register("FrontElementName", typeof(string),
                                        typeof(Flip), new PropertyMetadata(null));
 
        [Category("Flip Properties")]
        public string FrontElementName { get; set; }
 
        public static readonly DependencyProperty BackElementNameProperty =
            DependencyProperty.Register("BackElementName", typeof(string),
                                        typeof(Flip), new PropertyMetadata(null));
 
        [Category("Flip Properties")]
        public string BackElementName { get; set; }
 
        public static readonly DependencyProperty DurationProperty =
            DependencyProperty.Register("Duration", typeof(Duration),
                                        typeof(Flip), new PropertyMetadata(null));
 
        [Category("Animation Properties")]
        public Duration Duration { get; set; }
 
        public static readonly DependencyProperty RotationProperty =
            DependencyProperty.Register("Rotation", typeof(RotationDirection),
                                        typeof(Flip), new PropertyMetadata(RotationDirection.LeftToRight));
 
        [Category("Animation Properties")]
        public RotationDirection Rotation { get; set; }
 
        private readonly Storyboard _sbF = new Storyboard();
        private readonly Storyboard _sbB = new Storyboard();
        private bool _forward = true;
 
        protected override void Invoke(object parameter)
        {
            if (AssociatedObject.Projection == null)
            {
                FrameworkElement parent = AssociatedObject as FrameworkElement;
                UIElement f = null;
                UIElement b = null;
 
                if (parent != null)
                {
                    f = parent.FindName(FrontElementName) as UIElement;
                    if (f != null)
                    {
                        PlaneProjection ppFront = new PlaneProjection { CenterOfRotationY = .51 };
                        f.Projection = ppFront;
                        f.RenderTransformOrigin = new Point(.5, .5);
                    }
                    b = parent.FindName(BackElementName) as UIElement;
                    if (b != null)
                    {
                        PlaneProjection ppBack = new PlaneProjection { CenterOfRotationY = .51, RotationY = 180.0 };
                        b.Projection = ppBack;
                        b.RenderTransformOrigin = new Point(.5, .5);
                        b.Opacity = 0.0;
                    }
                }
 
                PlaneProjection pp = new PlaneProjection { CenterOfRotationY = .51 };
 
                AssociatedObject.RenderTransformOrigin = new Point(.5, .5);
                AssociatedObject.Projection = pp;
 
                double to = 180.0;
                double from = 0.0;
                string property = "RotationY";
 
                switch (Rotation)
                {
                    case RotationDirection.RightToLeft:
                        to = 0.0;
                        from = 180.0;
                        break;
                    case RotationDirection.TopToBottom:
                        property = "RotationX";
                        break;
                    case RotationDirection.BottomToTop:
                        to = 0.0;
                        from = 180.0;
                        property = "RotationX";
                        break;
                }
 
                _sbF.Duration = Duration;
                _sbB.Duration = Duration;
 
                _sbF.Children.Add(CreateDoubleAnimation(pp, property, from, to, true));
                _sbB.Children.Add(CreateDoubleAnimation(pp, property, to, from, true));
 
                _sbF.Children.Add(CreateDoubleAnimation(f, "Opacity", 1.0, 0.0, false));
                _sbB.Children.Add(CreateDoubleAnimation(f, "Opacity", 0.0, 1.0, false));
 
                _sbF.Children.Add(CreateDoubleAnimation(b, "Opacity", 0.0, 1.0, false));
                _sbB.Children.Add(CreateDoubleAnimation(b, "Opacity", 1.0, 0.0, false));
            }
            if (_forward)
            {
                _sbF.Begin();
                _forward = false;
            }
            else
            {
                _sbB.Begin();
                _forward = true;
            }
        }
 
        private static DoubleAnimation CreateDoubleAnimation(DependencyObject element, string property, double from,
                                                             double to, bool addEasing)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.To = to;
            da.From = from;
            if (addEasing)
                da.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseOut, Power = 3 };
 
 
            Storyboard.SetTargetProperty(da, new PropertyPath(property));
            Storyboard.SetTarget(da, element);
            return da;
        }
    }
}

Once you have the class constructed you can add the trigger to your UIElement in Blend. Clicking on the trigger in the Object & Timeline tab will allow you to configure each of the the properties you have defined in your class.

Code: FlipTriggerAction.zip

Silverlight Flipping Tiles Animation

joel — Fri, 16 May 2008 06:36:30 +0000

Back a few weeks ago I posted an example of how to create a 3D flip animation similar to the effect seen on an iPhone. Today I will build upon that procedural animation and simulate the flipping tile affect seen in the iTunes album art screen saver, available on a Mac.

In my example I have a total of 16 random tiles displayed from a collection of 42 different images. Any image not currently displayed is available to be randomly selected to replace an existing tile. Here is how I achieve the effect.

The project is comprised of a “Tile” UserControl , a class called “Media” and two generic lists (one to store references to the 16 tiles and one to store all 42 URI to the images). The first step is to fill my page.xaml grid with 16 tiles. Here is a snip of the code used to fill the grid.

private void BuildCollection()
{
    int row = -1;
    int col = 0;
    for (int i = 0; i < 42; i++)
    {
        Uri imageUri = new Uri(string.Format("Images/{0}.png", 
		(i+1).ToString()), UriKind.Relative);
        if (i <= 16)
        {
            Tile tile = new Tile();
            Media media =  new Media(imageUri, true);
            tile.Media = media;
 
            if (col % 4 == 0)
            {
                row++;
                col = 0;
            }
            tile.SetValue(Grid.ColumnProperty, col.ToString());
            tile.SetValue(Grid.RowProperty, row.ToString());
            this.LayoutRoot.Children.Add(tile);
 
            col++;
            _tiles.Add(tile);
            _images.Add(media);
 
        }
        else
            _images.Add(new Media(imageUri, false));
    }
}

For those of you just getting familiar with the “Grid” control you might not be aware that it supports implicitly specifying columns and rows. In this example I leverage this to ensure my tiles form a nice 4×4 grid.

As you can see from the code, I have chosen to store only the URI to the image and not store the image itself. I had some difficulty storing a “BitmapImage” object in my collection and retrieving it consistently when I was ready to flip a tile. The URI seems less efficient, was reliable.

Now that I have built up my grid and two collections, I can use a DispacherTimer to randomly select a tile and randomly select an image to be used as the backside of the flip. He is how that code looks.

void _timer_Tick(object sender, EventArgs e)
{
    System.Random RandNum = new System.Random();
    int randomTile = RandNum.Next(16);
 
    bool match = false;
    while(!match)
    {
        int randomImage = RandNum.Next(42);
        if(!_images[randomImage].Displayed)
        {
            _images[randomImage].Displayed = true;
            _tiles[randomTile].Media.Displayed = false;
            _tiles[randomTile].Flip(_images[randomImage]);
            match=true;
            break;
        }
    }
}

As you can see I am using a boolean property in the “Media” object to determine if an image is already displayed. The second level of randomization is there to help ensures that I am giving each image equal chance of getting displayed.

If one were to examine the “Tile” UserControl, it looks almost exactly like the code I created for the 3D flip animation example. In this situation instead of firing the flip based on a button click, I use the followings public method called from my main page.xaml DispatcherTimer tick.

public void Flip(Media media)
{
    this.Media = media;
 
    if (_Front)
    {
        this.ImageBack.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = false;
        _sb.Begin();
        _Front = false;
    }
    else
    {
        this.ImageFront.Source = new BitmapImage(_Media.ImageUri);
        _sb.Pause();
        _sb.AutoReverse = true;
        _sb.Seek(_tsLastFrame);
        _sb.Resume();
 
        _Front = true;
    }
}

Code: LeopardSreenSaver.zip

Silverlight 3D flip animation

joel — Fri, 25 Apr 2008 07:20:16 +0000

Up until now I have not had an opportunity to create any Silverlight procedural animations that were more complicated then positioning an object with some simple easing. I thought it would be fun to attempt to duplicate one of the transitions used on the iPhone. While making a phone call, if you choose to display the keypad there is a cool 3D flip that occurs. Here is a quick video of the transition. [[VIDEO]] In hopes not to reinvent the wheel, I embarked on an endless search of the Internet for anything resembling a flip. After some quality time on Google, I stumbled upon a great Flash site called reflektions by Paul Ortchanian. This site has a ton of Flash examples that highlight 2D and 3D effects done in flash. Those of us new to interactive development can learn a ton from the techniques Flash and Flex developers have used for years. To get started I created a simple page that contained two Grid controls, one for the front of the flip and one for the back. Both were placed inside of a single canvas named “screens”.

The guts of this effect has been encapsulated in a method called “AnimateFlip”. The result of this method is a DobuleAnimation with approximately 48 descreate keys frames.

private TimeSpan AnimateFlip(Storyboard sb, ScaleTransform scale, 
out TimeSpan tsLastFrame)
{
    double speed = 4;
    double flipRotation = 0;
    double flipped = 2;
    tsLastFrame = new TimeSpan();
    TimeSpan tsSideFlipped = new TimeSpan();
 
    int frames = 1;
    DoubleAnimationUsingKeyFrames daX = 
	new DoubleAnimationUsingKeyFrames();
    tsLastFrame = new TimeSpan();
    while (flipRotation != flipped * 180)
    {
        flipRotation += speed;
        double flipRadian = flipRotation * (Math.PI / 180);
        double size = Math.Cos(flipRadian);
        double scalar = (1 / (1 / size));
 
        DiscreteDoubleKeyFrame ddkfX = new DiscreteDoubleKeyFrame();
        ddkfX.Value = (size * scalar) ;
 
        tsLastFrame = TimeSpan.FromMilliseconds(frames * 7);
 
        //the first time we flip to negative capture the 
	//tsLastFrame so we know when we will need to
        //visualize the flip side
        flipped = (size < 0) ? +1 : +0;
        if (flipped == 1 && tsSideFlipped.Ticks == 0)
        {
            tsSideFlipped = tsLastFrame;
        }
 
        ddkfX.KeyTime = KeyTime.FromTimeSpan(tsLastFrame);
 
        //add the DiscreteDoubleKeyFrame to the 
	//DoubleAnimationUsingKeyFrames
        daX.KeyFrames.Add(ddkfX);
 
        flipRotation %= 360;
        frames++;
    }
 
    Storyboard.SetTarget(daX, scale);
    Storyboard.SetTargetProperty(daX, "ScaleX");
    sb.Children.Add(daX);
 
    VisualizeSide(sb, tsSideFlipped, 0, TimeSpan.FromMilliseconds
		((tsSideFlipped.Milliseconds + 100)), 
		back.Opacity, this.back);
    VisualizeSide(sb, TimeSpan.FromMilliseconds((
		tsSideFlipped.Milliseconds - 100)), front.Opacity, 
		tsSideFlipped, 0, this.front);
    back.Opacity = 0;
    return tsLastFrame;
}

At the very bottom of the above method their is two calls to “VisualizeSide”. This method is responsible for visualizing the second side when the screen has rotated 180 degrees (Flipped).

My animation is by no means exact, but a pretty good first attempt. If you watch the video very slowly you might notice that on the iPhones rotation it looks like it rotates in perspective. I would love to add this, but am at a lost

Code: ScreenFlip.zip