Adaptive Tile Templates - Schema and Documentation


Adaptive tile templates are a new feature in Windows 10, allowing you to easily specify content on your tile notifications without being limited to the preset templates we previously provided in the "tile template catalog". You can still use most of those legacy templates from the catalog (some like ImageCollection no longer work), but adaptive tile templates allow you to design your own tile notification content using a simple and flexible markup language that adapts to different densities.

This documentation includes features added in the Anniversary Update of Windows 10. You can view the archived documentation for Windows 10 Version 1511 (10586).

How to send a Tile notification?

Please read our Quickstart on sending local Tile notifications. The documentation on this page explains all the visual UI possibilities you have with Adaptive Tiles.

Install Notifications library

In order to generate notifications via C# instead of XML, install a NuGet package called Microsoft.Toolkit.Uwp.Notifications. Our C# samples seen on this page use this Notifications library.

Install Notifications Visualizer

Notifications Visualizer helps you design an adaptive live tile with instant visual previews, similar to Visual Studio's XAML editor/design view. For more info and to download the app, read this blog post.

Quick Sample

Here is an example that quickly shows the essence of Adaptive Tile Templates and the results they produce.

<tile>
  <visual>
 
    <binding template="TileMedium">
      ...
    </binding>
 
    <binding template="TileWide">
      <text hint-style="subtitle">Jennifer Parker</text>
      <text hint-style="captionSubtle">Photos from our trip</text>
      <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
    </binding>
 
    <binding template="TileLarge">
      ...
    </binding>
 
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = ...
 
        TileWide = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = "Jennifer Parker",
                        HintStyle = AdaptiveTextStyle.Subtitle
                    },
 
                    new AdaptiveText()
                    {
                        Text = "Photos from our trip",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    },
 
                    new AdaptiveText()
                    {
                        Text = "Check out these awesome photos I took while in New Zealand!",
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    }
                }
            }
        },
 
        TileLarge = ...
    }
};

auto tileContent = ref new TileContent();
auto tileVisual = ref new TileVisual();

tileVisual->TileMedium = ...

auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Jennifer Parker";
adaptiveText->HintStyle = AdaptiveTextStyle::Subtitle;
tileBindingContentAdaptive->Children->Append(adaptiveText);

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Photos from our trip";
adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
tileBindingContentAdaptive->Children->Append(adaptiveText);

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Check out these awesome photos I took while in New Zealand!";
adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;

tileVisual->TileWide = tileBinding;

tileVisual->TileLarge = ...

tileContent->Visual = tileVisual;
var notifLib = Microsoft.Toolkit.Uwp.Notifications;

var tileContent = new notifLib.TileContent();
var tileVisual = new notifLib.TileVisual();

tileVisual.tileMedium = ...

var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Jennifer Parker";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.subtitle;
tileBindingContentAdaptive.children.push(adaptiveText);

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Photos from our trip";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
tileBindingContentAdaptive.children.push(adaptiveText);

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Check out these awesome photos I took while in New Zealand!";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;

tileVisual.tileWide = tileBinding;

tileVisual.tileLarge = ...

tileContent.visual = tileVisual;

Schema

<tile>
  
  <!-- Child elements -->
  visual
  
</tile>
<visual
  lang? = string
  baseUri? = anyURI
  branding? = "none" | "logo" | "name" | "nameAndLogo"
  addImageQuery? = boolean
  contentId? = string
  displayName? = string
  arguments? = string (Added in 1607) >
    
  <!-- Child elements -->
  binding+
</visual>
<binding
  template = tileTemplateNameV3
  fallback? = tileTemplateNameV1
  lang? = string
  baseUri? = anyURI
  branding? = "none" | "logo" | "name" | "nameAndLogo"
  addImageQuery? = boolean
  contentId? = string
  displayName? = string
  hint-textStacking? = "top" | "center" | "bottom"
  hint-overlay? = [0-100]
  hint-presentation? = "photos" | "people" | "contact"
  hint-lockDetailedStatus1? = string
  hint-lockDetailedStatus2? = string
  hint-lockDetailedStatus3? = string
  arguments? = string (Added in 1607) >

  <!-- Child elements -->
  ( image
  | text
  | group
  )*
</binding>
<image
  src = string
  placement? = "inline" | "background" | "peek"
  alt? = string
  addImageQuery? = boolean
hint-crop? = "none" | "circle" (In 1511, this works for all image placements)
  hint-removeMargin? = boolean
  hint-align? = "stretch" | "left" | "center" | "right"
hint-overlay? = [0-100] (only applies to "background" or "peek" images) (Added in 1511) />
<text
  lang? = string
  hint-style? = textStyle
  hint-wrap? = boolean
  hint-maxLines? = integer
  hint-minLines? = integer
  hint-align? = "left" | "center" | "right" >
  <!-- text goes here -->
</text>
textStyle values...
  caption
  captionSubtle
  body
  bodySubtle
  base
  baseSubtle
  subtitle
  subtitleSubtle
  title
  titleSubtle
  titleNumeral
  subheader
  subheaderSubtle
  subheaderNumeral
  header
  headerSubtle
  headerNumeral
<group>
  <!-- Child elements -->
  subgroup+
</group>
<subgroup
  hint-weight? = [0-100]
  hint-textStacking? = "top" | "center" | "bottom" >
  <!-- Child elements -->
  ( text
  | image
  )*
</subgroup>

The Basics

Adaptive templates are semantic in nature, since they are meant to work across different form factors and different types of notifications. For example, elements like group and subgroup are used to semantically link content together – they do not imply a specific visual behavior on their own. The final appearance is up to the specific device – be it a phone/desktop/Xbox, HoloLens, or smartwatch, and the type of notification – tile or toast.

Hints are optional attributes that can be added to elements in order to achieve a specific visual behavior. Some hints might be device-specific or notification-specific, hence why they are optional.

The Templates (Tile Sizes)

Content for each tile size is individually specified in separate <binding> elements within the XML payload. The size you are targeting is specified by setting the template attribute to one of the following values…

  • TileSmall
  • TileMedium
  • TileWide
  • TileLarge (desktop only)

In a single tile notification XML payload, you should provide <binding> elements for each tile size you choose to support, as shown by the example below.

<tile>
  <visual>
 
    <binding template="TileSmall">
      <text>Small</text>
    </binding>
 
    <binding template="TileMedium">
      <text>Medium</text>
    </binding>
 
    <binding template="TileWide">
      <text>Wide</text>
    </binding>
 
    <binding template="TileLarge">
      <text>Large</text>
    </binding>
 
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileSmall = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Small" }
                }
            }
        },
 
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Medium" }
                }
            }
        },
 
        TileWide = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Wide" }
                }
            }
        },
 
        TileLarge = new TileBinding()
        {
            Content = new TileBindingContentAdaptive()
            {
                Children =
                {
                    new AdaptiveText() { Text = "Large" }
                }
            }
        }
    }
};

auto tileContent = ref new TileContent();
auto tileVisual = ref new TileVisual();
auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Small";
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;

tileVisual->TileSmall = tileBinding;

tileBinding = ref new TileBinding();
tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Medium";
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;

tileVisual->TileMedium = tileBinding;

tileBinding = ref new TileBinding();
tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Wide";
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;

tileVisual->TileWide = tileBinding;

tileBinding = ref new TileBinding();
tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Large";
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;

tileVisual->TileLarge = tileBinding;

tileContent->Visual = tileVisual;

var notifLib = Microsoft.Toolkit.Uwp.Notifications;

var tileContent = new notifLib.TileContent();
var tileVisual = new notifLib.TileVisual();
var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Small";
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;

tileVisual.tileSmall = tileBinding;

tileBinding = new notifLib.TileBinding();
tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Medium";
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;

tileVisual.tileMedium = tileBinding;

tileBinding = new notifLib.TileBinding();
tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Wide";
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;

tileVisual.tileWide = tileBinding;

tileBinding = new notifLib.TileBinding();
tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Large";
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;

tileVisual.tileLarge = tileBinding;

tileContent.visual = tileVisual;

Branding

While a notification is being displayed, you can control the branding on the bottom of the live tile (display name and corner logo) via the branding attribute on the notification payload. You can choose to have “none” displayed, just the “name”, just the “logo”, or both “nameAndLogo”.

Note: Mobile does not support the corner logo. On builds 14273 and newer, "logo" will fall back to "name" (on older builds it will display a blank branding bar), and "nameAndLogo" will simply become "name" on Mobile.

<visual branding="logo">
  ...
</visual>

new TileVisual()
{
    Branding = TileBranding.Logo,
    ...
}

auto tileVisual = ref new TileVisual();
tileVisual->Branding = TileBranding::Logo;
var tileVisual = new notifLib.TileVisual();
tileVisual.branding = notifLib.TileBranding.logo;
none name logo (Desktop) nameAndLogo (Desktop)

Branding can be specified for specific tile sizes by applying the attribute on the <binding> element, or it can be specified for the entire notification payload by applying the attribute on the <visual> element. If a binding doesn’t have branding specified, it will use the branding provided on the visual element (if provided).

<tile>
  <visual branding="nameAndLogo">
    <binding template="TileMedium" branding="logo">
      ...
    </binding>

    <!--Inherits branding from visual-->
    <binding template="TileWide">
      ...
    </binding>
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        Branding = TileBranding.NameAndLogo,

        TileMedium = new TileBinding()
        {
            Branding = TileBranding.Logo,
            ...
        },

        // Inherits branding from Visual
        TileWide = new TileBinding()
        {
            ...
        }
    }
};

auto tileContent = ref new TileContent();
auto tileVisual = ref new TileVisual();
tileVisual->Branding = TileBranding::NameAndLogo;

auto tileBinding = ref new TileBinding();
tileBinding->Branding = TileBranding::Logo;
tileVisual->TileMedium = tileBinding;

// Inherits branding from Visual
tileBinding = ref new TileBinding();
tileVisual->TileWide = tileBinding;

tileContent->Visual = tileVisual;
var tileContent = new notifLib.TileContent();
var tileVisual = new notifLib.TileVisual();
tileVisual.branding = notifLib.TileBranding.nameAndLogo;

var tileBinding = new notifLib.TileBinding();
tileBinding.branding = notifLib.TileBranding.logo;
tileVisual.tileMedium = tileBinding;

// Inherits branding from Visual
tileBinding = new notifLib.TileBinding();
tileVisual.tileWide = tileBinding;

tileContent.visual = tileVisual;

If your notification payload doesn’t specify branding, the branding will be determined from the base tile’s properties. If the display name is shown on the base tile, then the branding will default to “name”. Otherwise, if the display name isn’t shown, the branding will default to “none”.

Note: This is a change from Windows 8, where by default, branding was always “logo”.

ShowName Base Tile   Default Branding
false after notification ->
true

Display name

Additionally, notifications can override the display name while the notification is being shown. Use the displayName attribute to specify a string of your choice. Just like branding, this can be specified on the <visual> element, or for each individual tile size on the <binding> element.

Known Issue: On Windows Mobile, if you specify a ShortName for your Tile, the display name provided in your notification will not be used (the ShortName will always be displayed).

<tile>
  <visual branding="nameAndLogo" displayName="Wednesday 22">
    <binding template="TileMedium" displayName="Wed. 22">
      ...
    </binding>

    <!--Inherits displayName from visual-->
    <binding template="TileWide">
      ...
    </binding>
  </visual>
</tile>

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        Branding = TileBranding.NameAndLogo,
        DisplayName = "Wednesday 22",
        TileMedium = new TileBinding()
        {
            DisplayName = "Wed. 22",
            ...
        },
        // Inherits DisplayName from Visual
        TileWide = new TileBinding()
        {
            ...
        }
    }
};

auto tileContent = ref new TileContent();
auto tileVisual = ref new TileVisual();
tileVisual->DisplayName = "Wednesday 22";
tileVisual->Branding = TileBranding::NameAndLogo;

auto tileBinding = ref new TileBinding();
tileBinding->DisplayName = "Wed. 22";
tileVisual->TileMedium = tileBinding;

// Inherits DisplayName from Visual
tileBinding = ref new TileBinding();
tileVisual->TileWide = tileBinding;

tileContent->Visual = tileVisual;
var tileContent = new notifLib.TileContent();
var tileVisual = new notifLib.TileVisual();
tileVisual.displayName = "Wednesday 22";
tileVisual.branding = notifLib.TileBranding.nameAndLogo;

var tileBinding = new notifLib.TileBinding();
tileBinding.displayName = "Wed. 22";
tileVisual.tileMedium = tileBinding;

// Inherits DisplayName from Visual
tileBinding = new notifLib.TileBinding();
tileVisual.tileWide = tileBinding;

tileContent.visual = tileVisual;
Base tile Notification overriding display name

Text

The text element is used to display text. Its usage is quite simple, but the appearance of the text can be modified in a number of different ways using hints.

<text>This is a line of text</text>
new AdaptiveText()
{
    Text = "This is a line of text"
};

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "This is a line of text";
var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "This is a line of text";

Text Wrapping

Use the hint-wrap attribute to set text wrapping on a text element. By default, text does not wrap and will continue off the edge of the tile. You can also control the minimum and maximum amount of lines with hint-minLines and hint-maxLines (which both accept positive integers).

<text hint-wrap="true">This is a line of wrapping text</text>
new AdaptiveText()
{
    Text = "This is a line of wrapping text",
    HintWrap = true
};

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "This is a line of wrapping text";
adaptiveText->HintWrap = true;
var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "This is a line of wrapping text";
adaptiveText.hintWrap = true;

Text Styles

Styles control the font size, color, and weight of text elements. There are a number of available styles, including a “Subtle” version of each style, which simply sets the opacity to 60% (usually resulting in a more gray color instead of white).

<text hint-style="base">Header content</text>
<text hint-style="captionSubtle">Subheader content</text>

new AdaptiveText()
{
    Text = "Header content",
    HintStyle = AdaptiveTextStyle.Base
},
new AdaptiveText()
{
    Text = "Subheader content",
    HintStyle = AdaptiveTextStyle.CaptionSubtle
}

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Header content";
adaptiveText->HintStyle = AdaptiveTextStyle::Base;

auto adaptiveText2 = ref new AdaptiveText();
adaptiveText2->Text = "Subheader content";
adaptiveText2->HintStyle = AdaptiveTextStyle::CaptionSubtle;
var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Header content";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.base;

var adaptiveText2 = new notifLib.AdaptiveText();
adaptiveText2.text = "Subheader content";
adaptiveText2.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;

Note: if hint-style is not specified, the style defaults to caption.

Basic Text Styles

<text hint-style="*" /> Font Height Weight
caption 12 epx Regular
body 15 epx Regular
base 15 epx SemiBold
subtitle 20 epx Regular
title 24 epx Semilight
subheader 34 epx Light
header 46 epx Light

Numeral Text Style Variations

These variations reduce the line height so that content above and below come extremely close to the text.

titleNumeral
subheaderNumeral
headerNumeral

Subtle Text Style Variations

There is a subtle variation of every style previously mentioned, which simply makes the text 60% opaque, typically resulting in text that is more gray than white.

captionSubtle
bodySubtle
baseSubtle
subtitleSubtle
titleSubtle
titleNumeralSubtle
subheaderSubtle
subheaderNumeralSubtle
headerSubtle
headerNumeralSubtle

Text Alignment

Text can be horizontally aligned left, center, or right. In left-to-right languages like English, text defaults to left-aligned. In right-to-left languages like Arabic, text defaults to right-aligned. You can manually set alignment with the hint-align attribute on elements.

<text hint-align="center">Hello</text>
new AdaptiveText()
{
    Text = "Hello",
    HintAlign = AdaptiveTextAlign.Center
};

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Hello";
adaptiveText->HintAlign = AdaptiveTextAlign::Center;
var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Hello";
adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
left center right

Groups and Subgroups

Groups allow you to semantically declare that the content inside the group is related and must be displayed in its entirety for the content to make sense. For example, you might have two text elements, a header and a subheader, and it would not make sense for only the header to be shown. By placing those elements inside a subgroup in a group, the elements will either all be displayed (if they can fit) or not displayed at all (since not all could fit).

These groups allow your tile to adapt to larger screens, where each tile can fit more content. For example, say your tile displays new emails. On small-screen phones, the live tiles themselves are smaller, and therefore only one email can fit on the live tile. However, on large-screen phones, two emails can fit on the live tile. Thus, to provide the best experience, you should provide multiple groups.

Note: the only valid child of a group is a subgroup. Hence, you must place your content inside a subgroup in a group.

...
<binding template="TileMedium" branding="nameAndLogo">
  <group>
    <subgroup>
      <text hint-style="subtitle">Jennifer Parker</text>
      <text hint-style="captionSubtle">Photos from our trip</text>
      <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
    </subgroup>
  </group>
  <text />
  <group>
    <subgroup>
      <text hint-style="subtitle">Steve Bosniak</text>
      <text hint-style="captionSubtle">Build 2015 Dinner</text>
      <text hint-style="captionSubtle">Want to go out for dinner after Build tonight?</text>
    </subgroup>
  </group>
</binding>
...

...
TileMedium = new TileBinding()
{
    Branding = TileBranding.NameAndLogo,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            CreateGroup(
                from: "Jennifer Parker",
                subject: "Photos from our trip",
                body: "Check out these awesome photos I took while in New Zealand!"),
            // For spacing
            new AdaptiveText(),
            CreateGroup(
                from: "Steve Bosniak",
                subject: "Build 2015 Dinner",
                body: "Want to go out for dinner after Build tonight?")
        }
    }
}
...
private static AdaptiveGroup CreateGroup(string from, string subject, string body)
{
    return new AdaptiveGroup()
    {
        Children =
        {
            new AdaptiveSubgroup()
            {
                Children =
                {
                    new AdaptiveText()
                    {
                        Text = from,
                        HintStyle = AdaptiveTextStyle.Subtitle
                    },
                    new AdaptiveText()
                    {
                        Text = subject,
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    },
                    new AdaptiveText()
                    {
                        Text = body,
                        HintStyle = AdaptiveTextStyle.CaptionSubtle
                    }
                }
            }
        }
    };
}

auto tileBinding = ref new TileBinding();
tileBinding->Branding = TileBranding::NameAndLogo;

auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

tileBindingContentAdaptive->Children->Append(CreateGroup(
    "Jennifer Parker",
    "Photos from our trip",
    "Check out these awesome photos I took while in New Zealand!");

tileBindingContentAdaptive->Children->Append(CreateGroup(
    "Steve Bosniak",
    "Build 2015 Dinner",
    "Want to go out for dinner after Build tonight?"));

tileBinding->Content = tileBindingContentAdaptive;


AdaptiveGroup^ MyClass::CreateGroup(String^ from, String^ subject, String^ body)
{
    auto adaptiveGroup = ref new AdaptiveGroup();

    auto adaptiveSubgroup = ref new AdaptiveSubgroup();

    auto adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = from;
    adaptiveText->HintStyle = AdaptiveTextStyle::Subtitle;
    adaptiveSubgroup->Children->Append(adaptiveText);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = subject;
    adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
    adaptiveSubgroup->Children->Append(adaptiveText);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = body;
    adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
    adaptiveSubgroup->Children->Append(adaptiveText);

    adaptiveGroup->Children->Append(adaptiveSubgroup);

    return adaptiveGroup;
}
var tileBinding = new notifLib.TileBinding();
tileBinding.branding = notifLib.TileBranding.nameAndLogo;

var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

tileBindingContentAdaptive.children.push(CreateGroup(
    "Jennifer Parker",
    "Photos from our trip",
    "Check out these awesome photos I took while in New Zealand!"));

tileBindingContentAdaptive.children.push(CreateGroup(
    "Steve Bosniak",
    "Build 2015 Dinner",
    "Want to go out for dinner after Build tonight?"));

tileBinding.content = tileBindingContentAdaptive;


function CreateGroup(from, subject, body) {
    var adaptiveGroup = new notifLib.AdaptiveGroup();
    var adaptiveSubgroup = new notifLib.AdaptiveSubgroup();

    var adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = from;
    adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.subtitle;
    adaptiveSubgroup.children.push(adaptiveText);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = subject;
    adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
    adaptiveSubgroup.children.push(adaptiveText);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = body;
    adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
    adaptiveSubgroup.children.push(adaptiveText);

    adaptiveGroup.children.push(adaptiveSubgroup);
    return adaptiveGroup;
}
Desktop Tablet High-Density Mobile

Subgroups (columns)

Subgroups also allow you to divide data into semantic sections within a group. For live tiles, this visually translates to columns.

The hint-weight attribute allows you to control the widths of columns. The value of hint-weight is expressed as a weighted proportion of available space. This is identical to GridUnitType.Star behavior. For equal width columns, simply assign each weight to 1.

hint-weight Percent of Width
1 25% (1/4)
1 25% (1/4)
1 25% (1/4)
1 25% (1/4)
Total Weight: 4

To get one column twice as large as another, assign one column a weight of 1, and the desired larger column a weight of 2.

hint-weight Percent of Width
1 33.3% (1/3)
2 66.7% (2/3)
Total Weight: 3

If you want your first column to take up 20% of the width, and your second column to take up 75% of the width, assign the first weight to be 25 and the second weight to be 75. As long as your weights sum to 100, they will essentially be percentages.

hint-weight Percent of Width
20 20% (20/100)
80 80% (80/100)
Total Weight: 100

Note: an 8 px margin is added between columns.

For subgroups of more than two, you typically should set hint-weight (which accepts positive integers). If the very first subgroup does not have hint-weight specified, it will be assigned a weight of 50. The next subgroup that does not have a hint-weight specified will be assigned a weight equal to 100 minus the sum of the preceding weights, or 1 if the result is zero. Remaining subgroups without hint-weight specified will be assigned a weight of 1.

Here is a sample showing how you would achieve a tile with five columns of equal width, such as a weather tile displaying a five-day forecast.

...
<binding template="TileWide" displayName="Seattle" branding="name">
  <group>
    <subgroup hint-weight="1">
      <text hint-align="center">Mon</text>
      <image src="Assets\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-align="center" hint-style="captionsubtle">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Tue</text>
      <image src="Assets\Weather\Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">57°</text>
      <text hint-align="center" hint-style="captionsubtle">38°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Wed</text>
      <image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
      <text hint-align="center">59°</text>
      <text hint-align="center" hint-style="captionsubtle">43°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Thu</text>
      <image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
      <text hint-align="center">62°</text>
      <text hint-align="center" hint-style="captionsubtle">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
      <text hint-align="center">Fri</text>
      <image src="Assets\Weather\Sunny.png" hint-removeMargin="true"/>
      <text hint-align="center">71°</text>
      <text hint-align="center" hint-style="captionsubtle">66°</text>
    </subgroup>
  </group>
</binding>
...

...
TileWide = new TileBinding()
{
    DisplayName = "Seattle",
    Branding = TileBranding.Name,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"),
                    CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"),
                    CreateSubgroup("Wed", "Sunny.png", "59°", "43°"),
                    CreateSubgroup("Thu", "Sunny.png", "62°", "42°"),
                    CreateSubgroup("Fri", "Sunny.png", "71°", "66°")
                }
            }
        }
    }
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        HintWeight = 1,
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Weather/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

auto tileBinding = ref new TileBinding();
tileBinding->Branding = TileBranding::Name;
tileBinding->DisplayName = "Seattle";
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto adaptiveGroup = ref new AdaptiveGroup();
adaptiveGroup->Children->Append(CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"));
adaptiveGroup->Children->Append(CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"));
adaptiveGroup->Children->Append(CreateSubgroup("Wed", "Sunny.png", "59°", "43°"));
adaptiveGroup->Children->Append(CreateSubgroup("Thu", "Sunny.png", "62°", "42°"));
adaptiveGroup->Children->Append(CreateSubgroup("Fri", "Sunny.png", "71°", "66°"));

tileBindingContentAdaptive->Children->Append(adaptiveGroup);
tileBinding->Content = tileBindingContentAdaptive;


AdaptiveSubgroup^ MyClass::CreateSubgroup(String^ day, String^ image, String^ highTemp, String^ lowTemp)
{
    auto adaptiveSubgroup = ref new AdaptiveSubgroup();
    adaptiveSubgroup->HintWeight = 1;

    auto adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = day;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    auto adaptiveImage = ref new AdaptiveImage();
    adaptiveImage->HintRemoveMargin = true;
    adaptiveImage->Source = image;
    adaptiveSubgroup->Children->Append(adaptiveImage);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = highTemp;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = lowTemp;
    adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    return adaptiveSubgroup;
}
var tileBinding = new notifLib.TileBinding();
tileBinding.branding = notifLib.TileBranding.name;
tileBinding.displayName = "Seattle";
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var adaptiveGroup = new notifLib.AdaptiveGroup();
adaptiveGroup.children.push(CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"));
adaptiveGroup.children.push(CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"));
adaptiveGroup.children.push(CreateSubgroup("Wed", "Sunny.png", "59°", "43°"));
adaptiveGroup.children.push(CreateSubgroup("Thu", "Sunny.png", "62°", "42°"));
adaptiveGroup.children.push(CreateSubgroup("Fri", "Sunny.png", "71°", "66°"));

tileBindingContentAdaptive.children.push(adaptiveGroup);
tileBinding.content = tileBindingContentAdaptive;


function CreateSubgroup(day, image, highTemp, lowTemp) {
    var adaptiveSubgroup = new notifLib.AdaptiveSubgroup();
    adaptiveSubgroup.hintWeight = 1;

    var adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = day;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    var adaptiveImage = new notifLib.AdaptiveImage();
    adaptiveImage.hintRemoveMargin = true;
    adaptiveImage.source = image;
    adaptiveSubgroup.children.push(adaptiveImage);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = highTemp;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = lowTemp;
    adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    return adaptiveSubgroup;
}

Images

The <image> element is used to display images on the tile notification. Images can be placed inline within the tile content (default), as a background image behind your content, or as a peek image that animates in from the top of the notification.

Note: There are restrictions on the file size and dimensions of images.

Without any extra behaviors specified, images will uniformly shrink/expand to fill the available width. The example below shows a tile using two columns and inline images. The inline images stretch to fill the width of the column.

...
<binding template="TileMedium" displayName="Seattle" branding="name">
  <group>
    <subgroup>
      <text hint-align="center">Mon</text>
      <image src="Assets\Apps\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-style="captionsubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup>
      <text hint-align="center">Tue</text>
      <image src="Assets\Apps\Weather\Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">57°</text>
      <text hint-style="captionSubtle" hint-align="center">38°</text>
    </subgroup>
  </group>
</binding>
...

...
TileMedium = new TileBinding()
{
    DisplayName = "Seattle",
    Branding = TileBranding.Name,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"),
                    CreateSubgroup("Tue", "Cloudy.png", "57°", "38°")
                }
            }
        }
    }
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Weather/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

auto tileBinding = ref new TileBinding();
tileBinding->Branding = TileBranding::Name;
tileBinding->DisplayName = "Seattle";
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto adaptiveGroup = ref new AdaptiveGroup();
adaptiveGroup->Children->Append(CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"));
adaptiveGroup->Children->Append(CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"));

tileBindingContentAdaptive->Children->Append(adaptiveGroup);
tileBinding->Content = tileBindingContentAdaptive;


AdaptiveSubgroup^ MyClass::CreateSubgroup(String^ day, String^ image, String^ highTemp, String^ lowTemp)
{
    auto adaptiveSubgroup = ref new AdaptiveSubgroup();
    adaptiveSubgroup->HintWeight = 1;

    auto adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = day;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    auto adaptiveImage = ref new AdaptiveImage();
    adaptiveImage->HintRemoveMargin = true;
    adaptiveImage->Source = image;
    adaptiveSubgroup->Children->Append(adaptiveImage);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = highTemp;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = lowTemp;
    adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    return adaptiveSubgroup;
}
var tileBinding = new notifLib.TileBinding();
tileBinding.branding = notifLib.TileBranding.name;
tileBinding.displayName = "Seattle";
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var adaptiveGroup = new notifLib.AdaptiveGroup();
adaptiveGroup.children.push(CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°"));
adaptiveGroup.children.push(CreateSubgroup("Tue", "Cloudy.png", "57°", "38°"));

tileBindingContentAdaptive.children.push(adaptiveGroup);
tileBinding.content = tileBindingContentAdaptive;


function CreateSubgroup(day, image, highTemp, lowTemp) {
    var adaptiveSubgroup = new notifLib.AdaptiveSubgroup();
    adaptiveSubgroup.hintWeight = 1;

    var adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = day;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    var adaptiveImage = new notifLib.AdaptiveImage();
    adaptiveImage.hintRemoveMargin = true;
    adaptiveImage.source = image;
    adaptiveSubgroup.children.push(adaptiveImage);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = highTemp;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = lowTemp;
    adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    return adaptiveSubgroup;
}

Images placed in the <binding> root, or in the first group, will also stretch to fit available height.

Image Alignment

Images can be set to align left, center, or right, using the hint-align attribute. This will also cause images to display at their native resolution instead of stretching to fill width.

<image src="Assets/fable.jpg" hint-align="center"/>
new AdaptiveImage()
{
    Source = "Assets/fable.jpg",
    HintAlign = AdaptiveImageAlign.Center
}
auto adaptiveImage = ref new AdaptiveImage();
adaptiveImage->HintAlign = AdaptiveImageAlign::Center;
adaptiveImage->Source = "Assets/fable.jpg";
var adaptiveImage = new notifLib.AdaptiveImage();
adaptiveImage.hintAlign = notifLib.AdaptiveImageAlign.center;
adaptiveImage.source = "Assets/fable.jpg";
left center right

Image Margins

By default, inline images have an 8px margin between any content above or below the image. However, this margin can be removed by using the hint-removeMargin attribute on the image.

Note that inline images will always have the 8px margin from the edge of the tile, and subgroups (columns) will always have the 8px padding between columns.

...
<binding template="TileMedium" branding="none">
  <group>
    <subgroup>
      <text hint-align="center">Mon</text>
      <image src="Assets\Numbers\4.jpg" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-style="captionsubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup>
      <text hint-align="center">Tue</text>
      <image src="Assets\Numbers\3.jpg" hint-removeMargin="true"/>
      <text hint-align="center">57°</text>
      <text hint-style="captionsubtle" hint-align="center">38°</text>
    </subgroup>
  </group>
</binding>
...

...
TileMedium = new TileBinding()
{
    Branding = TileBranding.None,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "4.jpg", "63°", "42°"),
                    CreateSubgroup("Tue", "3.jpg", "57°", "38°")
                }
            }
        }
    }
}
...
private static AdaptiveSubgroup CreateSubgroup(string day, string image, string highTemp, string lowTemp)
{
    return new AdaptiveSubgroup()
    {
        HintWeight = 1,
        Children =
        {
            new AdaptiveText()
            {
                Text = day,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveImage()
            {
                Source = "Assets/Numbers/" + image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

auto tileBinding = ref new TileBinding();
tileBinding->Branding = TileBranding::None;
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto adaptiveGroup = ref new AdaptiveGroup();
adaptiveGroup->Children->Append(CreateSubgroup("Mon", "4.jpg", "63°", "42°"));
adaptiveGroup->Children->Append(CreateSubgroup("Tue", "3.jpg", "57°", "38°"));

tileBindingContentAdaptive->Children->Append(adaptiveGroup);
tileBinding->Content = tileBindingContentAdaptive;


AdaptiveSubgroup^ MyClass::CreateSubgroup(String^ day, String^ image, String^ highTemp, String^ lowTemp)
{
    auto adaptiveSubgroup = ref new AdaptiveSubgroup();
    adaptiveSubgroup->HintWeight = 1;

    auto adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = day;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    auto adaptiveImage = ref new AdaptiveImage();
    adaptiveImage->HintRemoveMargin = true;
    adaptiveImage->Source = "Assets/Numbers/" + image;
    adaptiveSubgroup->Children->Append(adaptiveImage);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = highTemp;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    adaptiveText = ref new AdaptiveText();
    adaptiveText->Text = lowTemp;
    adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
    adaptiveText->HintAlign = AdaptiveTextAlign::Center;
    adaptiveSubgroup->Children->Append(adaptiveText);

    return adaptiveSubgroup;
}
var tileBinding = new notifLib.TileBinding();
tileBinding.branding = notifLib.TileBranding.none;
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var adaptiveGroup = new notifLib.AdaptiveGroup();
adaptiveGroup.children.push(CreateSubgroup("Mon", "4.jpg", "63°", "42°"));
adaptiveGroup.children.push(CreateSubgroup("Tue", "3.jpg", "57°", "38°"));

tileBindingContentAdaptive.children.push(adaptiveGroup);
tileBinding.content = tileBindingContentAdaptive;


function CreateSubgroup(day, image, highTemp, lowTemp) {
    var adaptiveSubgroup = new notifLib.AdaptiveSubgroup();
    adaptiveSubgroup.hintWeight = 1;

    var adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = day;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    var adaptiveImage = new notifLib.AdaptiveImage();
    adaptiveImage.hintRemoveMargin = true;
    adaptiveImage.source = "Assets/Numbers/" + image;
    adaptiveSubgroup.children.push(adaptiveImage);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = highTemp;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    adaptiveText = new notifLib.AdaptiveText();
    adaptiveText.text = lowTemp;
    adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
    adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
    adaptiveSubgroup.children.push(adaptiveText);

    return adaptiveSubgroup;
}
hint-removeMargin
false true

Image Cropping

Images can be cropped into a circle using the hint-crop attribute, which currently only supports the values “none” (default) or “circle”. In 1511, background and peek images also support the hint-crop attribute.

...
<binding template="TileLarge" hint-textStacking="center">
  <group>
    <subgroup hint-weight="1"/>
    <subgroup hint-weight="2">
      <image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
    </subgroup>
    <subgroup hint-weight="1"/>
  </group>
  <text hint-style="title" hint-align="center">Hi,</text>
  <text hint-style="subtitleSubtle" hint-align="center">MasterHip</text>
</binding>
...

...
TileLarge = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        TextStacking = TileTextStacking.Center,
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    new AdaptiveSubgroup() { HintWeight = 1 },
                    new AdaptiveSubgroup()
                    {
                        HintWeight = 2,
                        Children =
                        {
                            new AdaptiveImage()
                            {
                                Source = "Assets/Apps/Hipstame/hipster.jpg",
                                HintCrop = AdaptiveImageCrop.Circle
                            }
                        }
                    },
                    new AdaptiveSubgroup() { HintWeight = 1 }
                }
            },
            new AdaptiveText()
            {
                Text = "Hi,",
                HintStyle = AdaptiveTextStyle.Title,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = "MasterHip",
                HintStyle = AdaptiveTextStyle.SubtitleSubtle,
                HintAlign = AdaptiveTextAlign.Center
            }
        }
    }
}
...

auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();
tileBindingContentAdaptive->TextStacking = TileTextStacking::Center;

auto adaptiveGroup = ref new AdaptiveGroup();

auto adaptiveSubgroup = ref new AdaptiveSubgroup();
adaptiveGroup->Children->Append(adaptiveSubgroup);

adaptiveSubgroup = ref new AdaptiveSubgroup();

auto adaptiveImage = ref new AdaptiveImage();
adaptiveImage->HintCrop = AdaptiveImageCrop::Circle;
adaptiveImage->Source = "Assets/Apps/Hipstame/hipster.jpg";
adaptiveSubgroup->Children->Append(adaptiveImage);

adaptiveGroup->Children->Append(adaptiveSubgroup);

adaptiveSubgroup = ref new AdaptiveSubgroup();
adaptiveGroup->Children->Append(adaptiveSubgroup);

tileBindingContentAdaptive->Children->Append(adaptiveGroup);

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Hi,";
adaptiveText->HintStyle = AdaptiveTextStyle::Title;
adaptiveText->HintAlign = AdaptiveTextAlign::Center;
tileBindingContentAdaptive->Children->Append(adaptiveText);

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "MasterHip";
adaptiveText->HintStyle = AdaptiveTextStyle::SubtitleSubtle;
adaptiveText->HintAlign = AdaptiveTextAlign::Center;
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;
var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();
tileBindingContentAdaptive.textStacking = notifLib.TileTextStacking.center;

var adaptiveGroup = new notifLib.AdaptiveGroup();

var adaptiveSubgroup = new notifLib.AdaptiveSubgroup();
adaptiveGroup.children.push(adaptiveSubgroup);

adaptiveSubgroup = new notifLib.AdaptiveSubgroup();

var adaptiveImage = new notifLib.AdaptiveImage();
adaptiveImage.hintCrop = notifLib.AdaptiveImageCrop.circle;
adaptiveImage.source = "Assets/Apps/Hipstame/hipster.jpg";
adaptiveSubgroup.children.push(adaptiveImage);

adaptiveGroup.children.push(adaptiveSubgroup);

adaptiveSubgroup = new notifLib.AdaptiveSubgroup();
adaptiveGroup.children.push(adaptiveSubgroup);

tileBindingContentAdaptive.children.push(adaptiveGroup);

var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Hi,";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.title;
adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
tileBindingContentAdaptive.children.push(adaptiveText);

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "MasterHip";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.subtitleSubtle;
adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;

tileVisual.tileLarge = tileBinding;

Background Image

To set a background image, place an image element in the root of the <binding> and set the placement attribute to “background”.

...
<binding template="TileWide">
  <image src="Assets\Mostly Cloudy-Background.jpg" placement="background"/>
  <group>
    <subgroup hint-weight="1">
      <text hint-align="center">Mon</text>
      <image src="Assets\Weather\Mostly Cloudy.png" hint-removeMargin="true"/>
      <text hint-align="center">63°</text>
      <text hint-align="center" hint-style="captionsubtle">42°</text>
    </subgroup>
    ...
  </group>
</binding>
...

...
TileWide = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        BackgroundImage = new TileBackgroundImage()
        {
            Source = "Assets/Mostly Cloudy-Background.jpg"
        },
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    CreateSubgroup("Mon", "Mostly Cloudy.png", "63°", "42°")
                    ...
                }
            }
        }
    }
}

auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto tileBackgroundImage = ref new TileBackgroundImage();
tileBackgroundImage->Source = "Assets\Mostly Cloudy-Background.jpg";
tileBindingContentAdaptive->BackgroundImage = tileBackgroundImage;

...

tileBinding->Content = tileBindingContentAdaptive;
var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var tileBackgroundImage = new notifLib.TileBackgroundImage();
tileBackgroundImage.source = "Assets\Mostly Cloudy-Background.jpg";
tileBindingContentAdaptive.backgroundImage = tileBackgroundImage;

...

tileBinding.content = tileBindingContentAdaptive;

Peek Image

You can specify an image that “peeks” in from the top of the tile. The peek image uses an animation to slide down/up from the top of the tile, “peeking” into view, and then later sliding back out to reveal the main content on the tile.

To set a peek image, place an image element in the root of the <binding>, and set the placement attribute to “peek”.

...
<binding template="TileMedium">
  <image placement="peek" src="Assets/Apps/Hipstame/hipster.jpg"/>
  <text>New Message</text>
  <text hint-style="captionsubtle" hint-wrap="true">Hey, have you tried Windows 10 yet?</text>
</binding>
...

...
TileWide = new TileBinding()
{
    Content = new TileBindingContentAdaptive()
    {
        PeekImage = new TilePeekImage()
        {
            Source = "Assets/Apps/Hipstame/hipster.jpg"
        },
        Children =
        {
            new AdaptiveText()
            {
                Text = "New Message"
            },
            new AdaptiveText()
            {
                Text = "Hey, have you tried Windows 10 yet?",
                HintStyle = AdaptiveTextStyle.CaptionSubtle,
                HintWrap = true
            }
        }
    }
}
...

auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto tilePeekImage = ref new TilePeekImage();
tilePeekImage->Source = "Assets/Apps/Hipstame/hipster.jpg";
tileBindingContentAdaptive->PeekImage = tilePeekImage;

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "New Message";
tileBindingContentAdaptive->Children->Append(adaptiveText);

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Hey, have you tried Windows 10 yet?";
adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
adaptiveText->HintWrap = true;
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;
var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var tilePeekImage = new notifLib.TilePeekImage();
tilePeekImage.source = "Assets/Apps/Hipstame/hipster.jpg";
tileBindingContentAdaptive.peekImage = tilePeekImage;

var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "New Message";
tileBindingContentAdaptive.children.push(adaptiveText);

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Hey, have you tried Windows 10 yet?";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
adaptiveText.hintWrap = true;
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;
Animated Peek shown Peek sliding up Content shown Peek sliding down

Peek and Background Image Overlays

In order to make text that appears on top of images more readable, you can set an overlay. Before 1511, we only allowed overlays on background images, but now we support overlays on both background and peek images.

Setting overlay on background image

Your background image will default to a 20% overlay as long as you have some text elements in your payload (otherwise it will default to 0% overlay). If you're on 1511, you can specify hint-overlay on the background image element itself.

...
<binding template="TileWide" hint-overlay="60">
  <image src="Assets\Mostly Cloudy-Background.jpg" placement="background"/>
  ...
</binding>
...

new TileBackgroundImage()
{
    Source = "Assets/Mostly Cloudy-Background.jpg",
    HintOverlay = 60
}

auto tileBackgroundImage = ref new TileBackgroundImage();
tileBackgroundImage->Source = "Assets\Mostly Cloudy-Background.jpg";
tileBackgroundImage->HintOverlay = 60;
var tileBackgroundImage = new notifLib.TileBackgroundImage();
tileBackgroundImage.source = "Assets\Mostly Cloudy-Background.jpg";
tileBackgroundImage.hintOverlay = 60;
hint-overlay Result
0
20
60
100

Setting overlay on peek image

In 1511, we allow you to specify an overlay for your peek image, just like your background image. Specify hint-overlay on the peek image element as an integer from 0-100. The default overlay for peek images is 0 (no overlay).

...
<binding template="TileMedium">
  <image hint-overlay="20" src="Assets\Map.jpg" placement="peek"/>
  ...
</binding>
...

new TilePeekImage()
{
    Source = "Assets/Map.jpg",
    HintOverlay = 20
}

auto tilePeekImage = ref new TilePeekImage();
tilePeekImage->Source = "Assets\Map.jpg";
tilePeekImage->HintOverlay = 20;
var tilePeekImage = new notifLib.TilePeekImage();
tilePeekImage.source = "Assets\Map.jpg";
tilePeekImage.hintOverlay = 20;
With 20% Overlay Without Overlay

Setting overlay on both images

You can also set the overlay on both the background and peek image at the same time, by setting hint-overlay on the <binding> element instead of the individual images. This also has the advantage of working on RTM machines (since this is all that RTM supported). Do note that in RTM, however, the overlay specified on the binding element only applied to the background image. If you're using the Notifications library, simply assign the overlays on each individual peek/background as seen earlier.

...
<binding template="TileMedium" hint-overlay="30">
  <image src="Assets\Mostly Cloudy-Background.jpg" placement="background"/>
  <image src="Assets\Map.jpg" placement="peek"/>
  ...
</binding>
...

Vertical Alignment (Text Stacking)

You can control the vertical alignment of content on your tile with the hint-textStacking attribute on both the <binding> element, and <subgroup> elements. By default, everything is vertically aligned to the top, but you can also align content to the bottom or center.

Text stacking on binding element

When applied at the <binding> level, text stacking sets the vertical alignment of the notification content as a whole, aligning in the available vertical space above the branding/badge area.

...
<binding template="TileMedium" hint-textStacking="center" branding="logo">
  <text hint-style="base" hint-align="center">Hi,</text>
  <text hint-style="captionSubtle" hint-align="center">MasterHip</text>
</binding>
...

...
TileMedium = new TileBinding()
{
    Branding = TileBranding.Logo,
    Content = new TileBindingContentAdaptive()
    {
        TextStacking = TileTextStacking.Center,
        Children =
        {
            new AdaptiveText()
            {
                Text = "Hi,",
                HintStyle = AdaptiveTextStyle.Base,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = "MasterHip",
                HintStyle = AdaptiveTextStyle.CaptionSubtle,
                HintAlign = AdaptiveTextAlign.Center
            }
        }
    }
}
...

auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();
tileBindingContentAdaptive->TextStacking = TileTextStacking::Center;

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Hi,";
adaptiveText->HintStyle = AdaptiveTextStyle::Base;
adaptiveText->HintAlign = AdaptiveTextAlign::Center;
tileBindingContentAdaptive->Children->Append(adaptiveText);

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "MasterHip";
adaptiveText->HintStyle = AdaptiveTextStyle::CaptionSubtle;
adaptiveText->HintAlign = AdaptiveTextAlign::Center;
tileBindingContentAdaptive->Children->Append(adaptiveText);

tileBinding->Content = tileBindingContentAdaptive;
var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();
tileBindingContentAdaptive.textStacking = notifLib.TileTextStacking.center;

var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Hi,";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.base;
adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
tileBindingContentAdaptive.children.push(adaptiveText);

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "MasterHip";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.captionSubtle;
adaptiveText.hintAlign = notifLib.AdaptiveTextAlign.center;
tileBindingContentAdaptive.children.push(adaptiveText);

tileBinding.content = tileBindingContentAdaptive;
hint-textStacking top center bottom
With branding or badge
Without branding/badge

Text stacking on subgroup element

When applied at the <subgroup> level, text stacking sets the vertical alignment of the subgroup (column) content, aligning in the available vertical space within the entire group.

...
<binding template="TileWide" branding="nameAndLogo">
  <group>
    <subgroup hint-weight="33">
      <image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
    </subgroup>
    <subgroup hint-textStacking="center">
      <text hint-style="subtitle">Hi,</text>
      <text hint-style="bodySubtle">MasterHip</text>
    </subgroup>
  </group>
</binding>
...

...
TileWide = new TileBinding()
{
    Branding = TileBranding.NameAndLogo,
    Content = new TileBindingContentAdaptive()
    {
        Children =
        {
            new AdaptiveGroup()
            {
                Children =
                {
                    // Image column
                    new AdaptiveSubgroup()
                    {
                        HintWeight = 33,
                        Children =
                        {
                            new AdaptiveImage()
                            {
                                Source = "Assets/Apps/Hipstame/hipster.jpg",
                                HintCrop = AdaptiveImageCrop.Circle
                            }
                        }
                    },
                    // Text column
                    new AdaptiveSubgroup()
                    {
                        // Vertical align its contents
                        TextStacking = TileTextStacking.Center,
                        Children =
                        {
                            new AdaptiveText()
                            {
                                Text = "Hi,",
                                HintStyle = AdaptiveTextStyle.Subtitle
                            },
                            new AdaptiveText()
                            {
                                Text = "MasterHip",
                                HintStyle = AdaptiveTextStyle.BodySubtle
                            }
                        }
                    }
                }
            }
        }
    }
}
...

auto tileBinding = ref new TileBinding();
auto tileBindingContentAdaptive = ref new TileBindingContentAdaptive();

auto adaptiveGroup = ref new AdaptiveGroup();

auto adaptiveSubgroup = ref new AdaptiveSubgroup();

auto adaptiveImage = ref new AdaptiveImage();
adaptiveImage->HintCrop = AdaptiveImageCrop::Circle;
adaptiveImage->Source = "Assets/Apps/Hipstame/hipster.jpg";
adaptiveSubgroup->Children->Append(adaptiveImage);

adaptiveGroup->Children->Append(adaptiveSubgroup);

adaptiveSubgroup = ref new AdaptiveSubgroup();

auto adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "Hi,";
adaptiveText->HintStyle = AdaptiveTextStyle::Subtitle;
adaptiveSubgroup->Children->Append(adaptiveText);

adaptiveText = ref new AdaptiveText();
adaptiveText->Text = "MasterHip";
adaptiveText->HintStyle = AdaptiveTextStyle::BodySubtle;
adaptiveSubgroup->Children->Append(adaptiveText);

adaptiveSubgroup->HintTextStacking = AdaptiveSubgroupTextStacking::Center;
adaptiveGroup->Children->Append(adaptiveSubgroup);

tileBindingContentAdaptive->Children->Append(adaptiveGroup);

tileBinding->Content = tileBindingContentAdaptive;
var tileBinding = new notifLib.TileBinding();
var tileBindingContentAdaptive = new notifLib.TileBindingContentAdaptive();

var adaptiveGroup = new notifLib.AdaptiveGroup();

var adaptiveSubgroup = new notifLib.AdaptiveSubgroup();

var adaptiveImage = new notifLib.AdaptiveImage();
adaptiveImage.hintCrop = notifLib.AdaptiveImageCrop.circle;
adaptiveImage.source = "Assets/Apps/Hipstame/hipster.jpg";
adaptiveSubgroup.children.push(adaptiveImage);

adaptiveGroup.children.push(adaptiveSubgroup);

adaptiveSubgroup = new notifLib.AdaptiveSubgroup();

var adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "Hi,";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.subtitle;
adaptiveSubgroup.children.push(adaptiveText);

adaptiveText = new notifLib.AdaptiveText();
adaptiveText.text = "MasterHip";
adaptiveText.hintStyle = notifLib.AdaptiveTextStyle.bodySubtle;
adaptiveSubgroup.children.push(adaptiveText);

adaptiveSubgroup.hintTextStacking = notifLib.AdaptiveSubgroupTextStacking.center;
adaptiveGroup.children.push(adaptiveSubgroup);

tileBindingContentAdaptive.children.push(adaptiveGroup);

tileBinding.content = tileBindingContentAdaptive;
top center bottom
Comments (81)

  1. Anonymous says:

    That look's like a very cool addition ! On Windows Phone I had to generate in-memory bitmaps and save them to storage and that was cumbersome and not efficient regarding memory usage. This new approach should solve this 🙂

  2. Anonymous says:

    This is awesome :)! A few questions:

    - How do we handle 'multiple' tiles like the Back of the Wide or Medium tile?

    - Are there any memory restrictions (I moved to Azure to render tile PNGs due to the memory limits of XamlRenderingBackgroundTask

    - At Ignite Jerry Nixon showed off the Tile Template Visualizer - a WPF tool that let's you see the XML on the left, and see the result immediately on the right - it would be uploaded to Git but I haven't been able to find it. Is there a download link?

    Keep up the great work!

  3. andrewbares7 says:

    Hey Niels, I'm happy to answer your questions!

    1) "Back" and "Front" of tiles is an old phone Silverlight concept. You can use "peek" images, which slide in from the top (on Phone 8.1 these used to flip, but my guess is that on 10 they'll slide just like desktop). You can also use the notification queue if you want to cycle between up to 5 different notifications on a tile.

    2) The only restriction is the size of the payload (which is actually a serious restriction). The payload (your XML) cannot be more than 5 KB. That's even true about sending a tile notification locally, the 5 KB cap exists there. Images referenced inside your payload also have to be less than 200 KB each. Both of these restrictions were true in Windows 8.1, but since adaptive is more verbose than the previous tile templates, the 5 KB limit on the payload can easily be reached.

    3) I'm the one that created the Tile Template Visualizer 😛 I'm trying to work with internal teams here in order to include the actual DLL that renders the Start tiles into the Visualizer. Right now, I basically re-wrote their adaptive renderer by hand, so there are some slight differences between actual Start and the Visualizer. But obtaining permission to use the real DLL is taking longer than expected, so I might just publish my version of the Visualizer in the meantime, since mine is about 98% accurate compared to what you actually see on Start.

    When I release the Visualizer, I'll post it on this blog!

    Thanks!

    Andrew

  4. Anonymous says:

    Hey Andrew,

    Thanks for your answer!

    Currently I'm using Azure to render my live tiles, but I'd like to move it back to the client with the Adaptive Tiles as they have much more flexibility. A few questions:

    - Do you have a sample on how to insert data into the XML dynamically. E.g., how to insert the right weather icon based on the current weather condition.

    - My tiles look like this: dl.dropboxusercontent.com/.../Tiles.png. Do you think these will be possible to make with the Adaptive Tiles? I can imagine that the graph on the blue tile is not, I could leverage Azure for that. But what about the text, multiple columns with different width's etc.

    Niels

  5. andrewbares7 says:

    Scott wrote an extension library that allows you to generate that XML via classes and properties: metronuggets.com/.../introducing-adaptivetileextensions-for-windows-10  Otherwise you could construct the XML as a string, injecting your live data values into the string (make sure to XML encode them though). Or you could even use XmlDocument and add elements and attributes through its methods. We're still internally debating on the best practice, but we'll publish something soon about all of that.

    I think your tile should mostly be possible using adaptive, but yes that graph would have to be rendered as an image. The annoying thing about adaptive is that for columns (which is the only way to get content arranged horizontally), you have to specify widths as percents. There's no Auto or Star like there are in XAML grids. So you'd have to do some playing around to find the correct percent to use to achieve some of those alignments.

  6. Anonymous says:

    Nice :)! I'll try it out later this week.. One remaining question, what should the resolutions of icons and a background be? The same ol' WP8.1 691 x 336 for Wide?

  7. andrewbares7 says:

    Provide exactly what the tile properties say - For medium, it's 150x150.

    However, you should also provide higher res scale versions.... Specifically scale-100, scale-200, and scale-400 (also providing scale-125 and scale-150 are recommended but not as important).

    Just multiply the base scale-100 resolutions by the scale number to get the higher res versions. I or someone else will hopefully be writing a blog post detailing all of this, but that should get you going hopefully!

  8. Anonymous says:

    Thanks, Andrw! I have been using Scott's library and things are coming together quite nicely. Although I must say that the tiles look a bit different on phone or desktop.

    Is it also possible to vertically center groups, or set the margin between (or height of 2 groups?

    Niels

  9. andrewbares7 says:

    Hmm, what looks different on phone? What build are you running on phone? Most likely you're on an older build on phone, and hopefully in the newer builds everything will look correct. Give me an example of something that isn't appearing correctly on phone and I can confirm the behavior on newer builds.

    See the Vertical Alignment section for centering vertically. If neither of those vertical alignment choices work for you, explain your scenario more.

    There's no way to set the margin, we recommend using a blank text element to achieve spacing between groups if desired. Or you could even create some images that are 1 pixel wide, and however high you want, and use those images to achieve vertical spacing. For example, if you want a 4 px vertical gap between groups, you could open paint.net, generate a transparent PNG that's 1 pixel wide and 4 pixels high, and save that to your project as "Space_4px.png", and then use that in an <image> element.

    Thanks for your constant feedback! It's really helpful to know how our developers are using adaptive, and the issues they're finding with it!

  10. Anonymous says:

    Hey Andrew,

    Thanks for the explanation - hopefully XAML tiles are coming soon to give us a bit more flexibility. I have, more or less, recreated my tiles like I did before. Only the wide one was too much of a hassle, so that will stay an image for now.

    There is one major bug though: tiles DO look different on phone and PC. I'm running the latest builds (RTM on PC, en 10166 on phone) and using the latest SDK release (10166). I have made a few screenshots:

    dl.dropboxusercontent.com/.../TileDifferences.png

    You can see that on phone it looks different (the tile is much 'bigger', fonts should be larger I guess). And when only 2 tiles are selected, everything disappears (I think because the content is then too big to fit the tile).

    I hope this gets fixed, because it's quite a hassle (maybe even impossible) to create tiles for every platform.

    This is my code for the medium tile (I'm using Scott's (awesome!) library):

    internal static TileBinding MediumTile(CurrentWeather CurrentWeather, string City)

           {

               TileBinding CurrentMediumTileBinding = TileBinding.Create(TemplateType.TileMedium);

               CurrentMediumTileBinding.Branding = Branding.Name;

               CurrentMediumTileBinding.DisplayName = City;

               CurrentMediumTileBinding.Add(new Text() { Content = CurrentWeather.Condition.ToUpper(), Alignment = Alignment.Left, Style = TextStyle.Caption });

               SubGroup IconGroup = new SubGroup();

               IconGroup.Width = 1;

               IconGroup.TextStacking = TextStacking.Top;

               IconGroup.AddImage(new TileImage(ImagePlacement.Inline) { ImageAlignment = Alignment.Left, RemoveMargin = true, Source = @"AssetsMediumTiles" + CurrentWeather.WeatherTileImage + ".png" });

               CurrentMediumTileBinding.Add(IconGroup);

               SubGroup TempGroup = new SubGroup();

               TempGroup.Width = 1;

               IconGroup.TextStacking = TextStacking.Top;

               TempGroup.AddText(new Text() { Content = CurrentWeather.Temperature, Alignment = Alignment.Right, Style = TextStyle.Base });

               CurrentMediumTileBinding.Add(TempGroup);

               return CurrentMediumTileBinding;

           }

  11. Anonymous says:

    One use case that I'm not able to implement, is bottom aligned groups.

    In our Large Tile template, we'd like to have the Driver Name at the top, and then his stats at the bottom. However the only way to accomplish this, is to jam about 6 or 7 <text /> elements in the middle, to force the stats to be close to bottom aligned.

    While this works, it doesn't really seem super adaptive for future scenarios, since we're basically hardcoding in the number of line-breaks to get a perfect bottom-align.

  12. andrewbares7 says:

    Sorry for the delayed response (I really wish MSDN had email notifications!)

    I believe your issue is caused by the image not being able to fit on that small density size, and so the entire group is dropped. You could fix this two different ways: (1) use a smaller image, or (2) don't set the alignment of the image, so that it stretches to fill width, and then make sure the subgroup's hint-weight is specified such that the image fits on the smallest screen density.

  13. Anonymous says:

    I think it has to do with the height of the image then (I did this to actually horizontally align it in the center). I guess that's the only way. I hope you guys can fix this in an upcoming version - if it works on 2/3 devices it kinda defeats the whole 'universal' tiles idea.

    Any updates on the Tile Template Visualizer program?

  14. andrewbares7 says:

    @Bottom Align Group

    You're correct, it's not possible to have some text top-aligned at the top of the tile, and other text bottom-aligned at the bottom of the tile. I've taken note of that feedback. We're not able to make any major changes to the tile renderer at this point, but we'll keep this in mind for the future. Thanks!

  15. andrewbares7 says:

    @Niels Laute

    Yeah, unfortunately there's no way to vertical align your image like you want (adding pixel padding to the image itself somewhat achieves it, but as you saw has the unintended effect of that causing it to drop off on smaller density screens). You and "Bottom Align Group" both have the same issue.

    But let me explain that the behavior you're seeing is NOT a bug, the intended behavior is that content that can't fit doesn't get displayed. Otherwise other people would complain that their content is partially being clipped. We implement that dropping logic so that you can have more content on higher density devices, without having partial content randomly appearing.

    For the Tile Template Visualizer, I'm still waiting on another team, but they've recently sent out a request to their manager for permission. Hopefully "soon".

  16. Anonymous says:

    Hi,

    I guess it's not possible to use custom fonts or custom font sizes, right?

    I planned to use for my Win10 Store app "Battery Tile" Segoe MDL2 battery symbols but it looks like I'll just stick with with pre-rendered images for now.

    http://www.microsoft.com/.../9WZDNCRFJVFV

  17. Anonymous says:

    Is there a way to set the image source to reference one of your outlook contacts?

  18. Anonymous says:

    TileWide310x150ImageCollection version 2 templates don't work as expected on Windows 10.

    Only the first image is shown. No matter I target my app to WP8.1 or UWP, it just shows only a small image in the middle in Win10.

    Is this a bug?

  19. Niels Laute says:

    Hey Andrew,

    Thanks for the feedback! One last question about the payload: will there be an exception if it's more than 5 KB? Any way to track this?

    Niels

  20. andrewbares7 says:

    @Martin - Correct, no custom fonts or custom font sizes right now. Some of the Segoe UI Symbol symbols are supported, but even lots of those aren't supported (ones marked as Private Use don't seem to work for example).

    @Leo - The legacy ImageCollection templates are no longer supported in Windows 10. I agree that it's frustrating. If more complaints come in, we can have incentive to fix it.

    @Niels - If you are sending the tile notification locally (through the client API's), then yes you'll get an exception if your payload is past the 5 KB limit. I'm not sure if push notifications from the server return any error codes for that though.

  21. andrewbares7 says:

    @Tomas - You would have to use the contact API's in your app to retrieve the image source of a contact, and then save that image to your app's storage, and then reference the image from your own app's storage (using ms-appx:///). That definitely isn't ideal; it'd be easier if the contact API's simply returned a path you could reference, but that's how it is right now.

  22. Mary says:

    Hi,

    Is it possible to include a peek image as well as a background image in a live tile template? The requirement I am trying to achieve is that - a peek image will slide off, showing some text with a background image. I tried the code shown below,

    <binding template="TileMedium" branding="name">

     <image placement="peek" src="Assets/Apps/Hipstame/peekImage.jpg"/>

     <image placement="background" src="Assets/Apps/Hipstame/backgroundImage.jpg"/>

     <text hint-style="caption">New Message</text>

     <text hint-style="captionsubtle" hint-wrap="true">Hey, have you tried Windows 10 yet?</text>

    </binding>

    But the backgroundImage is also sliding up with the peekImage.

    Thank you!

  23. Bottom Align Group says:

    andrewbares7 - Thanks for the feedback. One possible solution, that could be low impact, is a "hint-priority" property. Then, we could create a group of line breaks, to bottom align the content, but mark it as "hint-priority: low", which would tell the Tile Renderer that it can discard this group if space becomes tight.

    This would allow us to 'hardcode' the exact spacing we want on desktop, while knowing that the important content will still be retained on different displays.

    Just a thought.

    Cheers,

  24. andrewbares7 says:

    @Mary - Currently you can only have a background image OR a peek image. We're looking at fixing this for the next release.

    @Bottom Align Group - Yeah that could somewhat work. However that still doesn't achieve perfect bottom alignment (since each line is, say, 30 pixels, meaning that your bottom text might be 29 pixels too high from the bottom). But it could be useful for other scenarios!

  25. Anko Hanse says:

    Hi Andrew,

    Thank you for your awesome explanation.

    I am having some trouble with providing scaled images though. I dynamically generate images containing a graph at scales 100, 200 and 400, resulting in files

       TileGenSmall.scale-100.png

       TileGenSmall.scale-200.png

       TileGenSmall.scale-400.png

       TileGenMedium.scale-100.png

       ...etc.

    My template is

    "<tile>

      <visual version='3'>

           <binding template='TileSmall' branding='none'>

               <image '[path to my package]]\LocalState\TileGenSmall.png'

                       placement='background'/>

           </binding>

          <binding template='TileMedium' branding='none'>

               <image '[path to my package]\LocalState\TileGenMedium.png'

                      placement='background'/>

          </binding>

          ... etc.

       </visual>

    </tile>

    That does not display the live tile. It only seems to work if I generate just the scale 100 images and use bare filenames:

       TileGenSmall.png

       TileGenMedium.png

       TileGenWide.png

       TileGenLarge.png

    Problem with that is that the graph looks rather bloated on phones (gets scaled up to scale 140 or 180).

    If I only provide a scale 200 or 400 image instead of scale 100, the image gets scaled down but looks horrible! It seems that scaling down is done by just simply skipping scanlines,..

    Any thoughts?

  26. andrewbares7 says:

    @Anko - ms-appdata does not support MRT resolution (MRT is what handles selecting those scale-xxx files). Thus, you should render the images using the device's current scale resolution (there's an API you can call to obtain the device's current scale factor, which since you're dynamically creating these images from app code, you can call).

  27. What about dark text? says:

    For the displayName, how can we get that to show up as dark text?

  28. Brandon H_ says:

    I've set the image placement to peek, but all I get is a static peek of the tile, it doesn't animate. I even set caption text.

    Basically what I see is the peek image slid up, one line of caption text shown (ellipse-trimmed, even though I have it set to wrap), and then the display name. No animation to fully show the text, or the peek image.

  29. Brandon H_ says:

    Re above post: It's worth noting that if I use the legacy templates, I can get the peek behavior I want.

  30. Anko Hanse says:

    @andrewbares7 - Had been looking for an API to provide me the drawscale, but could not find any (the old App.Current.Host.Content.ScaleFactor was deprecated). So assumed the dynamic tiles would use scaling in the same way as the static tiles.

    Did another search, and found DisplayInformation.GetForCurrentView().ResolutionScale. That seems to do the trick... (needs some more testing on various devices).

    Thank you.

  31. Suresh says:

    I have a windows 8 app, notifications enabled for my app. and its working great in windows 8 and windows 8.1 and Windows 10 machines.

    The only problem i am facing is when user taps on toast notification based on the launch arguments (which are present in toast can be read from LaunchActivatedEventArgs of Onlaunched event) I am redirecting the user to specific page. This functionality is working fine in Windows 8,8.1 machines but not working in windows 10 machine. Could you please suggest me what should i do ?

  32. Andrev says:

    Hi it is possible to change background color of my Tile in XML or c# code behind? Cheer

  33. andrewbares7 says:

    @What about dark text? - DisplayName no longer supports dark text. Design studio decided it should always be white.

    @Brandon - Could you paste your XML code? Alternatively, look at using the new NotificationsExtensions library I've just released, which lets you generate the XML using code, and it'll help you create valid XML: blogs.msdn.com/.../introducing-notificationsextensions-for-windows-10.aspx

    @Suresh - See the adaptive and interactive toasts post by Lei on this blog. In the "Activation Samples" -> "Foreground", you'll see that in Windows 10 apps, OnActivated is called instead of OnLaunched. But were you running a Windows 8 app on Windows 10 and the toast activation wasn't working? It should still work the same for existing Windows 8 apps... if not that's a bug. Please bring this conversation over to Lei's article about toasts!

    @Andrev - If you're talking about a primary tile, your tile's background color is permanent (specified in the app manifest). If you're talking about a secondary tile, it can be changed via C# code by setting the BackgroundColor property on the SecondaryTile (under VisualElements I think?). If you really need to change background color via a notification, you could pre-load some solid-color JPEG images, and reference the image as a background image, like "red.jpg", and then that'll have the same effect as creating a red background. The image should theoretically only need to be 1x1 px large too!

  34. MichaelD! says:

    Thank you for posting this, Andrew.  I was hoping I could get someone from MSFT to comment on why this API is using XML and not XAML?  The use of XML seems old skool, and the design decision to pass in an XML document smells like an anti-pattern.  It seems like this should be Xaml, taking advantage of the built-in tooling (Intellisense) and design support in Visual Studio.  I've piggybacked off Scott Lovegrove's great work in creating the C# version of this format, and have made a Xaml version here:

    github.com/.../AdaptiveTileExtensions

    XAML, BUDDY WOOOOOOOOO!!!!!!!!!!!!!!!!!!!!!!!

    github.com/.../Tile.xaml

  35. andrewbares7 says:

    @Michael - We all agree that XML is old school and that it should be XAML. However, our Start screen isn't at the point where it can support XAML yet. We're working to get there.

    I saw your comment and pull request on Scott's library - pretty neat. I own the NotificationsExtensions library, the official helper library which has been updated for generating these new adaptive tile and toast notifications (github.com/.../NotificationsExtensions). Your pull request got me thinking about how I could integrate that with the official library. I'll think about it some more! We definitely want a way for devs to more visually design tile notifications. However, those notifications are usually generated programmatically (or even from servers), so leveraging XAML can be weird if it's from a server.

  36. MichaelD! says:

    First off, much kudos to you @andrew for being proactive and responsive to your blog!  It seems a lot of MSFT blogs are fire and forget, especially with posts that occur so late after it has been published.  I am really glad to hear you say that Tiles should be Xaml.  Guess I'm not too crazy after all. 🙂  And thanks for your consideration/words on the PR.  I would be interested in helping out your library as well.  Even if it's from the server, Xaml can still be at play in a .NET project, as System.Xaml can be used anywhere (not just in WPF apps), which is why it is in its own assembly (and why we're pushing hard for it to be it's own assembly in Core .NET and by consequence UWP): forums.dotnetfoundation.org/.../968

    As you allude to, Xaml provides serializable, language-agnostic, designer-friendly (and tooling-friendly) representation of POCOs, so it is definitely preferred wherever possible when defining/describing objects.  I use it on the server-side too, to configure my services (and well, anything).  Thanks for any consideration!  I will check out your library and let you know what I think.

  37. andrewbares7 says:

    Thanks! Making an awesome live tile is difficult due to the lack of info out there, so I'm helping to change that. Staying active on the articles is necessary!

    When I think of XAML, I guess I incorrectly think of StackPanel, Grid, etc. Constructing the tile through a XAML file like your screenshot in the pull request showed is definitely pretty awesome. That's actually something that Matt (a fellow PM) has wanted to be able to do! We also would want a visualizer, so you could instantly see what the notification looks like... that'd be killer.

    Would the XAML that you currently have support data binding? There needs to be some way to inject live data into the XAML file, because a static XAML file is useless for a live tile which needs live data.

  38. MichaelD! says:

    In the early days, yes, Xaml was presentation/UI only.  Then, it got pulled out into its own assembly to be used for other application purposes (Windows Foundation, etc.).  Then, with the advent of WinRT, it got put back into a UI assembly (with very reduced featureset, unfortunately), pretty much wiping out the efforts made with System.Xaml.  FWIW, in addition to the conversation in the link above, this vote is gaining traction to repair System.Xaml in the new UWP universe:

    wpdev.uservoice.com/.../7232264-add-markup-extensions-to-and-improve-winrt-xaml

    In the current implementation, the tile objects are simply POCOs.  But, it would be possible to make them extend UI objects, to provide actual UI-based designer feedback in visual studio.  That's something I can toy with to see if it can work.  Unfortunately, as I have alluded to, WinRT/UWP Xaml is a terrible (TERRIBLE) adaptation of System.Xaml, so the functionality is limited.  Even though it might render in a designer, we would not be guaranteed full fidelity of exact rendering of the live tile in production/deployed environment.

    Additionally, as such my current UWP implementation does not support data-binding.  With the power of markup extensions, we could most certainly be able to provide any sort of data into any element/property within a Xaml file.  But, unfortunately, markup extensions do not exist in UWP at the moment (see referenced link above).

    If possible, I would like to move this conversation to your GitHub repo.  It is a much better communication channel than MSDN comments, which are pretty arcane and need a refresh/update.  Disqus would be a better change. 😛  Here is the issue:

    github.com/.../5

    Thank you, Andrew!

  39. ShawnS says:

    It would be nice if we could specify the BitmapInterpolationMode for scaling. Right now, it appears to be defaulting to Nearest Neighbor, which results in pretty horrible looking images when a large image is downscaled.

    For example, here's the MS Edge Logo, downscaled: screens.gskinner.com/.../cWG.png

    If using Bilinear, it would look more like this: screens.gskinner.com/.../3fA.png

    At the very least, if we can not specify Interpolation, it would be nice to change the default to Linear.

  40. andrewbares7 says:

    @Shawn - looking into this, thanks! I'll report back with an update.

  41. ViachaslauZinkevich says:

    @andrewbares7 Hi, thanks for nice tutorial!

    I have a question. As far as I understood, there's no way to change text/image angle for now?

    Like on the tile here store-images.microsoft.com/.../apps.33156.9007199266312582.fed2e91f-56a2-420c-a251-f67869506fd0.61dab060-2230-4a81-902c-431ae3297ae9

    Thanks!

  42. andrewbares7 says:

    @Viachaslau - Correct, you cannot rotate text or images. You'd have to render your tile as an image if you want something as advanced and custom like that.

  43. andrewbares7 says:

    @Shawn - RE: interpolation... From what we understand, there's no "best choice" between nearest neighbor and linear. Depending on the image and how it's being resized, one might be better than the other. Paint.NET seems to have a "best" option which performs both and calculates which is the best result, but that's not an option for us right now. And we haven't heard any other complains about the image scaling yet.

  44. ColumnSpan says:

    Is it possible to create a tile as shown here - oi57.tinypic.com/2elgw39.jpg

    Tried the following steps -

    Add Image 1 into subgroup 1 with "hint-weight = 50"

    Create 2 more subgroups with" hint-weight = 25" to add Image 2 and Image 3

    I couldn't figure out how to make the text extend across the last 2 subgroups. Is something similar to Column-Span available?

    Note: I could achieve the result using Image-alignment left/right but I am trying to add the images into subgroups so that it will stretch according to the tile size.

  45. Viachaslau says:

    @andrewbares7 Thanks a lot for answer!

    I do think I'd prefer new API to custom rendering as it may be tricky and fail from time to time, while this one I supposed should be quite quick in generating tiles so it should be fine for background task quotas, am I right?

  46. andrewbares7 says:

    @ColumnSpan - No, there's nothing similar to column span right now. You likely cannot achieve your exact scenario using purely adaptive. You might have to try rendering one image as a background image, and then place other images and text on top of it with the adaptive. For example, place the large image as the background, and then create a group with subgroup 50%, subgroup 25%, subgroup 25%, and place the two smaller images in the last two subgroups (assume they have correct aspect ratio). And then create a second group that has two 50% subgroups, and put your text in the last subgroup. Only issue is that I believe the entire group will be dropped if the wrapping text has more content than can be displayed. So ultimately you probably can't achieve your scenario.

    @Viachaslau - Correct, when using adaptive templates, you no longer have to worry about memory impact on background tasks! That's one of the huge benefits over rendering your own custom tiles.

  47. ColumnSpan says:

    Hi,

    I am using the following XML data to display on a tile -

    <tile>

     <visual>

       <binding template="TileMedium" branding="none">

         <text hint-style="body">text 1</text>

         <text hint-style="caption">text 2</text>

         <text hint-style="caption">text 3</text>

         <text hint-style="caption">text 4</text>

         <text hint-style="caption">text 5</text>

       </binding>

     </visual>

    </tile>

    In 720p 5 inch emulator the tile displays as shown here - oi59.tinypic.com/333z8lu.jpg

    "text 5" is not displayed whereas enough space required by a text element is seen at the bottom. Is something extra need to be done?

  48. andrewbares7 says:

    @ColumnSpan - Thanks for reporting that issue. That's a mobile-specific bug (desktop does not have this issue). When branding is set to "none", the tile is still behaving as if branding exists and thus not filling that extra space. I've filed a bug on the shell team for this, hopefully they will fix it for TH2.

  49. Viachaslau says:

    @andrewbares7 I've noticed that the tile data doesn't automatically scale to bigger dimension. For example I have a piece of data in the previous example by @ColumnSpan. In the WVGA dimension it looks fine filling all the space. But when I launch it on WXGA only left upper part of tile is filled with small non scaled piece of data and almost whole tile is empty, which looks ugly.

    Is there a way to autoscale to fill the tile, or group/subgroup? Or what should I do to make it nice on all dimensions?

  50. andrewbares7 says:

    @Viachaslau - Not sure what you mean. Certain devices have more available screen space, and the adaptive tiles will take advantage of the extra space. They will NOT simply increase the font size.

    Look at the first set of photos under the "Groups and Subgroups" header. That shows how adaptive tiles "scale" to fill the tile. Font size should always remain relatively constant. If it's on a device where the tile itself is simply larger, then text will flow across all that extra space like seen in the photos I've referred you to.

    I tested the Mail tile on WXGA and it appeared correctly as seen here (bottom right tile): tinypic.com/view.php  Since the live tile on WXGA is larger, more content is displayed.

    You'll have to show us some screenshots, or a sample payload, or somehow explain your issue further.

  51. Shawn says:

    @andrewbares7 - Thanks for the reply.

    NearestNeighbor is typically only used for PixelArt, or other very low-res assets.

    It creates very pixelated results when down-scaling any normal photo, logo, or any other hi-res 'smooth' image.

    I'd argue that if you have to choose one, which you're doing, Linear is the obvious choice, since the bulk of assets are not lo-res pixel art, and typically are downscaling, not upscaling, which NN might work better for.

    As an aside, you could just expose a property called "smoothing" or a 2nd image type, something... to give us some control.

    As it stands right now we can't use logos in our tiles, cause they're unreadable, which is unfortunate.

  52. Alek says:

    ...So what do we do with the TileContent content ?

    Do we call updater.update(content) ?

    It's unclear what we do next.... dose anybody know what we do with the content after we create it?

  53. andrewbares7 says:

    @Alek - This documentation page doesn't cover updating tiles. Depending on whether you're updating a tile locally or via push, the technique varies.

    See the NotificationsExtensions documentation for some code snippets on what to do next: github.com/.../Tile-Notifications

    In short, for a local notification, you can use the GetXml() method on the TileContent object to retrieve the content as an XmlDocument, and then pass that to the WinRT TileNotification constructor. For push notifications, you would use the GetContent() method to get the content as a string, and then send that string (which is XML) to the push channel URL.

  54. Felix Zhang says:

    How to remove margin between content and tile border?

    I set an image as tile background, and I have another image (with opacity) to overlay on it, but I found there is margin between the overlay image and tile border, my overlay image cannot stretch full over the tile. What I want is the overlay image can cover the entire tile without margin.

    For example, the 150 * 150 size tile, my overlay image will also be 150 * 150, any suggestions?

       <binding template="TileMedium">

         <image src="background_image_url" placement="background"/>

    <image src="the_same_size_with_background_overlay_image_url"/>

       </binding>

  55. andrewbares7 says:

    @Felix - There's no way to remove the margin between content and the tile border. We enforce this margin to ensure that tiles remain consistent, and so that you can easily create tiles that look correct without worrying about exact margins.

    You would have to render your background and your overlay image as one single image and then set that image as the background image.

  56. James Woods says:

    Hi, first of all, thnak you for this excellent tool you're providing.

    i, however, have 2 small problems, which are driving me crazy : i set up an xml payload with three bindings and (medium, wide and large) :

    1. on windows 10 mobile (10581), the wide tile doesn't work.

    2. the small tile, which i did not set a binding for and don't want to use, is displaying (obviously empty), both in desktop and mobile.

    please, tell me what to do. Thanks again.

  57. James Woods says:

    i forgot to pase my xml:

    TileContent()

               {

                   Visual = new TileVisual()

                   {

                       //

                       TileMedium = new TileBinding()

                       {

                           Content = new TileBindingContentAdaptive()

                           {

                               Children =

                               {

                                   new TileText()

                                   {

                                       //

                                   },

                                   new TileText()

                                   {

                                       //

                                   }

                               }

                           }

                       },

                       TileWide = new TileBinding()

                       {

                           Content = new TileBindingContentAdaptive()

                           {

                               Children =

                               {

                                   new TileText()

                                   {

                                       //

                                   },

                                   new TileText()

                                   {

                                       //

                                   }

                               }

                           }

                       },

                       TileLarge = new TileBinding()

                       {

                           Content = new TileBindingContentAdaptive()

                           {

                               Children =

                               {

                                   new TileText()

                                   {

                                       //

                                   },

                                   new TileText()

                                   {

                                       //

                                   }

                               }

                           }

                       }

                   }

               }

  58. andrewbares7 says:

    @James, thanks for writing us, glad to help!

    1) What do you mean by "the wide tile doesn't work" - what are you seeing? Also, include your entire TileBindingContentAdaptive() snippet for the Wide tile since something inside there might be causing it to break.

    2) Small tiles are always required. You'll notice that when creating a tile, even if you only provide a Medium tile logo, the user can still resize to Small and your Medium logo will simply be scaled down. You cannot "not use" the Small tile, it's our design philosophy that every tile should be able to be resized to small. If you don't want users using the Small tile, you could specify a logo that has a big X telling users not to use your small tile, so they see the X when resizing to small.

  59. James Woods says:

    @Andrew thanks mate. for the tile not displaying, it was me who did not set it up in the original secondary tile. after repairing that it works well, my bad. for the small tile, i did not know it was required. thanks again.

  60. Dino Borogovac says:

    Hi, im currently learning about this adaptive tiles and so far they are great but i have some concerns about the whole stuff.

    My Setup uses the same Setup as above for the "weather" tile (wide and middle) and where the app Name stays ist the property "DisplaName"?! or i added the Name of my app and Branding to Auto. Now on PC it does cut of the app Name because it thinks it can not fit where as there is enough place visible about 30% of the bottom of the tile. If this is not enough for the app Name then i dont know how this should evolve. We basically have then just 70% place for our Content (with and without the DisplanName).

    Can this somehow be fixed so that the Displaname has smaller margins and that we can use the Content from line to line so DisplanName for me can scratch even the above line but i do need this line, without it my app has no meaning, and without the DisplayName also :/ changing the font size to something smaller is not visible on Phone devices because ist already to small the font.

    Can we make two or more Setups based on the Device?! like one TileVisual for PC and one for Mobile?!

  61. andrewbares7 says:

    @Dino - I'm having trouble understanding your comment, there are numerous characters missing in your comment. I'll attempt to answer your questions, but if I mis-understood anything, please clarify with properly spelled words.

    DisplayName will always be 28 effective pixels tall, there is no way to control that. If you don't want the display name to appear, set branding="none" and you will get that space back.

    You can use whatever XML you want for Desktop vs Mobile. You can check what device you're running on by using DeviceFamily: msdn.microsoft.com/.../Windows.System.Profile.AnalyticsInfo and then you can send the correct XML depending on the device family.

  62. sateesh says:

    its very nice concept to practice the live tiles but here I have a requirement how to show the user current location pin on tile when an user has pin the tile on its desktop, phone and tablet is there any possibility to show the user location pin in the tile and here I have mentioned one thing also I am show the map image on tile but I am failed to show the user location pin on that tile is any body can the suggestion. if any body has the solution please forward my mail id or else post that in MSDNFOURMS blog and this is mail id:astrani_sateesh@outllok.com

  63. Thai Nguyen says:

    On the Lumia 640, Microsoft forced the home screen to always be 3 columns. A standard rectangular 2x1 live tile now only occupies 2/3 the width of the home screen. Is there an option or any work around to create or display a 3x1 or 3x2 rectangular live that span the whole width of the home screen on the Lumia 640? If not will there be an enhancement to offer a 3x1 live tiles any time soon? Android has many options and sizes for their widgets so why can't WP offer such.. and take advantage of the larger screen display area and resolution...TIA!

  64. andrewbares7 says:

    Hi Thai,

    This is a developer blog, we don't own the end-user-facing features of Start. But as a fellow Windows Phone user, I can answer some of your questions. The 2-column option is still there in W10M. Go to Settings -> Personalization -> Start, and scroll down, and disable the "Show more tiles" toggle. And no, there are currently no 3x1 or 3x2 live tiles (open the Feedback app and send that feedback so that it can be voted on / received by the team that owns Start).

  65. andrewbares7 says:

    @sateesh - Your question about displaying the map on the live tile is already being answered on your MSDN thread, let's keep the conversation there: social.msdn.microsoft.com/.../how-to-show-the-location-map-on-live-tiles

  66. kine says:

    Is there some issue with using displayName in Windows 10 mobile?  Medium/wide tile always displays just the app name defined in app manifest and not the displayName I set in the notification XML. Exactly same tile notification works correctly in desktop. Also Notifications Visualizer displays the tile correctly for mobile too.

    I am using SDK 10.0.10240.0 and tested this in a mobile device and emulator running 10.0.10586.0.

    Sample xml:

    <tile>

       <visual>

           <binding template="TileWide" branding="name" displayName="Wednesday 31">

                 <text>test</text>

           </binding>

       </visual>

    </tile>

  67. andrewbares7 says:

    @kine - I’m unable to repro this issue on 10.0.10586.35 on Mobile, it’s possible that there was a bug in version 0 of the build. Can you try updating to a newer build?

  68. kine says:

    It seems that problem occurs only if tile's short name defined in package.appxmanifest / Visual Assets is NOT empty.

  69. AbsoluteSith says:

    Hey I was wondering how to create a tile with more than one image (5 would do) earlier we used to use TileUpdateManger to achieve this. I'm tried using Peek and background but it only shows the background and I couldn't add more than one peek image. Something like this : http://www.youtube.com/watch

  70. andrewbares7 says:

    @AbsoluteSith - Sounds like you should use the Photos tile template: blogs.msdn.com/.../photos-tile-template-in-windows-10.aspx

    @kine - The workaround is to simply not use the ShortName property on your primary tile (it's not a required property as we discussed via email).

  71. AbsoluteSith says:

    string startTemplate = @"<tile>

                   <visual>

                   <binding template = 'TileMedium'> ";

                   startTemplate += "n" + "<text hint-style='caption' hint-wrap='true' >" + title + " </text>";

                   startTemplate += "n" + "<text hint-style='captionSubtle' hint-wrap='true'>" + body + "</text>";

                   startTemplate += "n" + "</binding>" +

                   "n <binding template='TileWide'> ";

                   startTemplate += "n" + "<text hint-style='caption' hint-wrap='true'>" + title + " </text>";

                   startTemplate += "n" + "<text hint-style='captionSubtle' hint-wrap='true'>" + body + "</text>";

                   startTemplate += "n" + "</binding>" +

                        "n <binding template='TileLarge'> ";

                   startTemplate += "n" + "<text hint-style='caption' hint-wrap='true'>" + title + " </text>";

                   startTemplate += "n" + "<text hint-style='captionSubtle' hint-wrap='true'>" + body + "</text>";

                   startTemplate += @"

                        </binding>

                        </visual>

                        </tile>";

                   Debug.WriteLine("The template is " + startTemplate);

                   XmlDocument xmlDoc = new XmlDocument();

                   xmlDoc.LoadXml(startTemplate);

                   TileNotification notifyTile = new TileNotification(xmlDoc);

                   TileUpdateManager.CreateTileUpdaterForSecondaryTile(tile.TileId).Update(notifyTile);

    In the above sample if the body contains multiple lines "n" or "r" then the body content is not shown for medium or wide tiles. Note the tile size is within the limits. What could be the issue here?

  72. AbsoluteSith says:

    And also would like to know how to set the background color of the secondary tile. Like setting up from the xml.

  73. Anonymous says:

    Hey AbsoluteSith,

    For your first comment, looks like you found a bug where <text> elements containing newlines will incorrectly be dropped rather than just using ellipsis trimming if all the text cannot be displayed. There's a few workarounds depending on your scenario... (1) replace all newline characters with spaces, removing the newlines, or (2) split the string based on the newlines, and then place each one in their own separate <text> element, thus avoiding this bug. I've filed this bug and will try to reply to this comment if/when it is fixed, but you should use one of those workarounds.

    For setting the background color via a notification - that is not possible. As a workaround, you could use a background image that is simply a solid color. The background image can be a 1x1 JPEG, so it'll be super small file size.

  74. George Birbilis says:

    very happy to see you're using the "Adaptive" term instead of the nonsense "Responsive" term used in HTML5 world

  75. Sebas Tian says:

    Hi,
    I am very new on Win 10 development and particularly on adaptive tiles. I am surely missing some information but I don't know where the code (XML or C#) goes in order to provide adaptive tiles.
    For instance: Where should I put the C# code listed on the samples?
    In the App.Xaml.cs? Inside a different predefined file? How do I reference it on my project? etc.
    Could you provide me a full example or tell me where I can get the documentation that explains this.
    Thanks

    1. andrewbares7 says:

      Hey Sebas, please see our quickstart for sending a tile notification, it includes a full code sample at the end! https://blogs.msdn.microsoft.com/tiles_and_toasts/2015/10/05/quickstart-sending-a-local-tile-notification-in-windows-10/

  76. Minu7 says:

    Hi there,
    I've an adaptive tile schema like this. I would like to use different images for wide and large tiles. While resizing, it doesnt look good. Can you please help here.I dont see the right images being picked up.

    \
    \
    \
    \
    \
    " +line0 +"\
    " +line1+ "\
    \
    \
    \
    \
    \
    \
    \
    " +line0+ "\
    " +line1+ "\
    \
    \
    \
    \
    ";

  77. Minu7 says:

    \
    \
    \
    \
    \
    " +line0 +"\
    " +line1+ "\
    \
    \
    \
    \
    \
    \
    \
    \
    \
    " +line0+ "\
    " +line1+ "\
    \
    \
    \
    \
    ";

    1. andrewbares7 says:

      Hey Minu, your XML seems to have been stripped from the comment, could you link to it somewhere like from PasteBin?

Skip to main content