(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Windows 8 and the future of XAML Part 6: Tiles, toasts and badges

(4 votes)
Gill Cleeren
>
Gill Cleeren
Joined Apr 02, 2010
Articles:   63
Comments:   6
More Articles
5 comments   /   posted on May 01, 2012
Categories:   Windows 8 , General

Welcome to part 6 already in this Windows 8 series. Since the goal of this articles is bringing you in touch with all the important aspects of Windows 8 development, we need to dive into tiles.

Tiles are therefore the main topic of this very article. If you’re coming from a Windows Phone 7 background, the concept of tiles is probably already familiar to you. However, Windows 8 brings quite a few new things to the table, including the concept of badges. Toasts are also covered here; conceptually, these already existed in Windows Phone 7 development as well but have been adapted for use in a Windows 8 environment.

The concepts of tiles

In Windows 8, due to the new way application lifetime management, only one application can be running at any point in time (except when the user has two applications side-by-side using snap view; in that case, two applications are running at the same time).

If not running, the application is suspended. We’ll cover the lifetime management in a coming article.

If an application wants to inform the user about an event or any update really, by default, it can only do so while it’s running in the foreground. Because this wouldn’t lead to a great user experience, Microsoft invented tiles. Tiles are the little blocks, pinned to the start screen. The image below shows some tiles.

image

While a tile is a way to launch an application, it can be much more. Users will pin applications they use most to their start screen. A tile can be made a live tile. A live tile is being updated with new information while the application is or isn’t running. Therefore, the tile can be seen as an extension of the application, allowing the developer to convey information while the application is not the foreground application (read: when it’s not running).

Like in Windows Phone 7, the start screen is a means of giving the user access to his most important info. Using a live tile, this becomes possible. The tile can be a way of engaging the user back in the application: imagine you’ve written an RSS application. Using a live tile, you can update the information shown in the start screen. When the user notices the article showing, it can result in a launch of the application.

Looking at the live tiles (and frankly, screenshots don’t do them justice), they may seem a bit complicated for developers to create at first sight. All the animations and different types that exist however, are all based on templates which are pure XML. Indeed, there’s no need to create tiles from scratch, Microsoft did the hard part. For developers, it’s just using these templates and Windows 8 will handle the rest. We’ll see these templates in a minute.

Tiles: basic ones and live ones

Let’s now look at how we can create these tiles. Up first, basic tiles.

Basic tiles

In Visual Studio, we can as a bare minimum, include the default tile, which is a square. When installing the application, the tile that’s shown by default is the square tile. It’s the user who can select that your application gets a wide tile. However, it’s up to the developer on the other hand to include a wide tile in Visual Studio as well. In the screenshot below, you can see the package manifest editor where we are selecting images. Notice that Visual Studio hints at what the sizes of these should be.

image

At this point, our application has a basic tile, which isn’t doing anything at all. It’s acting like an icon on the desktop basically. Below is the wide tile.

image

And here’s the square tile.

image

Both wide and square tiles can get updates. When receiving updates, tiles become live tiles.

Live tiles

Live tiles are where the fun begins. A live tile can display updates to the user. Below you can see a tile displaying different statuses.

image

It’s easy to understand that this way of displaying information extends the way the application works: in many apps, the information on the tile is some summary of the most important information of the application. Apart from text, tiles can also display images or a combination of the two.

image

To make a tile become a live tile, we need to send it a message. This message consists of XML in the form of a predefined template. Microsoft has included quite a few templates for both the square and the wide templates; below we can see a sample of this XML:

<tile>
  <visual version='1' lang='en-US'>
    <binding template='TileWideText03'>
      <text id='1'>Hello World! My very own tile notification
      </text>
    </binding>
    <binding template='TileSquareText04'>
      <text id='1'>Hello World! My very own tile notification
      </text>
    </binding>
  </visual>
</tile>

The template takes complete care of the display of the tile: rendering of the tile as well as all animations are done entirely based on the XML. We as developers don’t need to worry about these; the only thing we need to do is sending the tile updated XML. In a tile, we can include text (in some predefined fields in the XML) as well as images. Images can be *.png or *.jpg files (we’ve seen these in the above screenshots).

Let’s see how we can create a live tile. In this article, we are working with an application called “WorkingWithTiles”. The UI is very simple, it contains a few buttons which will trigger the execution of a tile update.

image

We can work with the raw XML (shown above) where we modify the XML and send that XML directly to the tile.

void UpdateTileWithText(string text)
{
    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
 
    XmlNodeList textElements = tileXml.GetElementsByTagName("text");
    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));
 
    TileNotification tile = new TileNotification(tileXml);
 
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
}

In the code above, we first retrieve the content using the TileUpdateManager.GetTemplateContent. TileTemplateType is an enumeration that contains all templates. In the following lines, we replace the contents of the text field. Finally, we create a TileNotification instance, which in the next line is sent to the TileUpdateManager.

Below you can see the updated tile.

image

Now we’ll take a look at updating both text and an image. The code is similar although a bit longer since we are adding an image and text. Notice that we are also including the contents of the square tile here, since we don’t know if the user has a wide tile or a square tile pinned from our app.

      
void UpdateTileWithImage(string text, string imageSrc)
{
    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);
 
    XmlNodeList textElements = tileXml.GetElementsByTagName("text");
    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));
 
    XmlNodeList imageElements = tileXml.GetElementsByTagName("image");
    XmlElement imageElement = (XmlElement)imageElements.Item(0);
    imageElement.SetAttribute("src", imageSrc);
    imageElement.SetAttribute("alt", "Image description");
 
 
    XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);
    XmlNodeList squareImageElements = squareTileXml.GetElementsByTagName("image");
    XmlElement squareImageElement = (XmlElement)squareImageElements.Item(0);
    squareImageElement.SetAttribute("src", imageSrc);
    squareImageElement.SetAttribute("alt", "Image description");
 
    IXmlNode subnode = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);
    tileXml.GetElementsByTagName("visual").Item(0).AppendChild(subnode);
 
    TileNotification tile = new TileNotification(tileXml);
 
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
}

When we look at the start screen now, we’ll see the following tile.

image

Using the XML directly is maybe a bit cumbersome. In the SDK samples, a handy library is included called NotificationExtensions. This wraps the XML editing and gives us types to work with. The XML editing is abstracted away. Below you can see the code for the text -only tile update.

void UpdateTileWithTextExtensions(string text)
{
    ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();
    tileContent.TextHeadingWrap.Text = text;
 
    ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
    squareContent.TextBodyWrap.Text = text;
    tileContent.SquareContent = squareContent;
 
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
}

And below is the tile update containing an image and text.

void UpdateTextAndImageExtensions(string text, string imageSrc)
{
    ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();
 
    tileContent.TextCaptionWrap.Text = text;
 
    tileContent.Image.Src = imageSrc;
    tileContent.Image.Alt = "Web image";
 
    ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();
 
    squareContent.Image.Src = imageSrc;
    squareContent.Image.Alt = "Web image";
 
    tileContent.SquareContent = squareContent;
 
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
}

As you can see, it’s much easier to work with these instead of directly editing the XML. The result is of course exactly the same.

Secondary tiles

By default, an app can only have a single tile. There are quite a few scenarios however where the user may want more than one tile of your application pinned to his start screen. Imagine you’re building a weather application. The user may want to pin to his start screen his current location but also the cities he’s to visit in the coming time. Or imagine you have again that RSS application. In such an app, a user may want to pin one or more RSS feeds so he gets notified about their updates on the start screen.

To cover this, we have secondary tiles. Such a tile works in the same way as a regular live tile, but it can be added to the start screen by the user from within the application. To be able to pin content, the developer however has to build in this option in the application (for example adding a Pin to Start button in the App Bar on the detail page of the weather for a city). Let’s look at this in some code.

private async void CreateSecondaryTile_Click_1(object sender, RoutedEventArgs e)
{
    Uri logo = new Uri("ms-appx:///assets/small.png");
    Uri smallLogo = new Uri("ms-appx:///assets/secondary.png");
 
    string tileActivationArguments = "timeTileWasPinned=" + DateTime.Now.ToLocalTime().ToString();
 
    // Create a 1x1 Secondary tile
    SecondaryTile secondaryTile = new SecondaryTile("AppSecondaryTile",
                                                    "Next webinar",
                                                    "",
                                                    tileActivationArguments,
                                                    TileOptions.ShowNameOnLogo,
                                                    smallLogo);
 
    secondaryTile.ForegroundText = ForegroundText.Light;
 
    bool isPinned = await secondaryTile.RequestCreateForSelectionAsync
        (GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Right);
}

Notice that it’s also possible to pass contextual information from the tile. It wouldn’t be a good experience if the user clicks the tile and arrives on the default landing page of the application. Creating a secondary tile is done by using asynchronous code, hence the use of the await/async pattern.

The user has to approve the secondary tile. This is done using the RequestCreateForSelectionAsync. The result of this is shown below.

image

If we run this code now, we get the following secondary tile.

image

Badges

Finally, as developers, we have the ability to display badges on the tile. A badge consists of a number between 0 and 99 or a glyph. The badge is an overlay on top of the tile. Adding a badge is done again using XML templates: by sending some XML to the tile (or to the secondary tile), the badge gets added to the tile. Let’s take a look at adding the badge from code. In here, we are updating the tile with a number.

void UpdateBadgeWithNumber(int number)
{
    BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);
 
    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());
}

The tile now looks as follows.

image

Now that we’ve seen tiles and their options, let’s look at notifications.

Notifications

A tile update isn’t guaranteed to be seen by the user. If our application has an important update to convey to the user, it might not be a good idea to just update the tile. In this case, it might be better to send a notification that the user will see on top of the running application. If you’ve been doing Windows Phone 7 development, you’ll probably recognize this pattern.

Like a tile, notifications are also built using XML templates. Because of the fact they are displayed over the running application, they are bound to get the user’s attention more quickly. Notifications aren’t permanent (they disappear automatically) and only 4 are shown at the same time. Just like with secondary tiles, it’s possible to pass context so that the user is brought automatically to the correct location within the application.

Notifications shouldn’t be used to spam the user though. Ultimately, the user remains in control: he can decide to turn off notifications for your app or for the entire system altogether. Therefore, don’t count on the fact that the user has seen the update!

Let’s add a notification message to the code now.

private void CreateToast()
{
 
    IToastNotificationContent toastContent = null;
 
    IToastText01 templateContent = ToastContentFactory.CreateToastText01();
    templateContent.TextBodyWrap.Text = "SilverlightShow webinar starts now!";
    toastContent = templateContent;
 
    ToastNotification toast = toastContent.CreateNotification();
 
    ToastNotificationManager.CreateToastNotifier().Show(toast);
}

Below you can see the notification being shown to the user.

If your toasts aren’t displaying, check that in the manifest declaration, this has been set to enabled.

Summary

In this article, we’ve looked at the different types of updates applications can send to the user. In the next article, we’ll focus on lifetime of Windows 8 applications.

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill is the author of “Silverlight 4 Data and Services Cookbook”. In 2012, the second edition, “Silverlight 5 Data and Services Cookbook” is released.

You can find his blog at www.snowball.be.

Twitter: @gillcleeren


Subscribe

Comments

  • TogeKipli

    Re: Windows 8 and the future of XAML Part 6: Tiles, toasts and badges


    posted by TogeKipli on May 21, 2012 14:21
    hhhhhhhhhhhhhhhhhhh
  • syamala

    Re: Windows 8 and the future of XAML Part 6: Tiles, toasts and badges


    posted by syamala on Dec 13, 2012 13:28

     The above code is giving the following error .can u help on this?

    error CS0246: The type or namespace name 'ApplicationViewStateChangedEventArgs' could not be found (are you missing a using directive or an assembly reference?)


  • MarcoBet

    Re: Windows 8 and the future of XAML Part 6: Tiles, toasts and badges


    posted by MarcoBet on Apr 02, 2015 04:38

    That is very interesting Smile I love reading and I Cipto Junaedy always searching for informative information like this Jadwal MotoGP 2015. This is exactly what I was looking for Cara Upload Video ke Youtube.  Really this system so amazing. Cipto Junaedy  so happy to browsing this BBM Untuk Android Versi Terbaru. Simply fill out a quick and easy application, and you'll be on your way to getting your new Cara Membuat Email  and Cara Instal Windows 7 avoiding Thanks for sharing this great article . Don't forget for reading the articles about Jinpoker.com Agen Judi Poker Online dan Domino Online Indonesia Terpercaya. And I encourage you to bookmark the following page if Cahayapoker.com Agen Judi Poker Dan Domino Uang Asli Online Terpercaya Indonesia considered important ... Regards ituDewa.net Agen Judi Poker Domino QQ Ceme Online Indonesia

    | Nusantarapoker.com Agen Texas Poker Dan Domino Online Tanpa Robot Terpercaya
  • BeeOShop

    Re: Windows 8 and the future of XAML Part 6: Tiles, toasts and badges


    posted by BeeOShop on Apr 29, 2015 15:00

    Mau info toko tas online di Bandung yang menjual berbagai macam tas untuk keperluan wanita dan anak-anak seperti tas-tas wanita yang branded dari berbagai merek terkenal seperti Louis Vuitton, PradaBrussels, Furla, Chanel, Hermes, dan banyak lagi tas branded wanita lainnya dengan bermacam model seperti dompetslingbaghandbag dan tote bag, yang trendy dengan harga yang terjangkau? Silahkan cek di Bee Bagshop grosir tas online di Bandung yang menjual tas-tas dengan moel dan warna yang bervariasi dengan harga yang murah. Selain tas wanita, kami juga menjual tas sekolah anak model selempang dan ransel yang juga branded tiruan seperti jansport dan kipling dengan banyak variasi model dan warna, dijamin putra-putri anda menyukainya.

    Bagi yang ingin merawat kulit wajah tanpa harus repot dan mahal, simak tips kecantikan berikut yang mudah dan murah. Coba Sabun Amoorea. Manfaat sabun ajaib amoorea ini diantaranya untuk berbagai permasalahan kulit anda, seperti jerawat, scars (bekas jerawat), mengencangkan kulit, membuat kulit tampak lebih cerah dan segar, mengatasi lingkar hitam di bawah mata (mata panda), dll. Untuk melihat review sabun amoorea ini klik di sini. Simak juga testimoni yang sudah menggunakan sabun ini, simak selengkapnya. Meski harga sabun amoorea ini cukup terjangkau, produk ini aman, karena terbuat dari 100% bahan alami dan sudah ada ijin dari BPOM sehingga anda tidak perlu khawatir dan ragu memakainya. Jika aman (tidak berbahaya) apakah memakai sabun amoorea ada efek sampingnya? Reaksi apa yang timbul saat pertama menggunakannya? Simak info lengkapnya di sini.

    How To Get Rid Of Acne and Scars site generally tell about  tips for beauty and health skin, and especially tell anything about acne, myths, acne and scars treatments , not only on your face (including acne and scars on your body such as chest and back)which may help you to war against acne and the scars to leaves on your face and body (back and chest), through naturally, home remedies, and medical treatment. Some people believe that natural treatment is most safe. But its seems would take time longer then medical treatment. In my oppinion, using medical treatment is more effective and you'll see the result faster. To find what the best treatment for your acne, better you understand what causes of acne. The following are some factors which can cause acne: Hormones, diet, stress, medication, clothing, environment factors, genes, and cosmetics. For back or chest acne cases, it may caused by your tight clothes. To get rid of acne on back or chest, it's good to wear synthetic loose clothing, such as cotton linen, to prevent excessive rubbing and irritation on the skin. Another treatment that can help you to get rid of back or chest acne is keep your body always clean, with take a bath regularly, preferably with an anti-bacterial soap or a salicylic acid-based cleanser is highly recommended. When acne goes, it will leaves behind the red on skin, and seems impossible to heal it fast overnight. So, it would be better to do something which may offer some remarkable effects on the redness from acne. If you choose naturally treatment,  just take a cube of ice, garlic, or lemon juice mixed with rose water, choose one of them, then apply to your reddish part of your face for a while. Do this continously and measured, then see the result. Below this, some good habits which may help you to get rid of acne scars naturally and fast are: first, drinking lots of water to makes your skin well hydrated, and finally make you skin regenerate faster.  Second, eat the food that containing much the essential vitamins and mineral to help repairing scars skin from the inside. Third, naturally treatment to get rid of acne scar, by applying aloe vera on scars, may help to avoid more scarring, soothe inflamation, and make your skin keep smooth. Fourth, treat your acne scars with natural ingredient, tomato. Its containing much vitamin A, which very efficient in repairing scars skin.  If you want to get rid of acne scars ons faster than naturally or home remedies treatments, using the latest product of technology, such as laser treatment and chemical peeling, or even you can choose microdermabration that guaranteed more effective than other treatments.

    Ada banyak bermacam permasalahan kulit di wajah, salah satu yang paling menggangu adalah jerawat, apalagi jika yang muncul adalah jerawat batu yang ukurannya besar dan menyebabkan rasa sakit. Solusi mengenai berbagai cara menghilangkan jerawat batu ini banyak sekali ditemukan, mulai dari pengobatan alami, maupun secara medis. Untuk kasus jerawat batu ini, sebaiknya anda bisa mengambil tindakan pengobatan yang tepat, untuk kasus jerawat batu disarankan langsung saja ambil perawatan medis, karena beresiko tinggi meninggalkan bekas berupa bopeng di wajah, jika salah menangani. Dengan langsung mengambil tindakan medis, setidaknya akan meminimalisasi resiko timbulnya scars bopeng di wajah yang mana scars jenis ini relatif sulit dihilangkan. Tidak seperti scars berupa noda/ flek hitam. meski tidak mudah juga, namun berkali-kali lipat jauh lebih mudah dan murah dibandingkan dengan mengatasi bopeng bekas jerawat. Perawatan alami yang dapat anda tempuh untuk mengobati jerawat ataupun scars yang berupa noda hitam/ flek bekas jerawat, anda dapat mencoba dengan menggunakan bahan alami misalnya jeruk nipis atau madu yang sudah sangat terkenal khasiatnya yang untuk kesehatan dan kecantikan kulit. Dengan perawatan alami, cenderung lebih aman, hanya saja untuk perawatan ini biasanya dibutuhkan waktu yang lebih lama serta ketelatenan untuk mengatasinya. FYI, Jeruk nipis ini yang tidak hanya dapat memudarkan flek hitam di wajah, tetapi juga dapat memutihkan dan mencerahkan kulit anda. Namun jika anda tidak memiliki cukup kesabaran, sebaiknya langsung saja konsultasi dengan dokter. Untuk menentukan metode pengobatan jerawat dan scars ini biasanya dokter akan melihat tingkat keparahan dari jerawat/ scars anda, bisa dengan pemberian obat minum seperti anti biotik, obat oles (salep), peeling, mikrodermabrasi, laser atau metode pengobatan lainnya. Namun sebelum anda memutuskan menggunakan salah satu treatment tersebut sebaiknya telah jelas terlebih dahulu mengenai efek samping yang ditimbulkan.

    Seiring dengan semakin tingginya pengguna internet dari waktu ke waktu, hal ini menciptakan peluang bisnis tersendiri. Diataranya peluang bejualan tas murah secara online, buatan konveksi-konveksi lokal. Di Bandung cukup banyak konveksi tas yang membuat beraneka macam tas dan dompet tiruan atau kw. Model-model dari tas wanita ini kebanyakan menjiplak tas dan dompet wanita dari brand terkenal luar negeri seperti merek-merek LV atau Louis Vuitton, Hermes, Chanel, Furla, dll yang sangat terkenal. Tas tiruan seperti ini familiar disebut tas replika/ kw, dengan beraneka tingkatanya: Kw I, Kw II, dll. Tas-tas wanita branded ini di Bee Bagshop dijual dengan harga yang bevariasi antara 66-300 ribuan. Pembelinya berasal dari kalangan anak SMA, anak kuliah, pekerja kantoran, serta ibu-ibu muda. Untuk tas sekolah dan kuliah anak, kebanyakan modelnya meniru model tas branded seperti kipling, dan jansport, dengan model tas punggung/ ransel ataupun model selempang. Untuk harga tas-tas branded kw dijual dengan harga yang jauh di bawah harga aslinya, sehingga bisa dipastikan kualitasnya pun berbeda dengan yang original. Di Bee Bagshop sendiri kisaran harga untuk tas jansport tiruan ini dijual dengan harga 60-80 ribuan, sementara harga barang original mungkin sekitar 800-900 ribuan, bahkan mungkin ada juga yang lebih mahal. Untuk tas ransel branded tiruan ini kebanyakan pembelinya berasal dari anak sekolah dan kuliah.

    Jika anda wanita yang terlalu sibuk bekerja, dan selalu bingung bahkan tidak sempat untuk sekedar memikirkan menu masakan sehari-hari untuk keluarga anda, silahkan kunjungi situs Aneka Resep dan Cara membuat Masakan Praktis Khas Indonesia, situs ini berisi kumpulan resep masakan yang menggunakan bahan-bahan umum seperti ayam, daging sapi, serta beraneka seafood (udang, cumi, ikan), dan juga bahan-bahan makanan yang tidak asing bagi  masyarakat Indonesia seperti tahu, tempe, serta nasi, . Selain itu ada juga resep cemilan khas nusantara, yang dapat anda jadikan inspirasi untuk menu masakan dan makanan ringan keluarga anda di rumah. Seperti resep membuat masakan khas suatu daerah seperti soto ayam lamongan, ataupun masakan khas lebaran seperti opor ayam, beraneka masakan berbahan dasar ayam ataupun bahan makanan lainnya, yang pastinya praktis dan mudah dibuat.

  • johnrichard

    Re: Windows 8 and the future of XAML Part 6: Tiles, toasts and badges


    posted by johnrichard on May 05, 2015 18:28
    Going to graduate school was a positive decision for me. I enjoyed the coursework, the presentations, the fellow students, and the professors. And since my company reimbursed 100% of the tuition, the only cost that I had to pay on my own was for books and supplies. Otherwise, I received a free master’s degree. All that I had to invest was my time. online advertising

Add Comment

Login to comment:
  *      *       

From this series