• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

Les tuiles

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les tuiles, ce sont les icônes représentant nos applications présentes sur la page d’accueil d’un Windows Phone. Elles sont un raccourci pour démarrer les applications présentes dans notre téléphone, un peu comme les icônes présentes sur le bureau de nos vieux Windows. Pour l'instant, rien d'extraordinaire vous me direz !

Mais elles sont un peu plus qu'une simple icône permettant de démarrer une application. Elles peuvent avoir une icône mais également du texte fournissant des informations sur l'application ou son contexte. Elles peuvent également être animées et sont une des grandes forces de Windows Phone. D'ailleurs, Windows 8 s'est empressé de se les récupérer ;) .

Présentes en une seule taille avec Windows Phone 7.5, elles se déclinent en trois tailles à partir de Windows Phone 7.8, pour le plus grand plaisir des utilisateurs qui les ont adoptées avec intérêt.

Découvrons à présent ces fameuses tuiles.

Que sont les tuiles ?

Les tuiles, ce sont les icônes représentant nos applications présentes sur la page d’accueil d’un Windows Phone (ou sur la page d'accueil de l'émulateur, comme à la figure suivante) :

Les tuiles de la page d'accueil dans l'émulateur
Les tuiles de la page d'accueil dans l'émulateur

Lorsque l’on clique dessus, notre application est lancée. Lorsque l’on télécharge (ou développe :D ) une application, la tuile n’est pas tout de suite présente sur l’accueil. C’est à l’utilisateur de choisir explicitement de l’y mettre en l’épinglant sur la page d’accueil. Cela se fait en allant dans la liste des applications et en appuyant longtemps sur l’application. Cela fait apparaître un menu contextuel qui propose de supprimer l’application, de l’épingler sur la page d’accueil ou d'aller la noter sur le Windows Phone Store.
Il est également possible d’épingler une application depuis l’émulateur suivant le même principe, en cliquant longtemps sur l’application. Par exemple dans la figure suivante, pour épingler l'application DemoChooser, je clique dessus et un menu déroulant apparaît.

Épingler une application
Épingler une application

Dans l'émulateur, on ne peut bien sûr pas noter les applications et d'autant plus celles que nous sommes en train de développer :D .

Une fois l'application épinglée, nous pouvons aller sur l’écran d’accueil et nous aurons une magnifique tuile (voir figure suivante).

Notre application est épinglée et nous voyons sa tuile sur la page d'accueil
Notre application est épinglée et nous voyons sa tuile sur la page d'accueil

Des tuiles pour tous les goûts

Les tuiles existent en différentes tailles. Il y a les petites, les moyennes et les larges. Si les applications l’ont prévu, il est possible de redimensionner ces tuiles sur notre écran d’accueil. Voici par exemple dans la figure suivante la tuile permettant d’accéder aux images en taille large.

Une tuile en taille large
Une tuile en taille large

Pour redimensionner la tuile, il faut faire un toucher long sur celle-ci. Deux icônes apparaissent alors à droite de la tuile, comme le montre la figure suivante.

Redimensionnement des tuiles
Redimensionnement des tuiles

La première icône, en haut à droite de la tuile, permet de désépingler la tuile. Mais ici, c’est la seconde, en bas à droite de la tuile, qui nous intéresse et qui permet de passer dans la taille inférieure, ici la taille moyenne, puis la petite taille dans la figure suivante.

Tuiles en tailles moyenne et petite
Tuiles en tailles moyenne et petite

On peut constater que chaque taille offre une expérience différente fournissant plus ou moins d’informations, voire une information différente en fonction des souhaits de l’utilisateur.
Si vous essayez de redimensionner d’autres tuiles, vous verrez qu’elles ne supportent pas toutes les trois tailles, c’est une question de choix du créateur de l'application.
De même, les tuiles peuvent être de plusieurs styles différents. Nous venons de voir la tuile de l’application images qui, dans son format large et moyen, affiche des images qui défilent sur la tuile. On appelle ce format le « cycle tile template », que l’on peut traduire en modèle de tuile cyclique. Elle permet de faire défiler entre 1 et 9 images.
Il existe trois modèles en tout que nous allons découvrir dans ce chapitre :

  • Le modèle de tuile cyclique (cycle tile template)

  • Le modèle de tuile qui se retourne (flip tile template)

  • Le modèle de tuile icône (iconic tile template)

Les tuiles ont les tailles suivantes :

-

Flip et cycle

Iconic

Petite

159x159

110x110

Moyenne

336x336

202x202

Large

691x336

-

Nul besoin de vous soucier des différentes résolutions, Windows Phone s’occupe de redimensionner tout pour nous, vous n’avez besoin que d’ajouter les images pour la résolution XWGA.

Personnaliser les tuiles par défaut

Nous venons de voir comment épingler notre application sur la page d’accueil. Celle-ci prend par défaut l’apparence de l'image se trouvant dans le répertoire du projet Assets\Tiles\FlipCycleTileMedium.png, que l'on peut retrouver dans l'explorateur de solutions illustré dans la figure suivante.

Les images par défaut des tuiles
Les images par défaut des tuiles

Cette tuile s'enrichit du titre de l’application (voir figure suivante).

Image de la tuile par défaut
Image de la tuile par défaut

Plus précisément, elle est construite grâce aux paramètres présents dans le fichier WMAppManifest.xml, que l'on obtient en dépliant le répertoire properties du projet et en double-cliquant dessus (voir prochaine figure).

Paramétrage de la tuile par défaut, dans WMAppManifest.xml
Paramétrage de la tuile par défaut, dans WMAppManifest.xml

Nous pouvons voir que le modèle de la vignette est Flip et que l’application ne supporte que les tuiles de taille petite et moyenne. D’ailleurs, si vous essayez de redimensionner la tuile sur la page d’accueil, vous ne pourrez pas l’avoir en large. Pour cela, vous pouvez cocher la case « prise en charge des grandes vignettes » et choisir une image pour la grande taille, par exemple FlipCycleTileLarge.png qui est (comme par hasard) à la bonne taille et qui se trouve dans le répertoire Assets/Tiles avec les autres images de tuiles.

Mais l’éditeur du fichier WMAppManifest.xml n’est pas complet. Enfin, disons qu’on peut faire plus de choses directement en modifiant le contenu du fichier XML. Si vous l’ouvrez, vous verrez notamment la section Tokens contenant la définition des tuiles :

<Tokens>
  <PrimaryToken TokenID="DemoTuilesToken" TaskName="_default">
	<TemplateFlip>
	  <SmallImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileSmall.png</SmallImageURI>
	  <Count>0</Count>
	  <BackgroundImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileMedium.png</BackgroundImageURI>
	  <Title>DemoTuiles</Title>
	  <BackContent>
	  </BackContent>
	  <BackBackgroundImageURI>
	  </BackBackgroundImageURI>
	  <BackTitle>
	  </BackTitle>
	  <LargeBackgroundImageURI IsRelative="true" IsResource="false">Assets\Tiles\FlipCycleTileLarge.png</LargeBackgroundImageURI>
	  <LargeBackContent />
	  <LargeBackBackgroundImageURI IsRelative="true" IsResource="false">
	  </LargeBackBackgroundImageURI>
	  <DeviceLockImageURI>
	  </DeviceLockImageURI>
	  <HasLarge>True</HasLarge>
	</TemplateFlip>
  </PrimaryToken>
</Tokens>

On y retrouve les diverses urls relatives vers nos images de tuiles, mais aussi d’autres choses. Modifions par exemple la balise count pour mettre la valeur 3 à la place de 0 :

<Count>3</Count>

Modifions également les balises BackContent et BackTitle :

<BackContent>Ma super appli</BackContent>
<BackTitle>Vive les tuiles</BackTitle>

Nous obtenons le résultat dans la figure qui suit.

La tuile, de face et de dos
La tuile, de face et de dos

Sur la partie gauche de l’image, nous pouvons voir un petit 3, qui correspond à la balise Count. Cela permet, pourquoi pas, d’indiquer qu’il y a 3 éléments nouveaux à venir consulter dans notre application. La partie droite de l’image correspond au dos de la tuile. Rappelez-vous, notre application utilise le modèle de tuile « Flip » qui se retourne pour fournir d’autres informations. Ici, nous avons affiché du texte, mais il est également possible d’afficher une image grâce à la balise BackBackgroundImageURI.
Notez que si vous changez la taille de la tuile, vous verrez que le dos de la tuile ne s’affiche qu’en grande ou moyenne taille et qu’il ne s’affiche pas en petite taille.
Mais tout ceci est bien statique … notamment par rapport au chiffre en haut à droite. On ne peut pas envisager de déterminer qu'il y aura 3 nouveaux éléments tout le temps, dès la création de l'application. Heureusement, il est également possible de modifier la tuile pour mettre à jour quelques informations lorsque l'application se ferme, et rappeler à l'utilisateur où il en était lorsqu'il la rouvre. Pour effectuer ces mises à jour, il faut accéder à la tuile concernée via la classe statique ShellTile, avec le code suivant :

public MainPage()
{
    InitializeComponent();

    ShellTile tuileParDefaut = ShellTile.ActiveTiles.First();

    if (tuileParDefaut != null)
    {
        FlipTileData flipTileData = new FlipTileData
        {
            Title = "Ma tuile",
            Count = 4,
            BackTitle = "Nouveau titre",
            BackContent = "Ouvrez vite !",
        };

        tuileParDefaut.Update(flipTileData);
    }
}

Une fois la mise à jour de la tuile faite, nous pourrons avoir un nouveau rendu, illustré dans la figure suivante.

La tuile créée par code, en grande taille
La tuile créée par code, en grande taille

Du coup, je vous montre la tuile en grande taille :) .
Notez la présence du chiffre 4 en haut à droite qui correspond à la propriété Count. Mettre 0 ou null dans la propriété effacera le nombre qui apparaît.

Et les autres modèles de tuiles alors ?

J’y arrive. Car effectivement, nous n’avons vu que les tuiles qui se retournent (« flip »), il reste encore les tuiles cycliques (« cycle ») et les tuiles icônes (« iconic »). Sachez dès à présent que le principe de création est globalement le même.
Pour les tuiles cycliques (« cycle »), vous pouvez faire défiler de 1 à 9 images. Changez le modèle dans l’éditeur et vous pourrez voir que vous allez pouvoir remplir jusqu’à 9 images (voir prochaine figure).

Modification du modèle de tuile cyclique
Modification du modèle de tuile cyclique

J’en ai profité pour mettre quelques images de notre mascotte préférée dans la figure suivante. Une fois la mascotte épinglée, nous pourrons voir les images défiler.

Les images de Zozor défilent dans la tuile
Les images de Zozor défilent dans la tuile

Pour mettre à jour l'image qui s'affiche par défaut sur la tuile, on utilisera la classe CycleTileData et notamment la propriété CycleImages qui est un tableau d’Uri pointant sur des images à afficher. Notez que la propriété Count est également disponible pour ce modèle de tuile.

Reste les tuiles icônes (« iconic », voir figure suivante).

Modification du modèle de tuiles icônes
Modification du modèle de tuiles icônes

Le résultat des tuiles icônes en grande taille est illustré dans la figure qui suit.

Tuile icône en grande taille
Tuile icône en grande taille

Remarque, ici j’ai modifié la balise Count et la balise Message :

<Count>1</Count>
<Message>Venez vite découvrir Zozor !</Message>

À noter qu’on utilisera la classe IconicTileData pour créer la tuile icône par code.

Créer des tuiles secondaires

La tuile principale permet de lancer l’application. Il n’y a qu’une façon pour les obtenir : épingler l’application depuis le menu, comme nous l’avons vu.
Les tuiles secondaires permettent de démarrer l’application d’une façon particulière. Elles servent en général à accéder à des fonctionnalités de l’application, comme un raccourci. Ainsi, il est possible de créer des tuiles qui vont naviguer directement sur une page précise de l’application, avec pourquoi pas des paramètres.
Reprenez par exemple notre dernier TP, qui contenait un jeu de grattage et un jeu de secouage … Quand j’ai réalisé ces jeux, c’était un peu insupportable de devoir passer à chaque fois par le menu pour lancer une application et tester une petite modification. Que je suis triste de ne pas avoir eu une telle fonctionnalité de tuiles secondaires ! Avec elles, j’aurai pu facilement créer des raccourcis vers les pages de mon choix …
Alors, réparons tout de suite cette erreur et rajoutons sur la page principale deux boutons permettant de créer nos tuiles secondaires :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel>
        <Button Content="Grattage ..." Tap="Button_Tap" />
        <Button Content="Secouage ..." Tap="Button_Tap_1" />
    </StackPanel>
    <StackPanel Grid.Row="1" VerticalAlignment="Bottom">
        <Button Content="Créer tuile grattage" Tap="Button_Tap_2" />
        <Button Content="Créer tuile secouage" Tap="Button_Tap_3" />
    </StackPanel>
</Grid>

Nous utiliserons grosso modo le même code et le même principe pour créer une tuile secondaire :

private void Button_Tap_2(object sender, System.Windows.Input.GestureEventArgs e)
{
    ShellTile tuileGrattage = ShellTile.ActiveTiles.FirstOrDefault(elt => elt.NavigationUri.ToString().Contains("Grattage.xaml"));
    if (tuileGrattage == null)
    {
        FlipTileData tuile = new FlipTileData
        {
            SmallBackgroundImage = new Uri("/Assets/Tiles/gratter-petit.png", UriKind.Relative),
            BackgroundImage = new Uri("/Assets/Tiles/gratter-moyen.png", UriKind.Relative),
            Title = "Grattage",
            BackContent = "Accès direct au gratage",
        };

        ShellTile.Create(new Uri("/Grattage.xaml", UriKind.Relative), tuile, false);
    }
}

private void Button_Tap_3(object sender, System.Windows.Input.GestureEventArgs e)
{
    ShellTile tuileSecouage = ShellTile.ActiveTiles.FirstOrDefault(elt => elt.NavigationUri.ToString().Contains("Secouage.xaml"));
    if (tuileSecouage == null)
    {
        FlipTileData tuile = new FlipTileData
        {
            SmallBackgroundImage = new Uri("/Assets/Tiles/secouer-petit.png", UriKind.Relative),
            BackgroundImage = new Uri("/Assets/Tiles/secouer-moyen.png", UriKind.Relative),
            Title = "Secouage",
            BackContent = "Accès direct au secouage",
        };

        ShellTile.Create(new Uri("/Secouage.xaml", UriKind.Relative), tuile, false);
    }
}

Pour éviter d’ajouter plusieurs fois la même tuile, on pourra se baser sur la propriété NavigationUri des tuiles existantes, afin de vérifier si elles ont déjà été ajoutées.
Il ne reste plus qu’à cliquer sur nos boutons. Vous verrez que lorsque la tuile secondaire est créée, nous sommes renvoyés sur la page d’accueil pour voir le résultat, ce qui implique que l’application passe dans un mode désactivé. Pour la réactiver, il faudra soit faire un retour arrière, soit pourquoi pas utiliser nos nouvelles tuiles.

Les tuiles secondaires de notre application de jeu
Les tuiles secondaires de notre application de jeu

Et ainsi, nous accédons directement à la page XAML indiquée lors de la création de la tuile secondaire, qui permet de naviguer directement sur la page. Pratique non ?
Remarquez que vous pouvez également passer des paramètres à la page, comme ce que nous avions fait dans le chapitre sur la navigation. Ici, ce n’est pas utile car nous avons deux pages distinctes, mais nous pourrions avoir la même page qui affiche une fiche produit d’une application de vente que l’on souhaiterait charger avec des produits différents … Par exemple :

string idProduit = "telehd";
ShellTile tuileProduit = ShellTile.ActiveTiles.FirstOrDefault(elt => elt.NavigationUri.ToString().Contains("idproduit=" + idProduit));
if (tuileProduit == null)
{
    FlipTileData tuile = new FlipTileData
    {
        Title = "Télé HD",
        BackContent = "Accès direct à la télé de vos rêves ...",
    };

    ShellTile.Create(new Uri("/VoirProduit.xaml?idproduit=" + idProduit, UriKind.Relative), tuile, false);
}

Vous pouvez voir ce que donne ce bout de code sur la figure suivante.

La tuile secondaire
La tuile secondaire

Je vous renvoie au chapitre sur la navigation pour exploiter la query string, avec :

NavigationContext.QueryString.TryGetValue("idproduit", out valeur);

Bien sûr, vous pouvez créer des tuiles secondaires dans tous les modèles que vous souhaitez. Illustrons par exemple le modèle cyclique :

ShellTile secondeTuile = ShellTile.ActiveTiles.FirstOrDefault(elt => elt.NavigationUri.ToString().Contains("VieZozor.xaml"));
if (secondeTuile == null)
{
    CycleTileData tuile = new CycleTileData
    {
        CycleImages = new Uri[]
        {
            new Uri("/zozor_01.png", UriKind.Relative),
            new Uri("/zozor_02.png", UriKind.Relative),
            new Uri("/zozor_03.png", UriKind.Relative),
            new Uri("/zozor_04.png", UriKind.Relative),
        },
        Title = "Accédez à la vie de zozor"
    };

    ShellTile.Create(new Uri("/VieZozor.xaml", UriKind.Relative), tuile, false);
}

Modifier et supprimer une tuile

Nous avons vu qu’il était possible de modifier des tuiles via la méthode Update. Ceci est valable pour la tuile principale, mais également pour les tuiles secondaires. Par exemple, le code ci-dessous montre comment mettre à jour une tuile secondaire d'une application de vente en ligne en affichant le changement de stock de l'un de ses produits :

ShellTile tuileProduit = ShellTile.ActiveTiles.FirstOrDefault(elt => elt.NavigationUri.ToString().Contains("idproduit=" + idProduit));
if (tuileProduit != null)
{
    FlipTileData tuile = new FlipTileData
    {
        Title = "Télé HD",
        BackContent = "Plus que 2 produits en stock !!!",
    };

    tuileProduit.Update(tuile);
}

Il n’est par contre pas possible de modifier l’URL de la page à afficher. Dans ce cas, il faudra la supprimer puis la recréer. Supprimer une tuile secondaire est très facile, il suffit d'utiliser la méthode Delete. Par exemple, si nous souhaitons supprimer la tuile du secouage, nous pourrons écrire :

ShellTile tuileSecouage = ShellTile.ActiveTiles.FirstOrDefault(elt => elt.NavigationUri.ToString().Contains("Secouage.xaml"));
if (tuileSecouage == null)
    tuileSecouage.Delete();

L’utilisateur pourra bien sûr faire la même chose tout seul depuis l’écran d’accueil.

  • Les tuiles se trouvent sur la page d'accueil d'un Windows Phone et sont un raccourci évolué permettant de démarrer une application.

  • Elles sont disponibles en plusieurs tailles : petite, moyenne ou grande.

  • Il existe plusieurs modèles de tuiles : tuile icône (« iconic »), tuile cyclique (« cyclic »), tuile qui se retourne (« flip »).

  • Il est possible de créer des tuiles secondaires, qui permettent d'accéder à une application à l'aide de raccourcis supplémentaires.

Exemple de certificat de réussite
Exemple de certificat de réussite