Adding secondary tiles to your app

Secondary tiles enable users to promote specific content and deep links. It enables you to personalize your app experience and give user the power on how they want to access data within their app.

Consider a sample app that has a list of useful modules like Todo, Twitter, etc. When added to my dashboard I want to create a shortcut for that module in my Windows 8 start screen.

I am using XAML / C# for this example, but you can also use JavaScript / WinJS. First Step is to create an app bar button that will let me pin / unpin the secondary tile.

This is pretty straight-forward. If you are using the Windows 8 App template, simply uncomment the PinAppbarButtonStyle element from StandardStyles.xaml then set that as an style for a regular Button, and make sure it matches the following code listing.

Next you need to bind the command to an action. In the following listing, I used MVVM for binding the command. You can also add a page method and attach the click event.

I implemented the command in my View Model as shown in the following code listing. I first check for the existence of a selected item, which in this case is the module that I want to pin to the start screen. If there is a selected item, the command invokes the PinToStartScreen method.

Next, inside the PinToStartScreen method, I check if the secondary tile is already pinned. If so then I request a deletion and then update the app bar icon. I pass the sender element to the dialog that is shown before pinning / unpinning a tile. This is the app bar button that is used to position the dialog.

You should show the user an indication whether or not the tile is already pinned. I have to flip the style based on the pinned status and mark the bar as sticky otherwise it will close as soon as the user loses focus and the popup dialog is shown. This behavior is similar to the Windows 8 start menu when trying to delete an app. The following listing shows the event handler that gets executed when the user invokes the app bar.

Now moving back to PinToStartScreen method, I first create the three logos that will cover the available form factors for a tile. I also need to create a unique id for the tile that will let me navigate back to the module that represents the tile. Finally, I set the background color, short and display name for the tile as well.

I then pin the tile asynchronously, update the app bar icon, and deselect the module for which the tile is created.

The dialog that is generated for pin / unpin action requires the rectangle defined by the developer. In general the GetElementRect method will look like this:

That’s it. Now clicking on the pin icon should bring up a similar UI shown below for setting the secondary tile:

Secondary tiles can also have notifications similar to that of a regular tile. This requires you to set the content xml in a similar way. The only difference is with the method that is used for creating the updater. Since it’s a secondary tile, I have to pass the unique id that was used to create the secondary tile as well.

As an example of live secondary tiles, I show the most recent task. That code is shown in the next listing.

This would be much nicer wrapped in an extension method, which I leave as a task to the reader.

Summary

In this post, I mentioned the usefulness of a secondary tile, how to pin / unpin it from start menu, update the app bar icon based on pinning status of the tile and send notifications to it. The things described here although tied to a specific use case but can be extended further.

Mehfuz Hossain

Mehfuz Hossain works as the Technical Advisor in DevTools Division . He is passionate playing around with the latest bits. He has been a Microsoft MVP, author of OS projects like LinqExtender and LINQ to flickr and most recently lighter (nodejs + mongo blogging engine). Prior to working at Telerik , Mehfuz worked as a core member in many high volume web applications including Pageflakes that is acquired by Live Universe in 2008. He is a frequent blogger and was also a contributor and site developer at dotnetslackers.com.

Latest Stories
in Your Inbox

I agree to receive email communications from Progress Software or its Partners, containing information about Progress Software’s products. Consent may be withdrawn at any time.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.