Silverlight themes comparatif : comment rendre votre application “user-friendly” ?

Développeurs, réalisez grâce aux thèmes Silverlight une application plus sexy et user-friendly pour vos utilisateurs ! Depuis Silverlight 4 et les styles implicites, beaucoup de thèmes sont apparus sur internet. Ainsi je vous propose de voir dans cet article les différents types de thèmes existants, les méthodologies pour les appliquer ainsi que les avantages et inconvénients de chacun pour choisir celui qui vous conviendra le mieux pour vos applications.

Thèmes du Silverlight Toolkit

Depuis Silverlight 3, nous avons eu l’apparition des thèmes dans le Toolkit Silverlight. A l’heure actuelle, le Toolkit Silverlight 4 comporte 11 thèmes différents :

Comment appliquez ces styles dans votre projet ?

2 méthodes s’offrent à vous :

– En utilisant le fichier *.xaml d’un thème :

1) Créez un répertoire “Themes” dans votre projet Silverlight puis rajoutez-y le fichier *.xaml du thème que vous souhaitez utiliser.

2) Ajoutez les références nécessaires à votre fichier de style (System.Windows.Controls.Data, System.Windows.Controls.Input, etc.),

3) Dans vos pages, ajoutez l’espace de nom suivant faisant référence à la *.dll de thèmes du Toolkit :

xmlns:toolkit=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit”

4) Dans votre page, appliquez sur la Grid “LayoutRoot” votre style :

<toolkit:Theme ThemeUri=”NomDuProjet;component/Themes/NomDeVotreTheme.xaml”>

<Grid x:Name=”LayoutRoot” />

</toolkit:Theme>

– En utilisant le fichier *.dll du thème :

1) Ajoutez la *.dll du thème que vous souhaitez appliquer

2) Ajoutez l’espace de nom suivant dans votre page :

xmlns:toolkit=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit”

3) Ajoutez dans vos pages, les balises suivantes ainsi tous les éléments contenus dans ces balises auront le thème appliqué :

<toolkit:Theme ThemeUri=”/System.Windows.Controls.Theming.BubbleCreme;component/Theme.xaml”>
<Grid x:Name=”LayoutRoot”>
</Grid>
</toolkit:Theme>

L’avantage d’utiliser la première solution c’est que vous pourrez par la suite modifier un style directement dans le *.xaml alors que le fichier *.dll n’est pas modifiable. La propriété “ThemeUri” permet de changer dynamiquement le thème de votre application.

Thèmes Silverlight made by Microsoft

Depuis Silverlight 4, l’apparition des styles implicites a déclenché une floraison de thèmes Silverlight sur internet. Parmi ces thèmes, on retrouve les 4 fameux thèmes « officiels » publiés par Microsoft que nous présente Tim Heuer dans son article.

Ces 4 thèmes sont les plus « complets » à mon gout puisqu’ils proposent également les styles pour les contrôles du Toolkit ne s’arrêtant pas aux styles de base :

– Windows 7 Theme : http://www.silverlight.net/content/samples/sl4/themes/windows7.html

– Cosmopolitan Theme, vous avez surement entendu parler de Metro ces dernier temps, le thème utilisé pour les Windows Phone et bientôt par Windows 8 ? En Silverlight Metro aussi existe sous forme de thème sous le nom de Cosmopolitan : http://www.silverlight.net/content/samples/sl4/themes/cosmopolitan.html

– Accent Color Theme : http://www.silverlight.net/content/samples/sl4/themes/accent.html

– JetPack Theme : http://www.silverlight.net/content/samples/sl4/themes/jetpack.html

Les 4 thèmes sont à télécharger ici : http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=14590

Comment appliquez ces styles dans votre projet ?

2 méthodes s’offrent également à vous :

– En utilisant le fichier SL4Themes-templates.zip

Dans ce zip vous trouverez pour chaque thème 2 fichiers *.msi pour installer un Template de projet Silverlight (Navigation Application ou Silverlight Application et RIA Services Application). En créant un nouveau projet Silverlight, vous n’aurez plus qu’à choisir le Template de projet correspondant au thème que vous souhaitez utiliser.

Les fichiers de styles seront alors intégrer automatiquement dans votre application prête à être développée.

– En utilisant le fichier SL4Themes-RawAssets.zip

1) Créez un dossier Assets dans votre projet Silverlight (s’il n’existe pas encore),

2) Ajoutez toutes les fichiers de styles fournies pour un thème (comme ci-dessous) :

3) Référencez les fichiers de style dans votre App.xaml :

<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source=”Assets/Styles.xaml”/>

<ResourceDictionary Source=”Assets/CoreStyles.xaml”/>

<ResourceDictionary Source=”Assets/SDKStyles.xaml”/>

<!–<ResourceDictionary Source=”Assets/ToolkitStyles.xaml”/>

To extend this theme to include the toolkit controls:

1. Install the Silverlight Toolkit for Silverlight 4

2. Add a Toolkit control to your project from the toolbox. This will add references to toolkit assemblies.

3. Change the “Build Action” for ToolkitStyles.xaml to “Page”

4. Uncomment the resource dictionary include above.

If you do not intend to use toolkit controls, delete this comment and the ToolkitStyles.xaml file.–>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

4) Ajoutez les fichiers *.dll ci-dessous car ils sont utilisé dans les fichiers de styles précédemment ajoutées :

5) Attention pour éviter les erreurs de compilation, n’oubliez pas :

– Si vous n’utilisez les contrôles du Toolkit, vérifiez bien que la propriété “Build Action” du fichier ToolkitStyles.xaml soit à “Nonc”.

– Sinon ajoutez les références pour le Toolkit dans votre projet, mettez la propriété “Build Action” du fichier ToolkitStyles.xaml à “Page” et enfin dé-commentez la ligne suivante dans le fichier App.xaml :

<ResourceDictionary Source=”Assets/ToolkitStyles.xaml”/>

Vous l’aurez compris, la deuxième solution s’applique dans le cas ou votre projet existe déjà sinon utilisez les Templates Visual Studio pour créer une nouvelle application pour que le thème soit appliqué automatiquement.

Autres thèmes

Prenons l’exemple de Telerik, qui nous met à disposition un ensemble de *.dll de styles dans son kit de contrôles Silverlight. Nous disposons alors de 9 thèmes différents : metro, office_black, office_blue, office_silver, vista, windows7, expression_dark, transparent et summer.

Pour appliquer les styles, il suffit d’ajouter la *.dll de style à votre projet puis sur chaque contrôle, dans la propriété StyleManager de sélectionner le thème à utiliser :

telerik:StyleManager.Theme=”Metro”

Comparatif

Toolkit Themes Microsoft Themes Telerik Themes
.xaml .dll .xaml template .dll
Facile à mettre en place OUI

OUI

+

OUI

+

OUI

++

OUI

+

Possibilité de changer de thème dynamiquement OUI

+

NON

NON

NON

Utilise les styles implicite OUI (mais paramètre à appliquer dans App.xaml)
+
OUI

++

NON

Possibilité de modifier les styles OUI

+

NON

OUI

+

OUI

+

OUI (pas avec les *.dll)

0

Qualité des styles / Look & feel ++ +

Conclusion

Par expérience, je dirai que les thèmes les plus faciles à appliquer et à utiliser restent les thèmes développés par Microsoft utilisant les styles implicites. Nul besoin de *.dll, permettant ainsi de les modifier facilement si besoin et ils sont très facile à appliquer grâce aux Templates de projet Visual Studio ou bien dans le cas d’un projet existant (cela ne prend pas plus de 5 minutes du moment où aucun style n’est défini pour chacun de vos contrôles dans votre application).

Nombre de vue : 68

COMMENTAIRES 4 commentaires

  1. Cyril CATHALA dit :

    Excellent, ça résume bien 🙂
    Personnellement, je met du Cosmopolitan theme dans tous mes projets. Il n’est pas parfait, mais ça fournit une très bonne base pour construire un thème metro rapidement !

  2. […] Lire la suite sur So@t [+] Share & Bookmark • Twitter • StumbleUpon • Digg • Delicious • Facebook […]

  3. Guy dit :

    première réaction juste pour la forme ^^
    à la place de “Thèmes du Silverlight du Toolkit” je pense que tu voulais dire Thèmes du Silverlight Toolkit …non ?

  4. […] Sur Silverlight c’était facile, Microsoft nous a fourni des thèmes à appliquer sur un projet (cf. mon article sur les Themes Silverlight). […]

AJOUTER UN COMMENTAIRE