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

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

<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 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 : https://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 :

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 !

<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>

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

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 : https://blog.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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="https://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 :

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

Accent color

L’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.

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 !

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