One of the most expected features of Mango release were live tiles allowing developers to present data on the Home screen. I was quite exited about this feature especially that I wanted to give users opportunity to learn new words or whole sentences. You can see it in action on Multi-Translator Webpage or you can install it from Marketplace.There are actually few ways to present data in live tiles.
FindAndDeleteTile method1: private void FindAndDeleteTile(string tileName)
2: {
3: ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DefaultTitle="+tileName));
4: if (tile != null)
5: tile.Delete();
6: }
TileHelper class
1: public static class TileHelper
2: {
3: public static void CreateTile(string content, string fileName, string originalFileName)
4: {
5: TextBlock text = new TextBlock()
6: {
7: Width = 173,
8: Height = 173,
9: TextWrapping = TextWrapping.Wrap,
10: Foreground = new SolidColorBrush(Colors.White),
11: Padding = new Thickness(5, 5, 5, 60),
12: FontSize = 18,
13: Clip = new RectangleGeometry { Rect = new Rect(0, 0, 173, 135) }
14: };
15: text.Text = content;
16: Canvas canvas = new Canvas() { Width = 173, Height = 173, Background = new SolidColorBrush(Colors.Blue) };
17: canvas.Children.Add(text);
18:
19: StreamResourceInfo sri = Application.GetResourceStream(new Uri(originalFileName, UriKind.Relative));
20: BitmapImage src = new BitmapImage();
21: src.SetSource(sri.Stream);
22: WriteableBitmap background = new WriteableBitmap(src);
23: WriteableBitmap bmp = new WriteableBitmap((int)canvas.Width, (int)canvas.Height);
24: bmp.Render(canvas, null);
25: bmp.Invalidate();
26:
27: for (int x = 0; x < canvas.Width; x++)
28: for (int y = 0; y < canvas.Height; y++)
29: //Detect the colour different from your canvas background (in this case Blue)
30: //and replace the background.jpg pixel with the one from your canvas
31: if (bmp.Pixels[y * (int)canvas.Width + x] != BitConverter.ToInt32(new byte[] { 255, 0, 0, 255 }, 0))
32: background.Pixels[y * (int)canvas.Width + x] = bmp.Pixels[y * (int)canvas.Width + x];
33:
34: var iss = IsolatedStorageFile.GetUserStoreForApplication();
35: using (var stm = iss.CreateFile(fileName))
36: background.SaveJpeg(stm, 173, 173, 0, 100);
37: }
38:
39: public static void CreateRenderedTile(FrameworkElement frameworkElement, string fileName)
40: {
41: WriteableBitmap bmp = new WriteableBitmap((int)frameworkElement.Width, (int)frameworkElement.Height);
42: bmp.Render(frameworkElement, null);
43: bmp.Invalidate();
44:
45: var iss = IsolatedStorageFile.GetUserStoreForApplication();
46: using (var stm = iss.CreateFile(fileName))
47: bmp.SaveJpeg(stm, 173, 173, 0, 100);
48: }
49: }
- Default approach - using API
1: var filename = "/Shared/ShellContent/renderedF.jpg";
2: var filenameBack = "/Shared/ShellContent/renderedB.jpg";
3: TileHelper.CreateRenderedTile(frontBorder, filename);4: TileHelper.CreateRenderedTile(backBorder, filenameBack);5:6: FindAndDeleteTile("Rendered");
7: StandardTileData NewTileData = new StandardTileData
8: {9: BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute),
10: Title = "rendered - front",
11: BackTitle = "rendered - back",
12: BackBackgroundImage = new Uri("isostore:" + filenameBack, UriKind.Absolute)
13: };14: ShellTile.Create(new Uri("/MainPage.xaml?DefaultTitle=Rendered", UriKind.Relative), NewTileData);
- Custom approaches:
- Rendered - Saving the content of controls visible on the screen into a file and using it as a tile background
1: var filename = "/Shared/ShellContent/renderedF.jpg";
2: var filenameBack = "/Shared/ShellContent/renderedB.jpg";
3: TileHelper.CreateRenderedTile(frontBorder, filename);4: TileHelper.CreateRenderedTile(backBorder, filenameBack);5:6: FindAndDeleteTile("Rendered");
7: StandardTileData NewTileData = new StandardTileData
8: {9: BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute),
10: Title = "rendered - front",
11: BackTitle = "rendered - back",
12: BackBackgroundImage = new Uri("isostore:" + filenameBack, UriKind.Absolute)
13: };14: ShellTile.Create(new Uri("/MainPage.xaml?DefaultTitle=Rendered", UriKind.Relative), NewTileData);
- In memory - Saving a content of controls generated in memory into a file and using it as a tile background
1: var filename = "/Shared/ShellContent/inMemoryF.jpg";
2: var filenameBack = "/Shared/ShellContent/inMemoryB.jpg";
3: TileHelper.CreateTile(front.Text, filename, "Images/background.jpg");
4: TileHelper.CreateTile(back.Text, filenameBack, "Images/backgroundBack.jpg");
5:6: FindAndDeleteTile("InMemory");
7: StandardTileData NewTileData = new StandardTileData
8: {9: BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute),
10: Title = "in memory - front",
11: BackTitle = "in memory - back",
12: BackBackgroundImage = new Uri("isostore:" + filenameBack, UriKind.Absolute)
13: };14: ShellTile.Create(new Uri("/MainPage.xaml?DefaultTitle=InMemory", UriKind.Relative), NewTileData);
Useful links:
- http://msdn.microsoft.com/en-us/library/hh202979(v=VS.92).aspx
- http://msdn.microsoft.com/en-us/library/ff769548%28v=VS.92%29.aspx
- http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx
Source code: LiveTiles.rar
