Seven helpers for Live Tile Image generation:

  • Renders a number and an image on the tile like on the messages or the inbox tile:


URI must be relative and the image will be resized to width and height = 69 px
   var tileUrl = TileImageGenerator.GenerateTile(new Uri("Images/tileBackground.png", UriKind.Relative), 7, "UrisLiveTileImage");
   ShellTile.Create(new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative), new StandardTileData { Title = "Image + number", BackgroundImage = tileUrl });
  • Renders a set of strings on the specific position on the tile:


   var strings = new List<StringsWithTransform>
   {
      new StringsWithTransform{ Text="color1", TranslateTransform=new TranslateTransform() { X=48, Y=30 } },
      new StringsWithTransform{ Text="color2", TranslateTransform=new TranslateTransform() { X=48, Y=80 } }
   };

   var tileUrl = TileImageGenerator.GenerateTile(strings, "UrisLiveTileImage");

   ShellTile.Create(new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative), new StandardTileData { Title = "Text", BackgroundImage = tileUrl });
  • Renders a set of TextBlocks on the specific position on the tile
  • Renders a set of Images from URIs on the specific position on the tile:


URIs must be relative
Images must be with Build Action: Content
   var uris = new List<UriWithTransform>
   {
      new UriWithTransform{ Uri =new Uri("Images/1.png", UriKind.Relative), Height=30, Width=30, TranslateTransform=new TranslateTransform() {X=12, Y=30 } },
      new UriWithTransform{ Uri =new Uri("Images/5.png", UriKind.Relative), Height=30, Width=30, TranslateTransform=new TranslateTransform() { X=12,Y=80} }
   };

   var tileUrl = TileImageGenerator.GenerateTile(uris, "UrisLiveTileImage");
            
   ShellTile.Create(new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative), new StandardTileData { Title = "Images", BackgroundImage = tileUrl });
  • Renders a set of Images on the specific position on the tile
  • Renders 9 Images from Uri as a mosaic on the tile:


URIs must be relative
Images must be with Build Action: Content
   var uri1 = new Uri("Images/1.png", UriKind.Relative);
   var uri2 = new Uri("Images/2.png", UriKind.Relative);
   var uri3 = new Uri("Images/3.png", UriKind.Relative);
   var uri4 = new Uri("Images/4.png", UriKind.Relative);
   var uri5 = new Uri("Images/5.png", UriKind.Relative);
   var uri6 = new Uri("Images/6.png", UriKind.Relative);
   var uri7 = new Uri("Images/7.png", UriKind.Relative);
   var uri8 = new Uri("Images/8.png", UriKind.Relative);
   var uri9 = new Uri("Images/9.png", UriKind.Relative);
   var tileUrl = TileImageGenerator.GenerateTile(uri1, uri2, uri3, uri4, uri5, uri6, uri7, uri8, uri9, "MosaicLiveTileImage");
   ShellTile.Create(new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative), new StandardTileData { Title = "Mosaic", BackgroundImage = tileUrl });
  • Renders a set of TextBlocks and Images on the specific position on the tile:


URIs must be relative
Images must be with Build Action: Content
   var strings = new List<StringsWithTransform>
   {
      new StringsWithTransform{ Text="color1", TranslateTransform=new TranslateTransform() { X=48, Y=30 } },
       new StringsWithTransform{ Text="color2", TranslateTransform=new TranslateTransform() { X=48, Y=80 } }
   };

   var uris = new List<UriWithTransform>
   {
      new UriWithTransform{ Uri =new Uri("Images/1.png", UriKind.Relative), Height=30, Width=30, TranslateTransform=new TranslateTransform() {X=12, Y=30 } },
      new UriWithTransform{ Uri =new Uri("Images/5.png", UriKind.Relative), Height=30, Width=30, TranslateTransform=new TranslateTransform() { X=12,Y=80} }
   };

   var tileUrl = TileImageGenerator.GenerateTile(strings.Select(ImageGenerator.StringToTextBlock), uris.Select(ImageGenerator.UriToImage), "UrisLiveTileImage");
   ShellTile.Create(new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative), new StandardTileData { Title = "Text and images", BackgroundImage = tileUrl });
  • Rendering order:
    1. Images
    2. TextBlocks
If you need a tile from multiple images (or URIs) and layers a rule "first added - first rendered" applied. Let's take a look on a sample:

In this case you should add images (or URIs) to the list in this order: blue, pink, orange.

The same rule applies to the TextBlocks.
  • Renders one or two graphs on the tile:


Each graph takes no more than 7 numbers as an input
var data = new List<List<double>>
{
   new List<double>{ 1, -20, 25, 20, 13, 0, 50 },
   new List<double>{ 10, 20, 25, 20, 0, 18, 50 }
};

var legends = new List<string> { "USD", "EUR" };

var tileUrl = TileImageGenerator.GenerateGraphOnTile(data, legends, "UrisLiveTileImage");
var tile = ShellTile.ActiveTiles.FirstOrDefault(t => t.NavigationUri == new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative));
if (tile != null)
   tile.Delete();

ShellTile.Create(new Uri("/UtilitesSamples/TileGeneratorSample.xaml", UriKind.Relative), new StandardTileData { Title = "Graph", BackgroundImage = tileUrl });

Possible exceptions:
  • ArgumentException
  • ArgumentNullException
  • DirectoryNotFoundException
  • IOException
  • IsolatedStorageException
  • NullReferenceException
  • ObjectDisposedException
  • OverflowException
  • SecurityException

Last edited May 17, 2012 at 5:31 PM by kazarindn, version 18

Comments

No comments yet.