[Windows Phone] Music Player text animation

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.

[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.

[Windows Phone] Get the tilt effect and the click event, everywhere

When designing your Windows Phone application you may need the TextBlock, for instance, to receive a Click or Tap event. Also, to make your application shine, you also want the tilt effect when your user taps the control. A good example of this are the Panorama controls used throughout the Windows Phone OS, or third party applications such as Nokia Music.