Page Transitions for Universal XAML Pages

Normally, if you want different page transitions (NavigationThemeTransition) for your Universal XAML Windows Phone 8.1 app, you’d set it on the page’s XAML directly. For example, let’s do a ContinuumTransition:


<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<ContinuumNavigationTransitionInfo />
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>

However, if you have a XAML page in your Universal app’s shared folder, you can’t use XAML because page transitions are not available for Windows 8.1 apps. Since there isn’t a conditional compilation for XAML, we’ll need to do it from the code behind.

In your OnNavigatedTo event, set up an #ifdef statement to check if the page is being used on PC or phone. Now with the ability to run platform specific code, we can programmatically add the transition to the Page. Here is the result:


#if WINDOWS_PHONE_APP
//phone code

this.Transitions = new TransitionCollection
{
new NavigationThemeTransition
{
DefaultNavigationTransitionInfo = new ContinuumNavigationTransitionInfo()
}
};
#else
//PC code

#endif

Now you can have the same transition effect you use for the rest of the phone app’s pages, enjoy!

Report progress – IAsyncActionWithProgress

One of the best things you can do for your app’s users is to report the progress of an operation. Showing a progress bar can greatly increase the patience of the user, not knowing how long something is going to take can make the operation just feel longer.

Luckily, many WinRT Tasks will return an IAsyncActionWithProgress. I’ve seen many blog posts about this topic, but most are deeply involved and weren’t suited for a quick lookup. This post will show you a quick example, which you can apply in your app..

A quick summary is that you have two main options with one of these actions; await the action result directly or don’t await and hook into the Progress event and Completed event. As an example, I will use the MediaComposition class available for Windows Phone 8.1.

If you wanted to save the composition but still want to catch render failure, you’d do something like this:


var transcodeFailureReason = await mediaComposition.RenderToFileAsync(storageFile);

if(transcodeFailureReason == TranscodeFailureReason.None)
{
//success!
}

However, the rendering could take a long time, it’s better to show the user the progress of the operation. RenderToFileAsync will also give you an IAsyncActionWithProgress if you don’t use await. You’d hook in to the events I mentioned above. Here is what that looks like:


var result = mediaComposition.RenderToFileAsync(storageFile);
result.Progress += Progress;
result.Completed += Completed;

The progress event actually gives you the percentage completed of the operation in the second parameter. Just make sure you marshal back to the UI thread when updating the UI. Here is an example of using a TextBlock and ProgressBar to report progress.


private void Progress(IAsyncOperationWithProgress<TranscodeFailureReason, double> asyncInfo, double progressInfo)
{
Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
ProgressTextBlock.Text = string.Format("{0}% complete", progressInfo);
ProgressBar.Value = progressInfo;
});
}

Finally, in the Completed event, make sure the rendering happened without error and move on. Note that you are still on a different thread, if you have a list of items in the ViewModel to update you need to marshal it as well.


private async void Completed(IAsyncOperationWithProgress<TranscodeFailureReason, double> asyncInfo, AsyncStatus asyncStatus)
{
if (asyncInfo.GetResults() != TranscodeFailureReason.None)
{
//operation failed
}

Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =>
{
await UpdateMyViewModelCollectionWithNewThing();
});
}

Showing the user progress adds professionalism to your app and makes the user’s experience much better.

Enjoy!

How to disable display timeout in WinRT

For those of you who are building multimedia related apps, you’ll want to consider disabling the display timeout of the user’s device. This prevents the screen from dimming or locking while the user is playing/recording media.

In my case, I have a view where the user is doing some video recording. so I don’t want the screen to time out on that page

1)  Create a class scope variable::

private DisplayRequest dRequest;

2) On your OnNavigatedTo event, grab a new DisplayRequest and get a deferral

if (dRequest == null)

{

     dRequest = new DisplayRequest();

     dRequest.RequestActive();

}

3) when the user is done, set it back to normal in the OnNavigatingFrom event:

if (dRequest != null)

{

     dRequest.RequestRelease();

     dRequest = null;

}

That’s it!

I’ll be also using this on media playback page, but in that case I wont use a “page loaded/unloaded” approach. Instead, I’ll wait for the media to be loaded into the MediaElement before getting the deferral and get the release on media ended.

Remember to be respectful when playing with power like this, do not do this for your whole app. Be mindful and skillful and apply it to just the parts that truly need it.

Adding Telerik Universal

Telerik has released a new toolset, UI for Windows Universal. You can now use many components like Charts and Calendars in a shared XAML page in your application. If you already have the Telerik Windows Phone or Windows 8.1 XAML controls, you now have a license for the Universal controls, too.

It is very simple to add it to your project. Let me show you in a quick File > New example:

1- Open Visual Studio 2013 and create a new Universal Store app.

Select File > New > Project > Visual C# > Store Apps > Universal Apps and choose the HubApp template (you can choose Blank App if you prefer, we’re only going to use the Shared folder to add content).

S1

2- After the project generates, let’s focus on the solution Explorer. First, lets add the Telerik reference to the Windows project.

Right click on References > Add Reference > select Windows 8.1 (in the left tree) > Extensions. Now you’ll see a list of extensions, choose “Telerik UI for Windows Universal

S2

3- Now add the Telerik extension to the Windows Phone project.

The steps are the sames as you did in step 2, but the extension’s name is “Telerik UI for Windows Phone 8.1

S3

4- Now we are ready to start building, let’s add a RadCalendar to a shared XAML page.

  1. Build the solution (F6)
  2. Right click on the Shared Project and select Add > New Item > Blank Page
  3. In the Visual Studio Toolbox type in “RadCalendar“, drag and drop it onto your new blank page. You can also type it in, but make sure you add the namespace (see screenshot)

S4

You can also see how the control will on Phone by simply toggling the view:

S5

That’s all there is to it!

Here are some more resources for you:

One last thing I should mention is that not all the Windows 8.1 controls are Universal right now. We are hard at work to bring more over. Here is a list as of Q3 2014:

Attend Publish Boston & Win Big

Since the prizes are really awesome for this event (May 17th), I’m going to start off with them. We will be rewarding the best student, best individual, and best company in each of the categories below:

  • Top Windows 8.1 app
    • Trip to the 2014 Formula 1 United States Grand Prix in Austin, TX.
    • 9 runner-up Nokia Lumia 1520 prizes
  • Top Windows Phone app
    • $10,000 to build your own “Dev Cave”
    • 9 Runner-up Nokia Lumia 1520 prizes
  • Top Cross Platform app
    • MakerBot 3D printer
    • 9 Runner-up Nokia Lumia 1520 prizes
  • Breakthrough in App Innovation and Design
    • MakerBot 3D printer
    • 9 Runner-up Nokia Lumia 1520 prizes

But wait, there’s more! I will be giving away these prizes at the end of the day…

  • Dell Venue Pro 8
  • Nokia Lumia 1520
  • Surface Pro and Surface Bluetooth Wedge Mouse (only windows phone entries are eligible)
  • 2 Nokia Lumia “Hero” Devices, winner’s choice of a Lumia 1020, 928, 925 or 920 (only windows phone entries are eligible)

So you are probably now asking yourself, “How do you win these prizes?”, funny that you ask because I was just going to tell you how you can…

Participate

Microsoft is holding an awesome world-wide Hackathon-style event titled //publish/.  The main purpose of the event is for you to publish your app to the Windows Phone or Windows Store. The app can be:

  • An app that you start working on now
  • An old app that you haven’t been able to finish
  • Some thing you build from scratch at the event

At the event –  If you attend in person on May 17th and submit your app to DevCenter by 7 PM, you will be able to demo it to the audience. The winners of the local prizes (second group) will be randomly chosen from those who successfully submitted (you will need to show me that the app is in submission or has been published to qualify).

After the event – The grand prizes (first group) will be awarded after the apps are published in the store. The winners will be chosen from three groups; student, indie and small business. For more details about the grand prize contest, go here.

How do you sign up?

Go here to register for //publish/ Boston  ( tweet ‘@lancewmccarthy I just registered for #pubWin Boston! #wpdev’ for a RT )

If you are not close to Boston and want to see if there is a //Publish/ event near you, go here and filter the list from the drop down. Note that the local event’s prizes will be different, but the grand prizes are the same.

I hope to see you all there, this is going to be tons of fun. I will come back here and update this post with a final agenda and more details when they become available.

Happy coding!

Lance

Legal Stuff: As with all my giveaways and contests, by participating and receiving a prize, you agree to this disclaimer.

Build 2014 Videos

This year’s Microsoft Build conference was jam packed with Windows Phone goodness. In fact, there is too much to take in at once. So what I’ve done for you is break it down into sections so that you can bookmark this page and come back at your leisure.

These videos are in no particular order, so review them all before you choose, enjoy!

Windows Phone Development

Windows and Windows Phone Design related

Market, Store, Performance and Analytics related

HTML, WinJS/javascript and Web related

Enterprise related

 

Here is the main Ch9 Build 2014 page if you want to look up any sessions not related to Windows or Windows Phone development. Let me know if you have any trouble with this page or if there is something you think I should add.

Happy coding!