I recently updated my app Santa Calls to include a settings page that would allow the user to delay a call or pin lock the application. When navigating to this page I wanted a nice transition, but I wanted the tree in the background to remain.
To accomplish this I set the background of these pages to be the tree image and moved the content in/out when needed. I would not be able to accomplish this type of transition using an SDK like the Windows Phone Toolkit or Telerik unless I set the application background to be the tree. I did not want to do this because the phone call pages do not have this same background.
The transitions are pretty simple and can be used by any page to move content up/down. I created a handy extension method that can be used by any FrameworkElement. To slide the content up into view, we need to create a Storyboard with a DoubleAnimation that will move the content (assumed to be a page) from the bottom of the page to the top.
public static async Task TransitionOutSlideDown(this FrameworkElement source)
{
await source.SlideVertically(0, 800);
}
public static async Task TransitionInSlideUp(this FrameworkElement source)
{
await source.SlideVertically(800, 0);
}
private static async Task SlideVertically(this FrameworkElement source, int from, int to)
{
if (source == null) return;
source.RenderTransform = new CompositeTransform();
var story = new Storyboard();
var animation = new DoubleAnimation { Duration = TimeSpan.FromSeconds(.2), To = to, From = from };
Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));
Storyboard.SetTarget(animation, source);
story.Children.Add(animation);
await story.BeginAsync();
}
This uses a BeginAsync extension method from Morten Nielsen to run a Storyboard as a Task. To slide the content up or down we pass the from and to Y values to the SlideVertically method.
Now that we have our extension methods, we need to use them. When navigating to a page, override the OnNavigatedTo method and call the TransitionInSlideUp method.
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
try
{
await LayoutRoot.TransitionInSlideUp();
}
catch { }
}
The slide out transition is a little different. You already know how to exit app when awaiting an operation. This will be very similar. Instead of exiting the app, you’ll continue to navigate backwards.
protected override async void OnBackKeyPress(CancelEventArgs e)
{
e.Cancel = true;
base.OnBackKeyPress(e);
try
{
await LayoutRoot.TransitionOutSlideDown();
}
catch { }
NavigationService.GoBack();
}
With the SlideVertically method you can easily create slide updown transitions for navigating in or out.