Developing for Modern Windows

Tips, tricks, and guides for developing on modern Windows platforms

Use Secondary Tiles to Modify App Launch [UWP]

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

image

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.

secondary

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. I won’t go into detail about creating the secondary tile, as that’s a separate topic. What I am 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:

  1. If you tap the “monkey” secondary tile, the app will open to AlternatePage and display some information about monkeys.
  2. 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 hanlding 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:

  1. Give your secondary tiles a tile ID that identifies them.
  2. 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.

Related post

If you want to make great dynamic live tiles based on XAML controls, see my XAML Control to Live Tile in UWP tutorial.

Tags:

4 Responses to “Use Secondary Tiles to Modify App Launch [UWP]”

  1. Ken B says:

    My university has a mobile portal app (look for DrexelOne Mobile in the store; the last screen snapshot shows six live tiles and three static ones).

    We initially supported six mobile platforms; I wrote the Windows Phone version. Virtually every page of the app is pinnable and, for logged in users, the those tiles that take users to pages that display personal data (like how many meals are left on a user’s meal plan or how any courses have no content in Blackboard Learn) are all live.

    Other than me testing, no one has ever pinned a subpage as a tile. I think that this is so because the idea of pinnable pages and secondary icons is unusual (i.e., not on other platforms). As such, users don’t think of it as a thing and thus don’t use it.

    Still, when the app is updated for UWP, I’m going to keep the feature in there.

    • Damien says:

      Yeah, I think Microsoft need to do more to get the idea out there. The new ‘chaseable’ tile functionality will be great, because you will be able to update a tile remotely and still have it launch the app with context (great for news apps). You’re right – the concept is alien to most users at the moment. They think of apps as they have always been – with a start page, etc. But secondary tiles is not much different from having a shortcut to a document that opens in Word really.

      Do you have anything in your app’s UI that encourages users to pin the extra pages?

  2. Thank you! I spent the better part of the day going through (mostly out of date) secondaryTile tutorials and yours was the first one that actually covered every aspect in detail, and yet it was also the shortest.

    I have one question though and that is whether you can (or should in your opinion) start initiate a task to run in the background. Could you create something like a flashlight app that turned on and off the phone’s light with two live tiles?

Leave a Reply

Your email address will not be published.