Les tiles (tuiles) utilisé dans le windows Phone sont composé the trois éléments :

• Une image
• Un text
• Un compteur

Référencer ces éléments est réalisé via l’objet « ShellTile », via lequel l’on peut rajouter, modifier ou supprimer des « tiles ».

Dans certains cas, il est nécessaire de créer un « tile » contenant des informations dynamiques. Cela se fait en créant une image, de la sauvegarder dans « l’IsolatedStorage » et de la référencer.

Ci-dessous la procédure à suivre.

La première étape est de créé une image de 173 pixels sur 173 pixels (grandeur du « tile »).

var wb = new WriteableBitmap(173, 173);

Dans cette image, on va « composer » notre nouveau « tile » via un ensemble d’objets graphiques.

Une image de référence reprise des ressources de notre projet par exemple (dans l’exemple, j’utilise l’image du « tile » par défaut). A noter que la propriété « Opacity » me permet d’assombrir l’image afin que le texte ressort plus).

BitmapImage img = new BitmapImage();
img.SetSource(Application.GetResourceStream(new Uri("Background.png", UriKind.Relative)).Stream);
var imgbkg = new Image
     {
          Opacity = 0.7,
          Height = 173,
          Width = 173,
          Stretch = Stretch.UniformToFill,
          Source = img
     };
wb.Render(imgbkg, new TranslateTransform());

Du texte.

var text = new TextBlock
{
     Text = "Hello",
     Foreground = new SolidColorBrush(Colors.White),
     FontFamily = new FontFamily("Segoe WP Black"),
     FontSize = 30
};
wb.Render(text, new TranslateTransform { X = 167 - text.ActualWidth, Y = 6 });

Une forme géométrique.

var rect = new Rectangle
{
     Width = text.ActualWidth + 4,
     Height = text.ActualHeight + 4,
     Stroke = new SolidColorBrush(Colors.Yellow),
};
wb.Render(rect, new TranslateTransform { X = 165 - text.ActualWidth, Y = 4 });

Après avoir “composer” notre image, on force celle-ci à se redessiner.

wb.Invalidate();

Cette nouvelle image, on DOIT la sauvegarder dans notre IsolatedStorage dans un répertoire spécifique « isostore:/Shared/ShellContent/» (si on la met autre part, cela ne fonctionne pas).

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
{
     if (!isf.DirectoryExists("Shared"))
     {
          isf.CreateDirectory("Shared");
     }
     if (!isf.DirectoryExists("Shared/ShellContent"))
     {
          isf.CreateDirectory("Shared/ShellContent");
     }
     using (IsolatedStorageFileStream fs = isf.CreateFile("/Shared/ShellContent/customtile"))
     {
          wb.SaveJpeg(fs, 173, 173, 0, 80);
     }
}

Il ne nous reste plus qu’à modifier notre « tile » pour référencer notre image. Dans l’exemple, je modifie le « tile » principal.

Uri isostoreURI = new Uri("isostore:/Shared/ShellContent/customtile", UriKind.Absolute);
ShellTile.ActiveTiles.First().Update(new StandardTileData() { BackgroundImage = isostoreURI, Count=0, Title="" });