×
Namespaces

Variants
Actions
(Difference between revisions)

Custom Live Tile with Formatted Text

From Nokia Developer Wiki
Jump to: navigation, search
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Introduction)
pavan.pareta (Talk | contribs)
(Pavan.pareta -)
Line 31: Line 31:
 
[[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 WMAppManifest.xml and
+
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 '''WMAppManifest.xml''' file. You can edit application manifest file with Right-click manifest file '''WMAppManifest.xml''' and
 
* select {{Icode| View Code }} menu item or
 
* select {{Icode| View Code }} menu item or
 
* use {{Icode| Open With… }} menu item and select {{Icode| XML (Text) Editor}}
 
* use {{Icode| Open With… }} menu item and select {{Icode| XML (Text) Editor}}
Line 78: Line 78:
 
</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:
+
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 use empty URI. The final results are:
 
[[File:BackContentDefaultUpdate.png|none|frame|Back Content Default using Update]]
 
[[File:BackContentDefaultUpdate.png|none|frame|Back Content Default using Update]]
  
Line 134: Line 134:
 
</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.
+
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 ended with dots.
  
{{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. }}
+
{{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:
+
If we don’t set {{Icode|BackContent}} and {{Icode|WideBackContent}} with empty string we’ll get default back content over new one like this:
 
[[File:ResetBackContent.png|none|frame|Reset Back Content]]
 
[[File:ResetBackContent.png|none|frame|Reset Back Content]]
  
Line 194: Line 194:
 
</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 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.
  
 
==How to get image from Isolated Storage==
 
==How to get image from Isolated Storage==

Revision as of 06:08, 24 June 2013

This article explains how to create a custom Live Tiles for Windows Phone.

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: pavan.pareta (24 Jun 2013)

Contents

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 Tiles for Windows Phone MSDN page. When working with Live Tiles you provide default Tile images for Flip Template using WMAppManifest.xml file from Assets/Tiles folder:

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:

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 WMAppManifest.xml file. You can edit application manifest file with Right-click manifest file 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).

Update Live Tile with default parameters

If we want to change some data for Flip Live Tile we can do it from code:

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);
}

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:

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

The final result of using image as Back content are:

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
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
 
//Crete 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);
}
}

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.

Note.pngNote: 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:

Reset Back Content

We use next code:

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

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 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.

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

Summary

Providing Custom functionality for Live Tiles can be very useful in Windows Phone applications.

References

367 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.

×