0 Comments

There are three build in templates in Windows Phone 8.

  • FlipTile
  • IconicTile
  • CycleTile

 

Flip template

The flip template has an image and when it flips, it has text on it.

Iconic template

The iconic template has an icon and when it has been set to “wide” it has three text lines visible. If you want to only use line two or three, you need to supply an empty string to WideContent1. Otherwise it will not render any text and it will just display a large version of the icon. That took me a while to figure out. As you might have guessed, I used this template at first. But it is limited. When a tile is not set to wide, it only has a title and an icon, which was not enough for me.

 

Cycle template

This requires a lot of images which was not suitable for me.

 

Custom live tile

So I looked for an other option. There was a resource online which created a usercontrol and rendered it as image and set that source image to a FlipTile, but it was not widely used because of the bad performance. The best option there is, and which you have probably already have found, is a writeablebitmap.

 

image

 

So fire up the Package manager console:

  • Go to upper right quick launch (ctrl + q, or what your shortcut is)
  • Type in ‘package’ and hit enter
    image
  • Then type ‘install-package writablebitmapex’ (ps. you can also use nuget)
  • You should also install WP Power Tools from codeplex: https://wptools.codeplex.com/
  • It is recommended to use a FlipTile for your custom tile and just compose a bitmap as background and do not use the flip side.
FlipTileData ftd = GetFlipTd();
Uri u = new Uri("/App.xaml", UriKind.Relative);
try
{
    ShellTile tile = ShellTile.ActiveTiles.Where(t => t.NavigationUri == u).First();
    if (tile != null)
    {
        tile.Delete();
    }
}
catch { }
ShellTile.Create(u, ftd, true);

The GetFlipTd method is the one where the magic happends. (composing the bitmap) This code will get you started:

private FlipTileData GetFlipTd()
{
    WriteableBitmap wbSmall = BitmapFactory.New(159, 159);
    WriteableBitmap wbMedium = BitmapFactory.New(336, 336);
    WriteableBitmap wbLarge = BitmapFactory.New(691, 336);

    wbSmall.Clear(Colors.Green);
    wbMedium.Clear(Colors.Green);
    wbLarge.Clear(Colors.Green);

    TextBlock lbl = new TextBlock();
    lbl.Text = "Nice custom tile";
    lbl.FontSize = 18.0;
    lbl.Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));

    WriteableBitmap tBmp = new WriteableBitmap(lbl, null);
    wbSmall.Blit(new Point(19, 19), tBmp, new Rect(0, 0, tBmp.PixelWidth, tBmp.PixelHeight), Colors.White, System.Windows.Media.Imaging.WriteableBitmapExtensions.BlendMode.Alpha);
    wbMedium.Blit(new Point(19, 19), tBmp, new Rect(0, 0, tBmp.PixelWidth, tBmp.PixelHeight), Colors.White, System.Windows.Media.Imaging.WriteableBitmapExtensions.BlendMode.Alpha);
    wbLarge.Blit(new Point(19, 19), tBmp, new Rect(0, 0, tBmp.PixelWidth, tBmp.PixelHeight), Colors.White, System.Windows.Media.Imaging.WriteableBitmapExtensions.BlendMode.Alpha);

    wbSmall.Invalidate();
    wbMedium.Invalidate();
    wbLarge.Invalidate();

    SaveFileToIS("Shared/ShellContent/Small.jpg", wbSmall);
    SaveFileToIS("Shared/ShellContent/Medium.jpg", wbMedium);
    SaveFileToIS("Shared/ShellContent/Large.jpg", wbLarge);

    FlipTileData ftd = new FlipTileData(); // 19 px border
    ftd.BackContent = "";
    ftd.BackTitle = "";
    ftd.Title = "";
    ftd.WideBackContent = "";
    ftd.SmallBackgroundImage = new Uri("isostore:/Shared/ShellContent/Small.jpg"); // 159 x 159
    ftd.BackgroundImage = new Uri("isostore:/Shared/ShellContent/Medium.jpg"); // 336 x 336
    ftd.WideBackgroundImage = new Uri("isostore:/Shared/ShellContent/Large.jpg"); // 691 x 336
    return ftd;
}

The secret is the location where you should store the image. You can debug/view this with the WP Power Tools. When you store the jpg (or png) in an other folder you will get “Argument Exception :uri for Isolated Storage” It was poorly documented, but I have found it here in the answer (2nd part) http://social.msdn.microsoft.com/Forums/wpapps/en-US/9c68b4e7-9863-4bcf-a839-b21fac8cc231/argument-exception-uri-for-isolated-storage

and the specific path was also mentioned here http://stackoverflow.com/a/15589739/169714 

 

If you want a custom tile, it needs to be in /Shared/ShellContent/ !!

 

Good luck!

 

image

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn
 
Post comment