Améliorations dans la gestion des styles en Silverlight 3

Silverlight 3 apporte des nouveautés dans la gestion des styles qui lui permettent de se rapprocher de ce que WPF nous avait habitué : dictionnaires de ressources fusionnés, héritage de styles, et changement dynamique de styles.

L'application de démonstration est disponible en ligne ici.

Les dictionnaires de ressources fusionnés sont enfin présents dans Silverlight. Ils permettent de définir des ressources dans des fichiers séparés et de les référencer. Cela facilite grandement la gestion des ressources au sein d'une application. Il s'agit de fichiers .xaml avec l'élément ResourceDictionary en tant que racine. La propriété Buid Action du fichier doit être positionnée à la valeur Resource.

Voici un exemple d'un tel fichier :

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="BasedButton" TargetType="Button">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Content" Value="Bouton avec style de base"/>
        <Setter Property="Width" Value="200" />
        <Setter Property="Height" Value="50" />
    </Style>
</ResourceDictionary>

Vous pouvez ensuite référencer facilement ce dictionnaire de ressources dans le fichier App.xaml via l'élément ResourceDictionary.MergedDictionaries :

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="BaseStyles.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>        
</Application.Resources>

Le style s'utilise ensuite comme s'il était défini directement dans le fichier App.xaml :

<Button Style="{StaticResource BasedButton}" />

L'héritage de styles grâce à l'attribut BasedOn est maintenant possible en Silverlight 3.

Dans l'exemple ci-dessous nous déclarons deux styles (RedButton et BlueButton) qui se basent tous deux sur le style BasedButton défini dans le fichier de ressources BaseStyles.xaml que nous avons vu précédemment.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="BaseStyles.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <Style x:Key="RedButton" TargetType="Button" BasedOn="{StaticResource BasedButton}">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Content" Value="Bouton avec style rouge"/>
            <Setter Property="Foreground" Value="Red"/>
        </Style>
        <Style x:Key="BlueButton" TargetType="Button" BasedOn="{StaticResource BasedButton}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Content" Value="Bouton avec style bleu"/>
            <Setter Property="Foreground" Value="Blue"/>                
        </Style>
    </ResourceDictionary>        
</Application.Resources>

Nous appliquons ensuite ces styles sur trois boutons :

<Button Style="{StaticResource BasedButton}" />
<Button x:Name="btnRed" Style="{StaticResource RedButton}" />
<Button x:Name="btnBlue" Style="{StaticResource BlueButton}" />

Le résultat en image :

Comme vous le voyez, les styles RedButton et BlueButton ont bien hérité des propriétés du style BasedButton (taille de la font, largeur, hauteur) tout en définissant leurs propres propriétés (Background et Foreground). Ils ont de plus redéfini la propriété Content présente dans le style de base.

Silverlight 2 ne permettait pas de changer le style d'un contrôle une fois qu'on lui en avait déjà appliqué un.

Typiquement, le code suivant provoquait une levée d'exception :

<Button x:Name="btnRed" Style="{StaticResource RedButton}" Click="btn_Click" />

private void btn_Click(object sender, RoutedEventArgs e)
{
        btnRed.Style = (Style)Application.Current.Resources["BlueButton"];
}

Cela n'est plus le cas en Silverlight 3. Vous pouvez maintenant changer autant de fois que vous le voulez le style d'un contrôle.

Voici un exemple de code permettant d'inverser les styles (RedButton et BlueButton) de nos fameux boutons :

private bool _flag;
private void btnChangeStyles_Click(object sender, RoutedEventArgs e)
{
    if (_flag)
    {
        btnRed.Style = (Style)Application.Current.Resources["RedButton"];
        btnBlue.Style = (Style)Application.Current.Resources["BlueButton"];   
    }
    else
    {
        btnRed.Style = (Style)Application.Current.Resources["BlueButton"];
        btnBlue.Style = (Style)Application.Current.Resources["RedButton"];
    }
    _flag = !_flag;
}

Styles appliqués au lancement de l'application :

Après un clic sur le bouton de droite les styles s'inversent :

Téléchargez les sources de la solution donnée en exemple.

J'adresse ici tous mes remerciements à l'équipe de rédaction de "developpez.com" pour le temps qu'ils ont bien voulu passer à la correction et à l'amélioration de cet article.

Si vous constatez une erreur dans le tutorial, dans les sources, dans la programmation ou pour toutes informations, n'hésitez pas à me contacter par le forum.