Expression Blend, les 10 bonnes raisons de l’utiliser : #3 \\ Visualiser les ressources dans Blend

#3blend_ressources Contrairement à ce que pensent un bon nombre de développeurs, Expression Blend n’est pas fait que pour les designers ! Si vous l’ouvrez, et commencez à éditer une page, vous retrouverez le même affichage que sur Visual Studio : c’est à dire l’aperçu et le code.

Si on prend quelques heures pour s’y habituer et apprendre à l’utiliser, il peut s’avérer bien utile et vous rendre très productif !

Cet article parle de la raison numéro trois de l’utiliser : Le visualiseur des fichiers de ressources. Grâce à cette fonctionnalité, visionnez facilement et rapidement toutes vos ressources graphiques et styles sans compiler votre projet pour créer le design de votre application !

Programme

Semaine 0 : Introduction

Semaine 1 : La Puissance du designer

Semaine 2 : TFS intégré à Blend

Semaine 3 : Visualiser vos fichiers de ressources

Semaine 4 : Les animations

Semaine 5 : Les styles & templates

Semaine 6 : DataSample

Semaine 7 : Behaviors

Semaine 8 : Stechflow

Semaine 9 : Import de fichiers Illustrator / Photoshop

Semaine 10 : Spécificités Windows Phone / Windows 8

Semaine 11 : Conclusion / Les différentes versions de Blend

Introduction

L’avantage d’utiliser une technologie telle que le XAML, c’est de pouvoir personnaliser facilement tous les styles de vos contrôles pour une interface moderne et efficace ! Evitez de laisser les styles par défaut sous prétexte qu’ils sont pénibles à modifier et utilisez Blend pour le faire facilement !

Commencez par ouvrir votre projet sur Blend et vous aurez ainsi un outil très utile pour visualiser toutes les ressources et styles de votre application : le panneau “Resources”.

Qu’est-ce qu’une ressource ?

Une ressource est un objet qui peut être réutilisé dans différents endroits de votre application. Les ressources incluent des pinceaux (brush) et des styles et sont définis par une clé unique : x:Key. Si un style ne possède pas de clé, il est alors appliqué par défaut (on appelle cela un style implicite).

Exemple de Brush :

<SolidColorBrush x:Key="AccentColor" Color="#FFC8A5E7"/>

Exemple de Style implicite :

<Style TargetType="Button">
  <Setter Property="Background">
    <Setter.Value>
      <LinearGradientBrush>
        <GradientStop Offset="0.0" Color="AliceBlue"/>
        <GradientStop Offset="1.0" Color="Salmon"/>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <Setter Property="FontSize" Value="18"/>
</Style>

Une ressource peut être un dégradé, une couleur, une image, un style tout cela dans le but de l’appliquer à un élément visuel comme couleur de fond ou de contour ou bien à un contrôle pour changer son apparence. Un style est spécifique à un type de contrôle sur lequel on voudra l’appliquer spécifié par la propriété TargetType.

Lorsque vous voulez définir une ressource que ce soit avec du code ou bien avec le designer dans Blend ou Visual Studio, il faut ajouter votre ressource dans un ResourceDictionay. Enfin, pour appeler une ressource il suffit alors d’écrire {StaticResource MyBrush}.

Une ressource peut être référencée soit comme ressource statique soit comme ressource dynamique.  Pour en savoir plus sur les ressources statiques et dynamiques, je vous conseille de lire ceci : http://msdn.microsoft.com/fr-fr/library/vstudio/ms750613.aspx#staticdynamic

En résumé, les ressources sont comme des dictionnaires auxquels on peut faire référence n’importe où dans une application via une clé et un markup (StaticResource ou DynamicResource) vous permettant ainsi de factoriser votre code, un peu comme les feuilles de style CSS.

Comment créer une ressource ?

Méthode 1

Commencez par sélectionnez un élément visuel, un rectangle par exemple, puis nous allons créer deux ressources différentes : la première sera une ressources avec une couleur et la seconde une ressource avec une image.

Pour cela, appliquez votre couleur sur le rectangle, puis cliquez sur le petit carré blanc à droite de la couleur pour créer une nouvelle ressource :

Blend_ressource_create

Donnez un nom à votre ressource puis sélectionnez le fichier de ressources ou la page dans lequel vous souhaitez l’ajouter :

Blend_ressource_createnew

Lorsque vous ajoutez une ressource dans l’application (App.xaml), celle-ci est accessible depuis n’importe quelle page.

Faites la même chose avec une image que vous appliquez en fond au rectangle pour créer une nouvelle ressource :

Blend_ressource_BRUSH

Blend_ressource_brushresources A noter qu’en cliquant sur l’icône ci-contre (que vous voyez dans le panel ci-dessus), vous pouvez accéder à toutes les ressources existantes dans votre application pour les changer facilement !

Code généré :

<Application.Resources>
<!-- Resources scoped at the Application level should be defined here. -->
<SolidColorBrush x:Key="AccentColor" Color="#FFC8A5E7"/>
<ImageBrush x:Key="BrushImage" ImageSource="roomba_500_irobot.jpg" Stretch="UniformToFill"/>
</Application.Resources>

Méthode 2

Il existe une autre manière de créer une ressource à partir d’un élément visuel sélectionné (image, rectangle, etc.). Voici un exemple avec une image :

1) Sélectionnez votre image

2) Utilisez le menu “Tools” => “Make Brush Resource” et “Make ImageBrush Resource…”

Blend_ressource_createother

L’avantage d’utiliser une image en ressource, vous pourrez alors créer des effets visuels tels que la réflexion d’une image :

Blend_ressource_reflection

Comment visualiser vos ressources ?

Avec Blend vous avez un aperçu de toutes vos ressources ce que Visual Studio lui ne permet pas de faire. De plus, Blend génère l’aperçu de tous vos styles quel que soit la page qui les contient.

Pour visualiser vos ressources et styles, il suffit d’utiliser le panneau “Resources” qui va lister tous vos fichiers de ressources .xaml et le contenu de chacun d’entre eux : lien entre différents fichiers de ressource (Linked To:), ressources diverses (couleurs, dégradé, etc.) et styles :

Dans ce panneau, vous trouverez également les styles et ressources de votre page courante (page ouverte) :

Blend_ressource_currentresource

Si vous double-cliquez sur un style, celui-ci va apparaître pour vous donner un aperçu immédiat et vous pourrez aller le modifier directement en gardant cette vue designer et / ou code xaml.

Astuces

Créez des ressources que pour le design time

Depuis Blend 3, les développeurs avaient la possibilité de créer des données spécialement conçue pour le design de votre application permettant ainsi dans Blend d’avoir directement un aperçu des styles de vos différents contrôles avec des données sans avoir à compiler votre projet.

Tout ceci est possible grâce aux MarkupExtensions : {d:DesignData}, {d:DataContext}, {d:Source} et {d:DesignInstance}. J’avais donné un exemple d’utilisation dans un précédent article : http://blog-rec.soat.fr/2012/06/winrt-des-outils-pour-etre-productif-avec-les-interfaces-metro/

Sachez que de la même manière, il était possible de définir des propriétés uniquement pour le design en utilisant les propriétés : d:DesignWidth, d:DesignHeight.

<phone:PhoneApplicationPage
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 x:Class="SmartShopping.WindowsPhone.Views.ItemDetailPage"
 mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800">
<Grid>

Enfin, depuis Blend 4 nous pouvons réaliser de la même manière des fichiers de ressources destinées uniquement au design time (la phase de création de l’interface).

En ouvrant un projet sur Blend, vous avez surement remarqué cette fenêtre qui s’affiche à l’ouverture d’une page :

Blend_ressource_adddesigntime

Cette fonctionnalité très pratique vous permet de définir un fichier de ressource à utiliser lorsque vous souhaitez modifier les interfaces sur Blend. Cela arrive très souvent que dans le cas de gros projet (Silverlight, WPF, Windows Phone ou Windows 8) vos fichiers de ressources soient définis dans un projet à part qui peut ne pas être chargé dans Blend.

En choisissant un fichier de ressource dans la fenêtre ci-dessus, cela permettra de palier ce genre de problème et dans votre projet, un fichier DesignTimeResources.xaml sera créé et contiendra le code suivant :

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <ResourceDictionary.MergedDictionaries>
 <ResourceDictionary Source="ResourceDictionary.xaml"/>
 </ResourceDictionary.MergedDictionaries>
 <!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>

Accent color

05415245-photo-htc-windows-phone-8x-faceL’accent color, une notion existante depuis l’arrivée du design Microsoft avec Windows Phone est très importante ! Une fois bien paramétrée, cette couleur peut caractériser votre société et/ou refléter votre image de marque !

Sur Windows Phone, l’accent color est propre à l’utilisateur (en fonction de son choix dans les préférences de thème au niveau des paramètres de son téléphone) cependant cette couleur peut être forcée dans les applications.

Blend_ressource_accentcolor

Sur Windows 8, l’utilisateur choisi une couleur mais celle-ci n’est pas considérée comme accent color. Ainsi par défaut lorsque vous créez un nouveau projet Windows 8, il faut aller modifier l’accent color qui n’est pas dynamique comme sur Windows Phone !

Pour cela allez voir dans le dossier Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design\ dans lequel vous y trouverez :

generic.xaml qui contient tous les styles et templates Windows 8

themeresources.xaml qui contient toutes les ressources visuelles pour le thème clair et le thème foncé.

Ajoutez le contenu de themeresources.xaml dans vos fichiers de ressources pour visualiser directement les couleurs à modifier :

N’hésitez pas à ajouter une deuxième couleur d’accentuation dans les mêmes tons que votre accent color, ce que fait Windows Phone vous permettant ainsi de distinguer le contenu important dans votre application ! Vous pouvez également imaginez créer une accent color dans votre fichier de ressource spécialement conçu pour le design time, cela vous permettra ainsi de tester les différents rendu 😉

Conclusion

Très utile ce panneau “Resources” qui est propre à Blend et vous fera très certainement gagner du temps et éviter de rechercher un style ou une ressource dans le code ! De plus, les ressources spécialement conçue pour le “design time” vous permettront de créer des jeux de données de test ainsi que des ressources spécifiques pour le design. Une bonne raison de plus pour utiliser Blend !

Un axe d’amélioration serai peut-être d’avoir une vision imbriqué des styles et ressources comme le visualiseur de classe sur Visual Studio 2012 !

VS_visualiseurClasses

Rendez-vous prochainement avec un nouvel article de la série sur la Raison #4 d’utiliser Blend : Les animations.

Nombre de vue : 173

COMMENTAIRES 1 commentaire

  1. […] Semaine 3 : Visualiser vos fichiers de ressources et styles […]

AJOUTER UN COMMENTAIRE