[Windows Phone] Populating content smoothly

We, users of the Windows Phone OS, love its fluidity and how content is populated smoothly throughout the OS (take for example how album thumbnails are loaded in the Pictures Hub).

As developers, we don’t have any built-in mechanism to populate content this way, but we can fix that by using transitions, storyboards and behaviors. For this post, we will create two classes: OpacityTransition and OnLoadedOpacityBehavior.

First of all, we will need a custom implementation of the ITransition interface. This interface is exposed by the Silverlight for Windows Phone Toolkit. The implementation is pretty straightforward. We will have an instance of a StoryBoard passed in the constructor and will call its methods as needed in our implementation:

public class CustomTransition : ITransition
{
    readonly Storyboard _storyboard;

    public CustomTransition(Storyboard sb)
    {
        _storyboard = sb;
    }

    #region ITransition Members

    public void Begin()
    {
        _storyboard.Begin();
    }

    public event EventHandler Completed
    {
        add
        {
            _storyboard.Completed += value;
        }
        remove
        {
            _storyboard.Completed -= value;
        }
    }

    public ClockState GetCurrentState()
    {
        return _storyboard.GetCurrentState();
    }

    public TimeSpan GetCurrentTime()
    {
        throw new NotImplementedException();
    }

    public void Pause()
    {
        _storyboard.Pause();
    }

    public void Resume()
    {
        _storyboard.Resume();
    }

    public void Seek(TimeSpan offset)
    {
    }

    public void SeekAlignedToLastTick(TimeSpan offset)
    {
    }

    public void SkipToFill()
    {
        _storyboard.SkipToFill();
    }

    public void Stop()
    {
        _storyboard.Stop();
    }

    #endregion
}

This CustomTransition will be the ITransition type required to be returned by the GetTransition method of the TransitionElement class. More on this now.

Let’s create the actual transition class that changes the Opacity property of any UIElement. The primary goal here is to display content with a subtle fade in effect. This class will inherit from TransitionElement, an abstract class found in the Microsoft.Phone.Controls.Toolkit assembly. This class just creates a StoryBoard, sets its target and return our CustomTransition with that StoryBoard:

public class OpacityTransition : TransitionElement
    {
        public override ITransition GetTransition(UIElement element)
        {
            var myStoryboard = CreateStoryboard(0.0, 1.0);
            Storyboard.SetTarget(myStoryboard, element);
            return new CustomTransition(myStoryboard);
        }

        private Storyboard CreateStoryboard(double from, double to)
        {
            var sb = new Storyboard();

            var animation = new DoubleAnimation();
            animation.From = from;
            animation.To = to;
            var duration = new Duration(TimeSpan.FromSeconds(0.2));
            animation.Duration = duration;
            Storyboard.SetTargetProperty(animation, new PropertyPath(UIElement.OpacityProperty));
            sb.Children.Add(animation);

            return sb;
        }
    }

Now it’s time for the Behavior.Behaviors are attachable and reusable pieces of code which add interactivity to your application. Because of this, the following piece of interactivity we are going to implement can be reused in all your applications.

public class OnLoadedOpacityTransitionBehavior : Behavior<FrameworkElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();

        AssociatedObject.Loaded += AssociatedObjectLoaded;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();

        AssociatedObject.Loaded -= AssociatedObjectLoaded;
    }

    private void AssociatedObjectLoaded(object sender, RoutedEventArgs e)
    {
        var opacityTransition = new OpacityTransition();
        var transition = opacityTransition.GetTransition(sender as UIElement);
        transition.Begin();
    }
}

The important part here is the subscription to the Loaded event. This means that every time the Loaded event is fired on a control, our behavior will do its magic and the content of that control will be displayed smoothly.

Finally, we need to declare this behavior in our XAML. We can do it individually for any control (TextBlock, Image, Button, etc.) or declare it in the container parent (Grid, StackPanel, etc.). The first option will make every individual control to be display smoothly as its Loaded event is fired. The second will animate all of them at once as the container Loaded event is fired. This is up to you and your application’s needs, but take into account that by using the first option, your application’s performance may decrease if there are many elements on screen.

<Image Opacity="0.0" Source="{Binding Image}">
    <i:Interaction.Behaviors>
        <Behaviors:OnLoadedOpacityTransitionBehavior/>
    </i:Interaction.Behaviors>
</Image>

Note that the initial Opacity value of the control must be 0.0 (invisible). Our behavior will be responsible to animate the Opacity from 0.0 to 1.0 (visible) when the Loaded event is fired for this control.

And that’s all. Now you don’t have any excuse for not displaying list results, images or any other content of your application smoothly.

Hope it helps and happy coding!

Antares Lair

Desarrollo con Windows Phone

[Windows Phone] Populating content smoothly

Un comentario en “[Windows Phone] Populating content smoothly”

Deja un comentario Cancelar la respuesta

Comparte esto:

Relacionado

Un comentario en “[Windows Phone] Populating content smoothly”

Deja un comentario Cancelar la respuesta