How to keep your tile notification payload under 5 KB

  • Article

The XML payload that you construct for your tile notifications must be no larger than 5 KB. Otherwise, you will get a COMException with HResult 0x803E0115 saying that "The size of the notification content is too large."

To fix this, you should set limits on the content that you put into your tile notifications. For example, if you're displaying a message that another user typed, limit it to a max number of characters.

Limits on text length

The max number of characters you will want to use depends on the tile size. The medium tile is smaller than the large tile - hence, you can trim your string much earlier for the medium tile notification.

Max # of characters per line for each tile size and each font size

TileMedium

  • caption: 63 characters
  • body: 50 characters
  • base: 46 characters
  • subtitle: 37 characters
  • title: 34 characters
  • subheader: 26 characters
  • header: 19 characters

TileWide

  • caption: 134 characters
  • body: 107 characters
  • base: 100 characters
  • subtitle: 80 characters
  • title: 73 characters
  • subheader: 56 characters
  • header: 41 characters

TileLarge

  • caption: 82 characters
  • body: 65 characters
  • base: 60 characters
  • subtitle: 49 characters
  • title: 44 characters
  • subheader: 34 characters
  • header: 25 characters

TileSmall

  • caption: 30 characters
  • body: 24 characters
  • base: 22 characters
  • subtitle: 18 characters
  • title: 16 characters
  • subheader: 12 characters
  • header: 9 characters

Limits on lines of text

The max number of lines of text that can be displayed also depends on your tile size, the device, display scaling options, and whether branding is displayed. Here are the max number of lines that can possibly be displayed for each tile size.

TileMedium/TileWide

  • caption: 10 lines (11 without branding)
  • body/base: 8 lines (9 without branding)
  • subtitle: 6 lines (7 without branding)
  • title: 5 lines (6 without branding)
  • subheader: 3 lines (4 without branding)
  • header: 2 lines (3 without branding)

TileLarge

  • caption: 13 lines (15 without branding)
  • body/base: 11 lines (12 without branding)
  • subtitle: 8 lines (9 without branding)
  • title: 7 lines (regardless of branding)
  • subheader: 5 lines (regardless of branding)
  • header: 3 lines (4 without branding)

TileSmall

  • caption: 5 lines
  • body/base: 4 lines
  • subtitle: 3 lines
  • title: 3 lines
  • subheader: 2 lines
  • header: 1 line

Use baseUri to reduce size of image URL's

If you are including images in your tile notifications, and your images have the same base URL, you can reduce the redundant leading base URL by using the baseUri property.

In the following example, all of our images are located in Assets/Apps/Weather, so we use the baseUri so that we don't have to redundantly specify this portion of the URL in every single image. We can simply specify the file name.

 
<tile>
  <visual displayName="Seattle" baseUri="Assets/Apps/Weather/">

    <binding template="TileMedium" branding="name" hint-overlay="30">
      <image src="Mostly Cloudy-Background.jpg" placement="background"/>
      <group>
        <subgroup>
          <text hint-align="center">Mon</text>
          <image src="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="Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">57°</text>
          <text hint-style="captionSubtle" hint-align="center">38°</text>
        </subgroup>
      </group>
    </binding>

  </visual>
</tile>

 
TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        BaseUri = new Uri("Assets/Apps/Weather", UriKind.Relative),

        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 = image,
                HintRemoveMargin = true
            },
            new AdaptiveText()
            {
                Text = highTemp,
                HintAlign = AdaptiveTextAlign.Center
            },
            new AdaptiveText()
            {
                Text = lowTemp,
                HintAlign = AdaptiveTextAlign.Center,
                HintStyle = AdaptiveTextStyle.CaptionSubtle
            }
        }
    };
}

Don't specify attributes if you're using the default value

Tile elements have specific default values, which means that if you want the default value, there's no need to explicitly specify the value.

For example, as seen below, there's no need to specify the caption and disable text wrapping, since these are both default values.

 
<binding template="TileMedium">
  <text hint-style="caption"  hint-wrap="false">Snowboarding with Mark</text>
  <text hint-style="captionSubtle" hint-wrap="true">Fri: 9:00 AM</text>
</binding>

Resources