In this quick post I will show you how to mimic the flip text animation in the Zune (now Xbox Music) player when changing songs.

As you may already know, animations in Windows Phone are mainly achieved with the use of Storyboards in XAML. In this particular animation we will play with the opacity of the TextBlock and will scale it to simulate the flip animation. The TextBlock will look something like this:

< TextBlock x : Name ="ArtistName" Opacity ="0.0" Grid.Row ="0" HorizontalAlignment ="Center" Text ="{ Binding Artist }" Margin ="0,20,0,0" TextWrapping ="Wrap" TextAlignment ="Center" FontSize ="{ StaticResource PhoneFontSizeExtraLarge }" Style ="{ StaticResource PhoneTextSubtleStyle }" RenderTransformOrigin ="0.5,0.5"> < TextBlock.RenderTransform > < CompositeTransform /> </ TextBlock.RenderTransform > </ TextBlock >

The RenderTransformOrigin property sets the origin point of any transform applied to the control. Here we are basically setting it to be transformed from the center. The CompositeTransform lets us apply different transforms to an object.

Time for the storyboards. We will have two of them: one for the artist name and another for the song title. As I said earlier, we will animate the text’s opacity:

< Storyboard x : Name ="ArtistNameStoryboard"> < DoubleAnimationUsingKeyFrames Storyboard.TargetProperty ="(UIElement.Opacity)" Storyboard.TargetName ="ArtistName"> < SplineDoubleKeyFrame KeyTime ="0:0:0.1" Value ="0"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.2" Value ="0"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.3" Value ="0"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.4" Value ="0"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.5" Value ="0.5"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.6" Value ="1"/> </ DoubleAnimationUsingKeyFrames >

All types of animations allowed inside storyboards have two main properties: TargetProperty and TargetName. The former refers to the target property to be animated. The latter refers to the name of the target control to animate. In this case, we animate the TextBlock from invisible to visible in six milliseconds. Note that at the beginning, Opacity stays at value 0 several milliseconds. This delay is on purpose to animate the artist name and the song title at different times, making the flip animation flow from one text to the other.

In order to get a flip effect, we need to scale and animate the text. Here is where the RenderTransform comes to play. The text will flip vertically, so we will use the ScaleY property of the transform:

< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty ="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName ="ArtistName"> < SplineDoubleKeyFrame KeyTime ="0:0:0.1" Value ="1"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.2" Value ="1"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.3" Value ="1"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.4" Value ="0"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.5" Value ="0.5"/> < SplineDoubleKeyFrame KeyTime ="0:0:0.6" Value ="1"/> </ DoubleAnimationUsingKeyFrames >

</ Storyboard >

Again, the delay trick is used here. For the song title we will just do the same, only difference being extending the delay.

Once you want to trigger the animation, just call the Begin() method of the Storyboard like this:

ArtistNameStoryboard.Begin();

and all set. You can find below a quick sample solution with complete code which demonstrates all the explained:

MusicPlayerTextEffect.zip

I hope you find this useful.

Cheers.