×
Namespaces

Variants
Actions
(Difference between revisions)

Custom Live Tile with Formatted Text

From Nokia Developer Wiki
Jump to: navigation, search
Spaso Lazarevic (Talk | contribs)
m (Spaso Lazarevic - - Update Live Tile with default parameters)
Amol Darekar (Talk | contribs)
(Amol Darekar - - Creating a Live Tile)
 
(18 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Draft]][[Category:Windows Phone 8]][[Category:XAML]][[Category:Code Examples]]
+
[[Category:UI on Windows Phone]][[Category:Code Examples]][[Category:XAML]][[Category:Windows Phone 8]]
{{Abstract|This article explains how to create a custom Live Tiles for Windows Phone.}}  
+
{{Abstract|This article explains how to format text on a Windows Phone ''Live Tile'' so that longer strings are not truncated.}}
  
 
{{ArticleMetaData <!-- v1.3 -->
 
{{ArticleMetaData <!-- v1.3 -->
|sourcecode= [[Media:CustomLiveTile.zip]]
+
|sourcecode= [[Media:CustomLiveTile.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
|devices= Nokia Lumia 810 <!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
+
|devices= Nokia Lumia 810 <!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
|sdk=Windows Phone SDK 8.0
+
|sdk= Windows Phone SDK 8.0
 
|platform= Windows Phone 8
 
|platform= Windows Phone 8
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Special Signing requirements -->
+
|signing= <!-- Special Signing requirements -->
 
|capabilities= <!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
 
|capabilities= <!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only - not link -->  
+
|translated-from-title= <!-- Title only - not link -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
Line 24: Line 24:
  
 
== Introduction ==
 
== Introduction ==
Using Live Tiles in Windows Phone applications give new fresh way of communication with users. We can provide various information via Live Tiles to the user using text or images. This post will explain how to create custom live tiles with custom formatted text on the secondary tile using Flip template which is default Tile template. You can find more general info about Tiles on [http://msdn.microsoft.com/en-US/library/windowsphone/develop/hh202948(v=vs.105).aspx Tiles for Windows Phone] MSDN page.
+
[http://msdn.microsoft.com/en-US/library/windowsphone/develop/hh202948(v=vs.105).aspx Live Tiles] are the entry point to a Windows Phone app, and can provide dynamic information to the user though text and images. By default apps get a [http://msdn.microsoft.com/en-US/library/windowsphone/develop/jj206971(v=vs.105).aspx Flip Tile] which has a front (usually displaying an icon) and back (usually displaying text) and periodically flips between them. Tiles come in three sizes - the user determines their preferred size at runtime.
When working with Live Tiles you provide default Tile images for Flip Template using {{Icode|WMAppManifest.xml }} file from {{Icode|Assets/Tiles }} folder:
+
[[File:TileImages-WMAppManifest.png|none|frame|Tile images]]
+
  
These tiles are default and you get it when you pin application from application list. You can change size of the tiles on the start screen of your device from small, to medium and large size. These Tiles looks like:
+
One common problem is that text that will fit nicely on the back of the wide tile size will often be truncated when displayed on the medium size. Of course it is possible to have shorter text for the smaller tile-size, but sometimes we ''really'' need to display all the text, and can do so acceptably at a smaller font.
 +
 
 +
<gallery widths="400px">
 +
File:BackContentDefaultUpdate.png|Custom text truncated
 +
File:BackContentCustomUpdate.png|Custom text formatted to fit tile
 +
</gallery>
 +
 
 +
This article shows how you can format the text on the back of a secondary tile by saving and displaying it as an image.
 +
 
 +
== Creating a Live Tile ==
 +
Apps automatically get a Flip Tile by default. Set the images for the front of the tiles (in the three different tile sizes) in the '''WMAppManifest.xml''' file from Assets/Tiles folder:
 +
[[File:TileImages-WMAppManifest.png|none|frame|Provide Tile images in the WMAppManifest.xml]]
 +
 
 +
The three tile sizes with their default "front" icons are shown below. The user can change the size on the device start screen to small, medium or large:
 
[[File:LiveTilesSize.png|none|frame|Live Tiles Sizes]]
 
[[File:LiveTilesSize.png|none|frame|Live Tiles Sizes]]
  
If you want to change text of the back side of the tile (yes, Flip Tile has two sides, front and back and they flips from front to back) you need to do it programmatically using code or from {{Icode|WMAppManifest.xml }} file. You can edit application manifest file with Right-click manifest file {{Icode|WMAppManifest.xml }}  and
+
The text on the back of the tile is changed programmatically using code or by manually editing the '''WMAppManifest.xml''' file. To edit the application manifest fileRight-click '''WMAppManifest.xml''' and
* select {{Icode| View Code }} menu item or
+
* select '''View Code''' menu item or
* use {{Icode| Open With… }} menu item and select {{Icode| XML (Text) Editor}}
+
* use '''Open With…''' menu item and select '''XML (Text) Editor'''
  
You can find changed data in next xml as part of the manifest file for BackContent, BackTitle and LargeBackContent parameters:
+
You can find changed data in next xml as part of the manifest file for {{Icode|BackContent}}, {{Icode|BackTitle}} and {{Icode|LargeBackContent}} parameters:
 
<code xml>
 
<code xml>
 
<Title>CustomLiveTile</Title>
 
<Title>CustomLiveTile</Title>
Line 53: Line 64:
 
==Update Live Tile with default parameters==
 
==Update Live Tile with default parameters==
  
If we want to change some data for Flip Live Tile we can do it from code:
+
If we want to change some data for Flip Live Tile we can do it from code. Firstly, we need to find Shell Tile and if it exists change {{Icode|Title}}, {{Icode|BackTitle}}, {{Icode|BackContent}} and {{Icode|WideBackContent}} parameters. If we don’t want to use {{Icode|BackBackgroundImage}} we need to specify an empty URI.
 
<code csharp>
 
<code csharp>
 
ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
 
ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
Line 78: Line 89:
 
</code>
 
</code>
  
Firstly, we need to find Shell Tile and if it exists change Title, BackTitle, BackContent and WideBackContent parameters. If we don’t want to use BackBackgroundImage we need to use empty URI. The final results are:
+
This results in the tile below. As you can see, the text in the medium Tile is truncated. We can’t change font size by default, so we will use image as Back content.
 
[[File:BackContentDefaultUpdate.png|none|frame|Back Content Default using Update]]
 
[[File:BackContentDefaultUpdate.png|none|frame|Back Content Default using Update]]
  
As you can note from medium size Tile we didn’t manage to put all the text in Tile. That would be the problem in situation when we want to show longer text  on Live Tiles. We can’t change font size by default, so we will use image as Back content.
 
  
==Update Live Tile with custom parameters==
+
==Update Live Tile with rendered image ==
  
The final result of using image as Back content are:
+
We can instead use an image of the text sized to fit the area (not that care needs to be taken to ensure that the text is still readable). The final result of the code in this section is shown below.
 
[[File:BackContentCustomUpdate.png|none|frame|Back Content Custom using Update]]
 
[[File:BackContentCustomUpdate.png|none|frame|Back Content Custom using Update]]
  
We will use two methods that are in Helpers class (if we want to use it from more then one location in our app it is appropriate to be in some sort of Util class):
+
We will use two methods that are in {{Icode|Helpers}} class (if we want to use it from more then one location in our app it is appropriate to be in some sort of {{Icode|Util}} class):
* {{Icode|UpdateLiveTile}}
+
* {{Icode|UpdateLiveTile}}
 
* {{Icode|RenderText}}
 
* {{Icode|RenderText}}
  
 +
 +
Firstly, we need to find Shell Tile, and if it exists change {{Icode|Title}}, {{Icode|BackTitle}}, {{Icode|BackContent}} and {{Icode|WideBackContent}} parameters. The catch is to use {{Icode|BackBackgroundImage}} and {{Icode|WideBackBackgroundImage}} from Isolated Storage that contain our custom back content text. For medium Live Tile size, if text is greater than 135 characters, we use only first 135 characters and an ellipse in order to ensure the font is still readable.
 
<code csharp>
 
<code csharp>
 
public static void UpdateLiveTile(string info)
 
public static void UpdateLiveTile(string info)
Line 123: Line 135:
 
flipTile.WideBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative); ////Default image for Background Image Wide Tile 691x336 px
 
flipTile.WideBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative); ////Default image for Background Image Wide Tile 691x336 px
  
//Crete image for WideBackBackgroundImage in IsoStore
+
//Create image for WideBackBackgroundImage in IsoStore
 
RenderText(info, 691, 336, 40, "WideBackBackgroundImage");
 
RenderText(info, 691, 336, 40, "WideBackBackgroundImage");
 
flipTile.WideBackBackgroundImage = new Uri(@"isostore:/Shared/ShellContent/WideBackBackgroundImage.jpg", UriKind.Absolute);
 
flipTile.WideBackBackgroundImage = new Uri(@"isostore:/Shared/ShellContent/WideBackBackgroundImage.jpg", UriKind.Absolute);
Line 134: Line 146:
 
</code>
 
</code>
  
Firstly, we need to find Shell Tile and if it exists change Title, BackTitle, BackContent and WideBackContent parameters. The catch is to use BackBackgroundImage and WideBackBackgroundImage from Isolated Storage that contain our custom back content text. For medium Live Tile size, if text is greater than 135 characters, we use only first 135 characters ended with dots.
+
We need to set the image as and empty string first and then use image from Isolated Storage.
 
+
{{Note|Also, there is one small trick if we want to get custom back content and wide back content from image, we need to set it as empty string first and then use image from Isolated Storage. }}
+
If we don’t set BackContent and WideBackContent with empty string we’ll get default back content over new one like this:
+
[[File:ResetBackContent.png|none|frame|Reset Back Content]]
+
 
+
We use next code:
+
 
<code csharp>
 
<code csharp>
 
flipTile.BackContent = " ";
 
flipTile.BackContent = " ";
 
flipTile.WideBackContent = " ";
 
flipTile.WideBackContent = " ";
 
</code>
 
</code>
 +
{{Warning|If we don’t set {{Icode|BackContent}} and {{Icode|WideBackContent}} with and empty string we'll get default back content written over our new content as shown below:
 +
[[File:ResetBackContent.png|none|frame|Reset Back Content]]}}
  
 
With {{Icode|RenderText }} method we generate image that contains our custom text with custom parameters such as font size, font weight, text alignment etc.
 
With {{Icode|RenderText }} method we generate image that contains our custom text with custom parameters such as font size, font weight, text alignment etc.
Line 194: Line 202:
 
</code>
 
</code>
  
You can play with formatting text that can appear on the Tile using size, foreground color, alignment, wrapping, weight when you create TextBlock control in {{Icode|RenderText }} method. But you need to be careful with colors because user can change current accent color to any color from accent colors so I would suggest you to use white color for back content text.
+
You can play with formatting text that can appear on the Tile using size, foreground color, alignment, wrapping, weight when you create {{Icode|TextBlock}} control in {{Icode|RenderText }} method. But you need to be careful with colours because user can change current accent colour. We suggest you white text for back content.
  
=== How to get image from Isolated Storage===
+
==How to get image from Isolated Storage==
If you want to get image that is generated in Isolated Storage you can install Windows Phone Power Tools for WP 8 from CodePlex (http://wptools.codeplex.com/). First, we need to connect to Emulator (if we install app on the Emulator) and then Get right file:
+
If you want to get image that is generated in Isolated Storage you can install Windows Phone Power Tools for WP 8 from CodePlex (http://wptools.codeplex.com/). First, we need to connect to Emulator (if we install app on the Emulator) and then Get right file:
 
[[File:WPPowerTools-GetFile.png|none|frame|WP Power Tools]]
 
[[File:WPPowerTools-GetFile.png|none|frame|WP Power Tools]]
  
 
So, the Back Content is image with accent color as background with white text as Back Content:
 
So, the Back Content is image with accent color as background with white text as Back Content:
[[File:BackBackgroundImage.jpg|none|frame|BackBackgroundImage]]
+
[[File:BackBackgroundImage.jpg|none|thumb|150px|BackBackgroundImage]]
  
 
== Summary ==
 
== Summary ==
  
Providing Custom functionality for Live Tiles can be very useful in Windows Phone applications.
+
This article showed how to provide custom title text to a Flip Tile, and more specifically, how to render title text to an image so that it can be displayed (in a smaller font) without being truncated.
 +
 
 +
==References==
 +
 
 +
* [http://spasol.wordpress.com/2013/06/24/creating-custom-live-tiles-for-windows-phone// Creating Custom Live Tiles for Windows Phone] (Spaso Lazarevic Blog - Original source)
 +
 
 +
{{SeeAlso|
 +
* [[Live Tile Templates in Windows Phone 8]]
 +
}}

Latest revision as of 19:07, 16 July 2013

This article explains how to format text on a Windows Phone Live Tile so that longer strings are not truncated.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 8.0
Devices(s): Nokia Lumia 810
Compatibility
Platform(s): Windows Phone 8
Windows Phone 8
Article
Created: Spaso Lazarevic (24 Jun 2013)
Last edited: Amol Darekar (16 Jul 2013)

Contents

[edit] Introduction

Live Tiles are the entry point to a Windows Phone app, and can provide dynamic information to the user though text and images. By default apps get a Flip Tile which has a front (usually displaying an icon) and back (usually displaying text) and periodically flips between them. Tiles come in three sizes - the user determines their preferred size at runtime.

One common problem is that text that will fit nicely on the back of the wide tile size will often be truncated when displayed on the medium size. Of course it is possible to have shorter text for the smaller tile-size, but sometimes we really need to display all the text, and can do so acceptably at a smaller font.

This article shows how you can format the text on the back of a secondary tile by saving and displaying it as an image.

[edit] Creating a Live Tile

Apps automatically get a Flip Tile by default. Set the images for the front of the tiles (in the three different tile sizes) in the WMAppManifest.xml file from Assets/Tiles folder:

Provide Tile images in the WMAppManifest.xml

The three tile sizes with their default "front" icons are shown below. The user can change the size on the device start screen to small, medium or large:

Live Tiles Sizes

The text on the back of the tile is changed programmatically using code or by manually editing the WMAppManifest.xml file. To edit the application manifest file, Right-click WMAppManifest.xml and

  • select View Code menu item or
  • use Open With… menu item and select XML (Text) Editor

You can find changed data in next xml as part of the manifest file for BackContent, BackTitle and LargeBackContent parameters:

<Title>CustomLiveTile</Title>
<BackContent>My Back Content</BackContent>
<BackBackgroundImageURI>
</BackBackgroundImageURI>
<BackTitle>My Back Title</BackTitle>
<LargeBackgroundImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileLarge.png</LargeBackgroundImageURI>
<LargeBackContent>My Large Back Content</LargeBackContent>

The final result of the text that we put for medium and large tiles are:

Back Content Default

What we can do from our application is to update data for default, Primary Tile and change every parameters in it or to create Secondary Tile (Secondary Tile can be created from application by pinning some functionality that are unique, for instance weather for specific city, contact for specific person or something similar).

[edit] Update Live Tile with default parameters

If we want to change some data for Flip Live Tile we can do it from code. Firstly, we need to find Shell Tile and if it exists change Title, BackTitle, BackContent and WideBackContent parameters. If we don’t want to use BackBackgroundImage we need to specify an empty URI.

ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
if (tile != null)
{
FlipTileData flipTile = new FlipTileData();
 
flipTile.Title = "Title Text";
flipTile.BackTitle = "Back Title Text";
 
//Medium size Tile 336x336 px
flipTile.BackContent = "Custom Content: The quick brown fox jumps over the lazy dog";
flipTile.BackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative);
flipTile.BackBackgroundImage = new Uri("", UriKind.Relative);
 
//Wide size Tile 691x336 px
flipTile.WideBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative);
flipTile.WideBackContent = "Custom Content: The quick brown fox jumps over the lazy dog";
flipTile.WideBackBackgroundImage = new Uri("", UriKind.Relative);
 
//Update Live Tile
tile.Update(flipTile);
}

This results in the tile below. As you can see, the text in the medium Tile is truncated. We can’t change font size by default, so we will use image as Back content.

Back Content Default using Update


[edit] Update Live Tile with rendered image

We can instead use an image of the text sized to fit the area (not that care needs to be taken to ensure that the text is still readable). The final result of the code in this section is shown below.

Back Content Custom using Update

We will use two methods that are in Helpers class (if we want to use it from more then one location in our app it is appropriate to be in some sort of Util class):

  • UpdateLiveTile
  • RenderText


Firstly, we need to find Shell Tile, and if it exists change Title, BackTitle, BackContent and WideBackContent parameters. The catch is to use BackBackgroundImage and WideBackBackgroundImage from Isolated Storage that contain our custom back content text. For medium Live Tile size, if text is greater than 135 characters, we use only first 135 characters and an ellipse in order to ensure the font is still readable.

public static void UpdateLiveTile(string info)
{
ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
if (tile != null)
{
FlipTileData flipTile = new FlipTileData();
flipTile.Title = "Title Text";
flipTile.BackTitle = "Back Title Text";
 
flipTile.BackContent = " ";
flipTile.WideBackContent = " ";
 
//Medium size Tile 336x336 px
//Crete image for BackBackgroundImage in IsoStore
if (info.Length >= 135)
{
RenderText(info.Substring(0, 135) + "...", 336, 336, 30, "BackBackgroundImage");
}
else
{
RenderText(info, 336, 336, 28, "BackBackgroundImage");
}
 
flipTile.BackBackgroundImage = new Uri(@"isostore:/Shared/ShellContent/BackBackgroundImage.jpg", UriKind.Absolute); //Generated image for Back Background 336x336
flipTile.BackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative); //Default image for Background Image Medium Tile 336x336 px
//End Medium size Tile 336x336 px
 
//Wide size Tile 691x336 px
flipTile.WideBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative); ////Default image for Background Image Wide Tile 691x336 px
 
//Create image for WideBackBackgroundImage in IsoStore
RenderText(info, 691, 336, 40, "WideBackBackgroundImage");
flipTile.WideBackBackgroundImage = new Uri(@"isostore:/Shared/ShellContent/WideBackBackgroundImage.jpg", UriKind.Absolute);
//End Wide size Tile 691x336 px
 
//Update Live Tile
tile.Update(flipTile);
}
}

We need to set the image as and empty string first and then use image from Isolated Storage.

flipTile.BackContent = " ";
flipTile.WideBackContent = " ";

Warning.pngWarning: If we don’t set BackContent and WideBackContent with and empty string we'll get default back content written over our new content as shown below:

Reset Back Content

With RenderText method we generate image that contains our custom text with custom parameters such as font size, font weight, text alignment etc.

private static void RenderText(string text, int width, int height, int fontsize, string imagename)
{
WriteableBitmap b = new WriteableBitmap(width, height);
 
var canvas = new Grid();
canvas.Width = b.PixelWidth;
canvas.Height = b.PixelHeight;
 
var background = new Canvas();
background.Height = b.PixelHeight;
background.Width = b.PixelWidth;
 
//Created background color as Accent color
SolidColorBrush backColor = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
background.Background = backColor;
 
var textBlock = new TextBlock();
textBlock.Text = text;
textBlock.FontWeight = FontWeights.Bold;
textBlock.TextAlignment = TextAlignment.Left;
textBlock.HorizontalAlignment = HorizontalAlignment.Center;
textBlock.VerticalAlignment = VerticalAlignment.Stretch;
textBlock.Margin = new Thickness(35);
textBlock.Width = b.PixelWidth - textBlock.Margin.Left * 2;
textBlock.TextWrapping = TextWrapping.Wrap;
textBlock.Foreground = new SolidColorBrush(Colors.White); //color of the text on the Tile
textBlock.FontSize = fontsize;
 
canvas.Children.Add(textBlock);
 
b.Render(background, null);
b.Render(canvas, null);
b.Invalidate(); //Draw bitmap
 
//Save bitmap as jpeg file in Isolated Storage
using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream imageStream = new IsolatedStorageFileStream("/Shared/ShellContent/" + imagename + ".jpg", System.IO.FileMode.Create, isf))
{
b.SaveJpeg(imageStream, b.PixelWidth, b.PixelHeight, 0, 100);
}
}
}

You can play with formatting text that can appear on the Tile using size, foreground color, alignment, wrapping, weight when you create TextBlock control in RenderText method. But you need to be careful with colours because user can change current accent colour. We suggest you white text for back content.

[edit] How to get image from Isolated Storage

If you want to get image that is generated in Isolated Storage you can install Windows Phone Power Tools for WP 8 from CodePlex (http://wptools.codeplex.com/). First, we need to connect to Emulator (if we install app on the Emulator) and then Get right file:

WP Power Tools

So, the Back Content is image with accent color as background with white text as Back Content:

BackBackgroundImage

[edit] Summary

This article showed how to provide custom title text to a Flip Tile, and more specifically, how to render title text to an image so that it can be displayed (in a smaller font) without being truncated.

[edit] References

This page was last modified on 16 July 2013, at 19:07.
323 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×