Les ressources :

Commençons d’abord par les ressources, notion importante et souvent utilisée en WPF. Les ressources vous permettent de définir des objets qui ne font pas partie du visualtree (de l’interface graphique proprement dit) mais que vous pourrez utiliser à partir d’élément WPF dans votre interface graphique. Les éléments de l’interface pourront y accéder quand ils en auront besoin. Ce n’est peut-être pas simple à comprendre comme ça, mais les exemples vont suivre.

Les ressources se définissent au niveau de la section « Resources » d’un élément. En faisant cela vous n’avez plus besoin de créer votre objet à chaque fois que vous devez l’utiliser (exemple : un style à appliquer à plusieurs élément graphique). Vous gagnez bien sûr aussi en réutilisation. Un autre avantage est que pouvez ainsi bien séparer votre objet de l’interface utilisateur, en cas de modification du code cela rend les choses plus simples.

Passons maintenant à la pratique. Il faut savoir que n’importe quel type d’objet peut être déclaré en tant que ressource. Pour déclarer un objet dans une section resources voici comment faire :

Imaginons que nous voulions appliquer une couleur à plusieurs éléments de notre interface graphique (GUI). Nous allons déclarer la ressource dans la section resources d’un StackPanel :

<StackPanel.Resources> <SolidColorBrush x:Key="myColor" Color="Gold" /> </StackPanel.Resources>

Voilà, nous déclarons bien un objet de type SolidColorBrush et définissons sa couleur (Or ici) via sa propriété Color. La propriété Key est spécifique aux ressources, c’est la propriété qui va permettre de sélectionner la ressource pour l’utiliser. Pourquoi ne pas utiliser la propriété Name ? et bien tout simplement car Name correspond au nom de l’instance de l’objet et non à un mot clef à utiliser pour retrouver une ressource. La propriété Key peut ne pas être unique dans l’application, mais doit l’être dans la section ressources dans laquelle elle est déclarée. Petite précision, vous pouvez déclarer les ressources dans n’importe quel élément WPF suivant les éléments devant l’utiliser. Par exemple, si dans ce cas ci, vous voulez rendre la ressource disponible à tous les éléments de la fenêtre, vous devriez alors la déclarer dans la section Resources de la fenêtre comme ceci :

<Window.Resources> <SolidColorBrush x:Key="myColor" Color="Gold" /> </Window.Resources>

Maintenant, comment utiliser notre ressource ? Voici le code complet :

<Window x:Class="coursWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"> <StackPanel> <StackPanel.Resources> <SolidColorBrush x:Key="myColor" Color="Gold" /> </StackPanel.Resources> <Button x:Name="bt1" Background="{StaticResource myColor}" Content="Test" /> <Label Content="Jolie couleur n'est-il pas ?" Background="{StaticResource myColor}" /> </StackPanel> </Window>

Ce qui affiche :


On accède à la ressource dans ce cas via StaticResource et la clé myColor. Vous verrez aussi qu'il existe la balise DynamicResource. Nous verrons plus loin la différent.

Avant tout il est important de spécifier que lorsqu’un objet doit utiliser une ressource, il va dabord chercher si la clé est présente dans la section ressource de son élément. Si ce n’est pas le cas, il remonte la hiérarchie parentale du visualTree (Button, StackPanel, Windows, Application par exemple).

Les ressources statiques et dynamiques

La différence entre les deux réside dans le fait que lorsqu’une ressource est dynamique, elle sera automatiquement chargée à chaque fois qu’elle est modifiée.

 

Les ressources d’application :

Il peut arriver que vous ayez besoin de ressources accessibles dans toute votre application. Pour ce faire, il faut les déclarer dans la section Resources de l’application (dans le fichier App.xaml).

<Application x:Class="coursWPF.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml"> <Application.Resources> <SolidColorBrush x:Key="appRes" Color="Gold" /> </Application.Resources> </Application>

Les dictionnaires de ressources

Un dictionnaire de ressource est ce qui va vous permettre d’importer dans ressources venant d’un fichier xaml séparé. Cela encore une fois vous permet une grand flexibilité au niveau de votre projet.

Créer un dictionnaire de ressources :

Pour créer un dictionnaire de ressource il faut :

• Cliquer droit sur le projet (dans l’explorateur de solution), séléctionner « Add » et cliquer sur « Resource dictionary » :





• Ensuite entrer le nom du fichier xaml à créer :

Une fois le fichier crée et ajouté à l’application , il ne reste plus qu’a y mettre les ressources. Par exemple :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <SolidColorBrush x:Key="myColor2" Color="Aqua" /> </ResourceDictionary>

Utiliser un dictionnaire de ressources

C’est très simple, c’est toujours dans une section resources que cela se passe mais il faut créer un objet ResourceDictionary comme ceci :
<Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="myDictionary.xaml"/> </ResourceDictionary.MergedDictionaries> <SolidColorBrush x:Key="myColor" Color="Gold" /> </ResourceDictionary> </Window.Resources>

Remarquez ici où j’ai placé la ressource précédemment créée. Lorsque vous voulez ajouter des ressources à la section resources contenant un dictionnaire , c’est là qu’il faut la placer. Pour accéder à une ressource d’un dictionnaire, rien ne change, par exemple ici on peut faire :
<Label Content="Jolie couleur n'est-il pas ?" Background="{StaticResource myColor2}" />

Accéder au ressources via le code

Par exemple, si nous voulons accéder à la ressource contenue dans la section ressource du stackpanel de l’application précédente, nous devons procéder comme ceci ::
SolidColorBrush brush = null; brush = (SolidColorBrush)stack1.FindResource("myColor");
La méthode FindResource lance une exception si la ressource n’a pas été trouvée.
Il est possible d’accéder à une ressource directement sans passer par la fonction FindResources. Voici comment :
brush = (SolidColorBrush)stack1.Resources["myColor"];
L’accès aux ressources étant Read-Write (lecture, écriture), vous pouvez aussi les modifier.
Ceci clot notre chapitre sur les ressources. Place maintenant aux styles.

Les styles

Que sont les styles ? Et bien c’est ce qui va vous permettre de modifier l’apparence de vos fenêtres. Cela peut s’apparenter au CSS au niveau du HTML ou au XSLT pour le XML.
Avant toutes choses, voyons quelques propriété de la classe Style :

• BasedOn : Permet de créer le style sur base d’un autre style. Cela permet l’héritage de style.
• Resources : Contient une collection de ressources utilisée par le style.
• Setters : Contient une collection de Setter ou d’EventSetter.
• Triggers : Contient la collection de triggers. Cette matière fera partie d’un autre cours sur les Triggers.
• TargetType : Indique pour quel type d’élément le style sera utilisé.

Setters

Un « setter» est un objet qui va nous permettre de paramétrer certaines valeurs de notre style. Il existe deux « types » de setter. Voyons cela.

Les setters de propriétés

Comme leur nom l’indique , ce setter va servir à affecter des valeurs aux propriétés que l’on veut modifier. Par exemple nous voulons que notre style applique à la propriété Background la couleur or à un bouton :-) .
<Setter Property="Button.Background" Value="Gold" />
Property contient la propriété à modifier, dans ce cas ci nous devons spécifier le type du control qui sera modifié. Pour permettre à ce style d'être appliqué à plusieurs types de contrôles, nous utiliserons la classe de base des controles en faisant comme ceci : Control.Background. Value contient la valeur à affecter à la propriété.

Les setter d’évènement

C’est le même principe que le type précédent sauf que cela s’applique ici au events. Exemple :
<EventSetter Event="Button.Click" Handler="bt1_Click" />

Créer un style

Après avoir vu et compris ce qu’est un setter. Maintenant créons un style de A à Z.
Il y à deux endroit ou implémenter un style. Soit directement dans la propriété style du contrôle à modifier, soit dans une section ressource (cette méthode est plus flexible). La deuxième technique permet d’utiliser une ressource sur plusieurs contrôles.

Voyons d’abord la première méthode avec nos deux setter créés ci-dessus :

<Window x:Class="coursWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"> <StackPanel x:Name="stack1"> <Button x:Name="bt1" Content="Test" > <Button.Style> <Style> <Setter Property="Button.Background" Value="Gold" /> <EventSetter Event="Button.Click" Handler="bt1_Click" /> </Style> </Button.Style> </Button> </StackPanel> </Window>
Ce qui exécute :


Voyons maintenant comment faire au niveau d’un style mis en ressource. Une ressource peut être de n’importe quel type, donc faisons simplement comme nous l’avons appris plus tôt dans ce cours :

<Window x:Class="coursWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"> <Window.Resources> <Style x:Key="myStyle"> <Setter Property="Button.Background" Value="Gold" /> <EventSetter Event="Button.Click" Handler="bt1_Click" /> </Style> </Window.Resources> <StackPanel x:Name="stack1"> <Button x:Name="bt1" Content="Test" Style="{StaticResource myStyle}" > </Button> </StackPanel> </Window>
Et voilà, le tour est joué.

Appliquer un style à tous les contrôles d’un type particulier

Nous allons utiliser la propriété TargetType de la classe Style vu plus haut. Imaginons ici, appliquer notre style à tous les boutons de la fenêtre :

<Window x:Class="coursWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"> <Window.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="Gold" /> <EventSetter Event="Click" Handler="bt1_Click" /> </Style> </Window.Resources> <StackPanel x:Name="stack1"> <Button x:Name="bt1" Content="Test" /> <Button x:Name="bt2" Content="Test 2" /> </StackPanel> </Window>  
Attention, n’oubliez pas de ne pas mettre de propriété Key, sinon cela ne fonctionne pas.
Voici le résultat :


Si vous voulez qu’un bouton n’applique pas ce style, donnez la valeur {x :Null} à la propriété Style.

L’héritage de style

Comme pour les classes, nous pouvons créer un style héritant d’un autre. Pour ce faire c’est maintenant que nous allons utiliser la propriété BasedOn. Voici un exemple tout simple, cela sera plus compréhensible qu’un paragraphe :
<Window x:Class="coursWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"> <Window.Resources> <Style x:Key="myStyleParent"> <Setter Property="Button.Background" Value="Gold" /> <EventSetter Event="Button.Click" Handler="bt1_Click" /> </Style> <Style x:Key="myStyleChild" BasedOn="{StaticResource myStyleParent}"> <Setter Property="Button.Foreground" Value="Blue"/> <Setter Property="Button.FontSize" Value="15" /> </Style> </Window.Resources> <StackPanel x:Name="stack1"> <Button x:Name="bt1" Content="Test" Style="{StaticResource myStyleParent}" /> <Button x:Name="bt2" Content="Test 2" Style="{StaticResource myStyleChild}" /> </StackPanel> </Window>
Ce qui donne :

Créer un style via le code :

Nous allons appliquer un style à un bouton au chargement de la fenêtre :
private void Window_Loaded(object sender, RoutedEventArgs e) { Style myStyle3 = newStyle(); Setter setter = newSetter(); setter.Property = Button.BackgroundProperty; setter.Value = Brushes.Gold; myStyle3.Setters.Add(setter); bt1.Style = myStyle3; }
Voilà je pense le tout assez clair. A bientôt dans un nouveau cours :-).