Table of contents
TOC
Collapse the table of content
Expand the table of content

Tiles for UWP apps

Last Updated: 9/19/2016

A tile is an app's representation on the Start menu. Every app has a tile. When you create a new Universal Windows Platform (UWP) app project in Microsoft Visual Studio, it includes a default tile that displays your app's name and logo. Windows displays this tile when your app is first installed. After your app is installed, you can change your tile's content through notifications; for example, you can change the tile to communicate new information to the user, such as news headlines, or the subject of the most recent unread message.

Configure the default tile

When you create a new project in Visual Studio, it creates a simple default tile that displays your app's name and logo.

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Logo.png"
        Square44x44Logo="Assets\SmallLogo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

There are a few items you should update:

  • DisplayName: Replace this value with the name you want to display on your tile.
  • ShortName: Because there is limited room for your display name to fit on tiles, we recommend that you to specify a ShortName as well, to make sure your app's name doesn’t get truncated.
  • Logo images:

    You should replace these images with your own. You have the option of supplying images for different visual scales, but you are not required to supply them all. To ensure that you app looks good on a range of devices, we recommend that you provide 100%, 200%, and 400% scale versions of each image.

    Scaled images follow this naming convention: testing

    <image name>.scale-<scale factor>.<image file extension>

    For example: SmallLogo.scale-100.png

    When you refer to the image, you refer to it as <image name>.<image file extension> ("SmallLogo.png" in this example). The system will automatically select the appropriate scaled image for the device from the images you've provided.

  • You don't have to, but we highly recommend supplying logos for wide and large tile sizes so that the user can resize your app's tile to those sizes. To provide these additional images, you create a DefaultTile element and use the Wide310x150Logo and Square310x310Logo attributes to specify the additional images:

    <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Logo.png"
            Square44x44Logo="Assets\SmallLogo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\WideLogo.png"
              Square310x310Logo="Assets\LargeLogo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>
    

Use notifications to customize your tile

After your app is installed, you can use notifications to customize your tile. You can do this the first time your app launches or in response to some event, such as a push notification.

  1. Create an XML payload (in the form of an Windows.Data.Xml.Dom.XmlDocument) that describes the tile.

  2. Create a tile notification object and pass it the XmlDocument you created. There are several types of notification objects:

  3. Use the Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication to create a TileUpdater object.

  4. Call the TileUpdater.Update method and pass it the tile notification object you created in step 2.
© 2016 Microsoft