Translucent Live Tiles In Universal Windows Apps (UWP) on Win 10 mobile/phone

Question

I have a UWP app in the Windows 10 app store (World Time Clock). This app lets user pin live secondary tiles that display text that updates every minute (to show the current time in different cities around the world). These live text tiles are created as "adaptive tiles" using XML shown below:

tile definition xml

Currently, these live text tiles have a solid background color #000000 (black) pulled from the app manifest. The latest version of Windows 10 for phone has a setting use start screen tile transparency; it provides a nice effect but only for the Microsoft utilities. See screen shot below. Unfortunately, I cannot figure out how to allow the background for my text tiles to be transparent/translucent. I would expect the Windows to adjust the alpha channel/opacity/transparency; but, it does not. Also, the background tile color I can set in the manifest is RGB not ARGB; it does NOT allow specifying a alpha channel value. Does anyone know if it is possible for non-Microsoft apps to have translucent tile backgrounds on live text tiles? If so, any suggestion about how to achieve this effect (Microsoft semitransparent background and my opaque background tiles shown below)?

Translucent live tiles screenshot

What do you mean by "pulled from the app manifest"? In my default manifest the background is set to BackgroundColor="transparent", maybe you can try that? — Thomas Schneiter

DevAttendant DevAttendant · Accepted Answer · 2016-11-24T23:36:45

As mentioned already by Thomas in the comments you can change the background color of your tiles in the Package.appxmanifest. In code it's BackgroundColor="transparent" in the VisualElements tag:

<Applications>
  <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="MyApp.App">
    <uap:VisualElements DisplayName="MyApp" Square150x150Logo="Assets\Square150x150Logo.png" Square44x44Logo="Assets\Square44x44Logo.png" Description="MyApp" BackgroundColor="transparent">

If you want to have it in your app like in the Microsoft apps you can change the BackgroundColor of your SecondaryTile in code with something like that:

public static async Task ChangeSecondaryTilesBackground(bool transparent) {
    IReadOnlyList<SecondaryTile> tiles = await SecondaryTile.FindAllAsync();

    foreach (SecondaryTile tile in tiles) {
        if (transparent) 
            tile.VisualElements.BackgroundColor = Windows.UI.Colors.Transparent;
        else 
            tile.VisualElements.BackgroundColor = Windows.UI.Colors.Green; // Set to your color

        await tile.UpdateAsync();
    }
}

Updating the Primary tile here is a little bit more complicated as you will be required to create a new Xml content for the tile with a background image containing your color only and set it with tileUpdater.Update(new TileNotification(xmlContent));

Note that on PC the user can deactivate the tile with a right-click on it and then whatever set in the Package.appxmanifest will be used. The default content from the appxmanifest will be also shown when your TileNotification content is incorrect or fails to be loaded.

The other way around (e.g. if branding is important for you) is to keep the BackgroundColor in the appxmanifest and if the user wants to have a transparent Live Tile with the app icon only, simply create a SecondaryTile replicating the main app icon. That's how I've done it in PitlaneOne for example. The reason why I've done it like that was that setting the BackgroundColor in the appxmanifest to transparent will cause the app icon in the Applications list and in the Store listing to be transparent as well.

Translucent Live Tiles In Universal Windows Apps (UWP) on Win 10 mobile/phone

1 Answers