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.

image

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.

image

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.

 

image

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.

image

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.

image

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. 

image

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.

image

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

image

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:

image

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

image

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.

image

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

image

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.

Post reviewed by  Phil Japikse (@skimedic)


About the Author

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.

@mehfuzh

Comments

Comments are disabled in preview mode.