Windows 8 Design: C++, a little XAML and Tile Notification

Implementing a tile, is easy and simple in C++

To read a really well written blog about tile notification take a look at Daniel Egan’s blog, he does a good job of describing the tile notification, but from a C#/XAML point of view.  Here I am talking about the C++ and how you use C++ to create a tile notification.  Daniel does a good job of discussing the importance of the tile, etc.  I wn’t waste your time cover the same ground as Daniel, just click the hyperlink and jump over to read his four blogs on how and why to use the tile notifications.  Looks like a good idea.

What is being described in this post?  We will cover the mechanics, but to start, I created a click event in XAML code which kicked off an event to send a simple text to the tile.

To find out how to use images for your tiles see: Tile and toast image sizes (Windows Store apps) .  (It's about here that the managers stop reading, so now it is between you and me!)

Why did I write this article?  I used the article to figure out how to write the simple code, but noticed in the comments that the readers were a little confused about where to put code, etc.  After all C++ programmers aren't use to a presentation layer...

This motivated me to create a new C++ Blank XAML project and added the images as shown in the articles referenced.  Use your own images that meet the requirements as shown in the Tile and toast image sizes (Windows Store apps) article.  Sample code and a slightly different discussion has been posted at the code gallery.

Sample code is posted at:

The XAML Code looks like the following:

Your XAML will differ, but you could simply reuse the <Button …> code in the XAML below.  For more on XAML, see Jerry Nixon at https://blog.jerrynixon.com :

 <Page
     x:Class="LiveTileFun.MainPage"
     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:LiveTileFun"
     xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
  
     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
         <Button x:Name="btnDemoTile" Content="Send Tile" 
                 HorizontalAlignment="Left"  VerticalAlignment="Top" 
                 Margin="41,324,0,0" Height="187" Width="174" 
                 Click="DemoTile1" />
     </Grid>
 </Page>

C++ Code looks like:

I have included the complete code for you to do a full cut and paste, for it to work you will need to make sure that the namespace for the project is correct.  You can simply cut and paste the code and then select the all of the code in the mainpage.xaml.cpp, but make sure that the "using namespace LiveTileFun;" line matches the namespace for your application.

 #include "pch.h"
 #include "MainPage.xaml.h"
  
 using namespace LiveTileFun;
 using namespace Platform;
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
 using namespace Windows::UI::Xaml;
 using namespace Windows::UI::Xaml::Controls;
 using namespace Windows::UI::Xaml::Controls::Primitives;
 using namespace Windows::UI::Xaml::Data;
 using namespace Windows::UI::Xaml::Input;
 using namespace Windows::UI::Xaml::Media;
 using namespace Windows::UI::Xaml::Navigation;
 //*******************************************************
 //Add the next two lines ********************************
 using namespace Windows::UI::Notifications;
 using namespace Windows::Data::Xml::Dom;
 //*******************************************************
 //*******************************************************
  
 MainPage::MainPage()
 {
     InitializeComponent();
 }
  
 /// <summary>
 /// Invoked when this page is about to be displayed in a Frame.
 /// </summary>
 /// <param name="e">Event data that describes how this page was reached. The Parameter
 /// property is typically used to configure the page.</param>
 void MainPage::OnNavigatedTo(NavigationEventArgs^ e)
 {
     (void) e;    // Unused parameter
 }
 //**************************************************************************************************************************
 //This is the event that I generated
 //**************************************************************************************************************************
 void LiveTileFun::MainPage::DemoTile1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
 {
     XmlDocument^ tileXml = TileUpdateManager::GetTemplateContent(TileTemplateType::TileSquareText01);
     
     XmlNodeList^ tileTextAttributes = tileXml->GetElementsByTagName("text");
     tileTextAttributes->Item(0)->InnerText = "Boo!";
  
     TileNotification^ tileNotification = ref new TileNotification(tileXml);
     TileUpdateManager::CreateTileUpdaterForApplication()->Update(tileNotification);
 }

Sample code is posted at:

https://code.msdn.microsoft.com/Super-Simple-C-Live-Tile-73fb79f0

Tile design philosophy

Tiles are your front line marketing tool.  And they work harder then most marketers.  Just kidding, but think about it, a tile never asks for the day off.

Your goal is to create an appealing tile for your app. If you use a live tile, your goal is to present engaging new content that the user will find valuable to see in their Start screen and that invites them to launch the app. To that end, avoid the overuse of loud colors. Simple, clean, elegantly designed tiles will be more successful than those that scream for attention like a petulant child.

When designing your app, you might ask yourself "Why should I invest in a live tile?" There are several reasons:

  • Tiles are the "front door" to your app. A compelling live tile can draw users into your app when your app is not running. A user increasingly values an app that they use frequently.
  • A live tile is a selling point that differentiates your app, both from other apps in the Windows Store (users are likely to prefer the app with the great live tile to a similar app with a static tile) and from apps on operating systems that only allow static tiles and icons in their Start screen.
  • If users like your live tile, a prominent placement of that tile in Start will drive re-engagement with your app. Serendipitous discovery of cool content in the app through the tile will make users happy.
  • If users don't like your tile, they might place it at the end of Start or unpin it altogether, turn off updates, or even uninstall your app.

Some characteristics that make a live tile compelling are:

  • Fresh, frequently updated content that makes users feel that your app is active even when it's not running.

    Example: Showing the latest headlines or a count of new e-mails.

  • Personalized or tailored updates that use what you know about the user, such as interests that you allow the user to specify through app settings.

    Example: Deals of the day tailored to the user's hobbies.

  • Content relevant to the user's current context.

    Example: A traffic condition app that uses the user's current location to display a relevant traffic map is much better then a traffic condition app that shows irrelevant traffic.