UWP: Launch your App Differently from Secondary Live Tiles
Modern Windows apps are famous for their live tiles, but most apps don’t take full advantage of the available functionality. One great piece of live tile functionality is ‘secondary tiles’.
http://grogansoft.com/blog/wp-content/uploads/2016/05/image_thumb-2.png
Secondary tiles are lives tiles your app can pin in addition to its main tile. When your app is launched from a tile you can detect which tile was clicked/tapped!
For example, if you have a note-taking app, your users could pin multiple notes to their Start menu as live tiles. When the user taps on one of the tiles, your app can detect this and open the appropriate note.
http://grogansoft.com/blog/wp-content/uploads/2016/05/secondary_thumb.gif
Note: You may have heard of ‘chaseable’ live tiles in the Universal Windows Platform (UWP). Chaseable tiles know what they were displaying when the user tapped (e.g. a particular news story). This is a little different from what I’m describing here. Chaseable live tiles are a ‘coming soon’ feature, and you can see more details from this Microsoft blog post.
Giving your Tile a TileId
Creating a secondary tile is quite easy, you simply create a new instance of the SecondaryTile class with the details you want (e.g. images, text), and then create the tile. It can be done in a few lines of code:
var secondaryTile = new SecondaryTile(“tile ID”,
"App Name",
"args",
"tile",
options,
imageUri)
{ RoamingEnabled = true };
await secondaryTile.RequestCreateAsync();
For details on the parameters, check out Microsoft’s documentation for the SecondaryTile class. We won’t go into detail about creating the secondary tile, as that’s a separate topic. What this article is going to show here is how to detect which tile launched the app, and how you can adapt your app’s launch based on this information.
The TileId parameter (the first one) is what lets you identify which tile launched the app. If the user tapped the app’s main tile, this property will be “App”; if the user tapped a secondary tile, this property will be the TileId you specified when you created the tile.
Detecting which Tile was Tapped
Since secondary tiles are suited to providing context to your app (e.g. a specific note or music artist accessible within an app), you need to know how your application knows it was activated from a secondary tile (and which secondary tile it was). When your app is launched, the OnLaunched() method in App.xaml.cs has a LaunchActivatedEventArgs parameter:
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
// code
var idOfTappedTile = e.TileId;
}
That parameter contains the live tile ID in the TileId property (e.TileId). As mentioned previously, this will be “App” if the main tile was tapped or the tile ID you specified when creating a secondary tile.
Once you know the tile ID you can do whatever you want with that information, such as launch a different page or open a particular file.
Responding to the Tapped Tile
In the sample project linked below I have included two scenarios:
- If you tap the “monkey” secondary tile, the app will open to AlternatePage and display some information about monkeys.
- If you tap the “elephant” or “pig” tiles, the app opens to MainPage and displays a popup telling you which tile you clicked.
You detect the tile ID, and therefore respond to it, in the OnLaunched method.
For the purposes of this example, you can ignore the first line of code (checking PrelaunchActivated), but if you want more information about prelaunching in Windows 10 UWP apps, see this page from Microsoft about handling prelaunching.
Here’s the sample project’s OnLaunched code (this is not the full OnLaunched method, just the pertinent part). You can compare it with an empty project to see the minor differences:
if (e.PrelaunchActivated == false)
{
if (rootFrame.Content == null || e.TileId != "App")
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
if (e.TileId == "monkey")
{
rootFrame.Navigate(typeof(AlternatePage));
}
else
{
rootFrame.Navigate(typeof(MainPage), e.TileId);
}
}
// Ensure the current window is active
Window.Current.Activate();
}
“if (rootFrame.Content == null || e.TileId != "App")”
The reason for the addition of checking if the tile ID is not “App” when checking for an empty frame is to let the user re-open the app from a secondary tile when the app is already running. So if the app was launched from a secondary tile, it will act as if the app was launched fresh.
Next we just check the TileId parameter and navigate to different pages depending on which was tapped.
Passing the Tile Id to Another Page
In the following line of code:
rootFrame.Navigate(typeof(MainPage), e.TileId);
We are passing the tile ID to MainPage as a parameter. This is a way to navigate to a common page, but give it some context it may require. In this example we put the tile ID into a message dialog, but of course you could do anything with that information, such as loading a file, logging in a different user, and so on.
Here’s MainPage.xaml.cs’s OnNavigatedTo method:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// tile ID sent from App.xaml.cs in the NavigationEventArgs parameter
if (e.Parameter != null && ((string)e.Parameter != "App"))
{
var msg = new MessageDialog("Launched from tile: " + e.Parameter);
msg.ShowAsync();
}
}
We easily grab the tile ID from the navigation parameter and react to its value.
Conclusion
To react to the user launching the app from a secondary live tile you need to do two things:
- Give your secondary tiles a tile ID that identifies them.
- Check if a secondary tile launched the app, and react to which tile was tapped.
Keep in mind that this is different from ‘chaseable’ live tiles, which is an upcoming UWP feature with a slightly different use case, where you can send a payload of information to a live tile in a notification, and then react to that. Importantly, this information can be sent to the tile when the app isn’t running (e.g. from a toast notification).
Download the sample project and try out the functionality. Please leave a comment if you have any questions or issues.