How to Debug a Windows 8 Metro Secondary Tile

I’ve been working on Chapter 7 of my upcoming book, Designing Windows 8 Metro Applications with C# and XAML. This chapter focuses on tiles and toast notifications. In the Windows 8 runtime, it is incredibly easy to prompt the user to pin a secondary tile. This is a tile that has a deep link for content. For example, my reference application contains blogs and blog posts from several Wintellect employees. You can pin a specific blog or even a specific item within a blog. The application bar provides the icon to click to Pin to Start:

The code simply grabs the current “group” that represents a blog, then formats a unique id for the tile, a title, and a special set of arguments that are passed when the tile is tapped:

private void Pin_Click_1(object sender, RoutedEventArgs e)
{
    var group = DefaultViewModel["Group"] as BlogGroup;
    var title = string.Format("Blog: {0}", group.Title);            
    ((App)Application.Current).PinToStart(this,
        string.Format("Wintellog.{0}", group.Id.GetHashCode()),
        title,
        title,
        string.Format("Group={0}", group.Id));
}

The code on the App class that does the actual work simply sets up some assets for the tile, computes the location of the button that was tapped and then sets up the tile to prompt the user to pin it:

public async void PinToStart(object sender, string id, string shortName, string displayName, string args)
{
    var logo = new Uri("ms-appx:///Assets/Logo.png");
    var smallLogo = new Uri("ms-appx:///Assets/SmallLogo.png");
    var wideLogo = new Uri("ms-appx:///Assets/WideLogo.png");
    var tile = new SecondaryTile(id, shortName, displayName, args, TileOptions.ShowNameOnLogo | TileOptions.ShowNameOnWideLogo,
        logo);
    tile.ForegroundText = ForegroundText.Dark;
    tile.SmallLogo = smallLogo;
    tile.WideLogo = wideLogo;            

    var element = sender as FrameworkElement; 
    var buttonTransform = element.TransformToVisual(null);
    var point = buttonTransform.TransformPoint(new Point());
    var rect = new Rect(point, new Size(element.ActualWidth, element.ActualHeight));

    await tile.RequestCreateForSelectionAsync(rect, Windows.UI.Popups.Placement.Left);        
}

You can see what the prompt looks like here:

When the application launches, it can read the arguments that are passed in and use them to navigate to the deep link:

if (_activationArgs.Arguments.StartsWith("Group"))
{
    var group = _activationArgs.Arguments.Split('=');
    target = typeof(GroupDetailPage);
    parameter = list.Where(g => g.Id.Equals(group[1])).FirstOrDefault();
}

The problem that you may encounter when dealing with secondary tiles is that the arguments are read-only when the application is launched. If you launch your Metro application from the debugger, you cannot modify the arguments and they will be passed in as blank. This will cause the application to respond as if it were launched from the primary tile, not a secondary one. Fortunately, the solution to debug secondary tiles is very straightforward. Simply right-click on the Metro project in the Solution Explorer and navigate to the Debug tab. There, you can set the application to get ready for debugging but not actually launch when you start a debugger session. This is what the setting looks like (see Do not launch, but debug my code when it starts):

Once you check this setting, you can launch debug and the application will simply wait. Then, you can press the Windows key to open the start screen and launch the application from a secondary tile. When the application is launched, it will jump into the debugger and you can hit your breakpoints to see the secondary tile arguments passed in and troubleshoot any issues you may have. Please head over to the Facebook page for my upcoming book and “Like” it to receive updates and learn when it will be available for preview online and released to print. I’ll be handing out sample chapters at my upcoming speaking events, so I hope to see you there at one of them.

(c) 2011-2012 Jeremy Likness.