[Windows Phone] Resuming your app from the Start Screen (or not) Part II

In the first part of these article series I showed how to make your apps resume from the Start Screen (Fast Resume). In this second part of the article I will discuss different app scenarios where we can take advantage of Fast Resume:

[Windows Phone] Resuming your app from the Start Screen (or not) Part I

Launching and resuming apps has been greatly improved in Windows Phone 8. In previous versions of the operating system, tapping on a main tile of the app always created a new instance of the app, even though that app was already opened in the background. This frustrated users coming from others platforms such as iOS or Android, in which apps are resumed when tapping on the icon in the home screen. Fortunately, this issue has been addressed and now developers have the possibility to implement what Microsoft calls Fast Resume.

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