Les styles - Créez des applications en C# pour Windows Phone 8

Le style correspond à l’identification de plusieurs propriétés par un nom, que l’on peut appliquer facilement à plusieurs contrôles.

Un style trouve donc tout à fait naturellement sa place dans les dictionnaires de ressources que nous avons déjà vus. Un style est, comme une ressource, caractérisé par un nom et cible un type de contrôle. Par exemple, observons le style suivant :

Code : XML

<phone:PhoneApplicationPage.Resources>

</Style>

</phone:PhoneApplicationPage.Resources>

On remarque l’élément important TargetType="TextBlock" qui me permet d’indiquer que le style s’applique aux contrôles TextBlock. La lecture du style nous renseigne sur ce qu’il fait. Nous pouvons remarquer que la propriété Foreground aura la valeur Green, que la propriété FontSize aura la valeur 35, etc.

Pour que notre contrôle bénéficie de ce style, nous pourrons utiliser encore la syntaxe suivante :

Code : XML

<TextBlock Text="{StaticResource TitreApplication}"

Style="{StaticResource StyleTexte}"/>

Ce qui nous donnera la figure suivante.

Le style appliqué au TextBlock

Ah, mais ça me rappelle quelque chose, on n‘a pas déjà vu des styles ?

Et si, lorsque nous créons une nouvelle application, Visual Studio nous créé le squelette d’une page dans le fichier MainPage.xaml et nous avons notamment le titre de la page défini de cette façon :

Code : XML

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock Text="Hello World" Margin="9,-7,0,0"

Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

Vous pouvez désormais comprendre que ces deux TextBlock utilisent les styles PhoneTextNormalStyle et PhoneTextTitle1Style. Ce ne sont pas des styles que nous avons créés. Il s’agit de styles systèmes, présents directement dans le système d’exploitation et que nous pouvons utiliser comme bon nous semble.

Le style est un élément qui sera très souvent utilisé dans nos applications. Définir le XAML associé à ces styles est un peu

rébarbatif. Heureusement, Blend peut nous aider dans la création de style…

Prenons par exemple le code XAML suivant : Code : XML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

Qui donne la figure suivante.

Aperçu d'un formulaire construit en XAML

Si nous passons dans Blend, nous pouvons facilement créer un style en faisant un clic droit sur un TextBlock et en

choisissant de modifier le style, puis de créer un nouveau style en choisissant de créer un élément vide (voir la figure suivante).

Modification du style dans Blend

Blend nous ouvre une nouvelle fenêtre où nous pouvons créer un nouveau style (voir la figure suivante).

Fenêtre de création d'un

nouveau style

Nous devons fournir un nom au style puis nous pouvons indiquer quelle est la portée du style, soit toute l’application (ce que j’ai choisi), soit la page courante, soit un dictionnaire de ressources déjà existant.

Le style est créé dans le fichier App.xaml, comme nous l’avons déjà vu, qui est le fichier de lancement de l’application. Je peux aller modifier les propriétés du style, par exemple la couleur (voir la figure suivante).

Modification de la couleur

du style

Une fois le style terminé, je peux retourner dans ma page pour appliquer ce style aux autres contrôles. Pour cela, j’utilise le bouton droit sur le contrôle, Modifier le style , Appliquer la ressource, et je peux retrouver mon style tout en haut (voir la figure suivante).

Notre nouveau style fait partie de la liste des styles

On remarque au passage qu’il existe plein de styles déjà tout prêts, ce sont des styles systèmes comme ceux que nous avons vu un peu plus haut et dont nous pouvons allégrement nous servir !

De retour dans le XAML, je peux constater qu’une propriété a été rajoutée à mes TextBlock : Code : XML

<TextBlock Text="Prénom" Grid.Column="0" Grid.Row="1"

Style="{StaticResource TexteStyle}" />

C’est la propriété Style bien évidemment, qui va permettre d’indiquer que l’on applique le style TexteStyle. Celui-ci est défini dans le XAML du fichier App.xaml :

Code : XML

<Style x:Key="TexteStyle" TargetType="TextBlock">

</Style>

Ce qui correspond aux valeurs que j’ai modifiées. Et voilà, plutôt simple non ?

Remarquons avant de terminer que les styles peuvent hériter entre eux, ce qui permet de compléter ou de remplacer certaines valeurs. Prenons par exemple le XAML suivant :

Code : XML

<Style x:Key="TexteStyle" TargetType="TextBlock">

</Style>

<Style x:Key="TexteStyle2" TargetType="TextBlock"

BasedOn="{StaticResource TexteStyle}">

</Style>

Le deuxième style hérite du premier grâce à la propriété BaseOn.

Notez que les styles sont encore plus puissants que ça, nous aurons l’occasion de voir d’autres utilisations plus loin dans le cours.

Dans le document Créez des applications en C# pour Windows Phone 8 (Page 75-81)