Switcher de Theme pour un customControl

Version imprimable

04/08/2008, 14h02
amandinerenard

Switcher de Theme pour un customControl

Bonjour,

Je dois développer un framework pour un logiciel.
Le framework sera une bibliothéque de CustomControl qui seront en fait tous les contrôles WPF customiser afin d'être des contrôles métiers.

J'ai reussi a faire un customControl qui hérite d'un comboBox. Maintenant j'aimerai créer un autre théme que le théme "généric.xaml".
Je ne sais pas comment je fais dans le code pour switcher d'un thème à l'autre.
Avez vous un exemple qui fait ceci.

Merci pour votre aide.
Amandine
04/08/2008, 14h08
Thomas Lebrun

Il suffit de merger (fusionner) le contenu de ton fichier de thèmes dans la propriétés Resources de ton CustomControl
04/08/2008, 15h56
amandinerenard

Je ne comprends pas bien a quel endroit dans mon customControl je rajoute le merge?

Je dois ajouter cette ligne de code :

this.Resources.MergedDictionaries.Add( monDictionnaire)...

De plus comment est ce que je créer un ResourceDictionary par rapport a un fichier.xaml?

Merci
Amandine
04/08/2008, 19h42
Thomas Lebrun

Citation:

Envoyé par amandinerenard

Je dois ajouter cette ligne de code :

this.Resources.MergedDictionaries.Add( monDictionnaire)...

Oui, il faut que tu fasses ca dans les ressources de ton contrôle

salut j'ai moi meme fait un switcher de theme simple

voici le code
dans app tu colle

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Applicationx:Class="SentinelSAS.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow2.xaml"
ShutdownMode="OnMainWindowClose">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources\Skins\OfficeBlue\OfficeBlueResourceDictionary.xaml" />
<ResourceDictionary Source="Resources\Skins\OfficeBlack\OfficeBlackResourceDictionary.xaml" />
<ResourceDictionary Source="Resources\Skins\Metallic\MetallicResourceDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

le theme qui sera utilisé sera le premier
OfficeBlueResourceDictionary.xaml

voici un exemple de ce qu'il y a dans la xaml du ResourceDictionary

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<!-- Application Brushes -->
<SolidColorBrush x:Key="Brush_TextForeground" Color="Black" />
<SolidColorBrush x:Key="Brush_MenuTextForeground" Color="Black" />
<SolidColorBrush x:Key="Brush_MenuTopLevelTextForeground" Color="White" />
<SolidColorBrush x:Key="Brush_NotificationErrorTextForeground" Color="#FFF35A00" />
<SolidColorBrush x:Key="Brush_NotificationWatermarkTextForeground" Color="#FFD4D4D4" />
<SolidColorBrush x:Key="Brush_FormHeadingText" Color="#FFDEDEDE" />
<SolidColorBrush x:Key="Brush_FormSubHeadingText" Color="#FFFFFFFF" />
<LinearGradientBrush x:Key="Brush_BrightBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFB8B8B8" Offset="0" />
<GradientStop Color="#FFD4D4D4" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DarkBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0E0E0" Offset="0" />
<GradientStop Color="#FFD4D4D4" Offset="1" />
</LinearGradientBrush>
.......
</ResourceDictionary>

le mieux c'est de faire le dictionary avec blend

apres pour switcher de theme c'est simple il suffi de :
- supprimer le thme que tu veux utiliser
- l'ajouter en premiere position

en gros ca donne ca (le code est pas complet mais ca donne une idee

Code:

1
2
3
4
Collection<ResourceDictionary> mergedDicts = Application.Current.Resources.MergedDictionaries;
Application.Current.Resources.MergedDictionaries.RemoveAt(la position oubien tu recherche avec la clef du theme);
Application.Current.Resources.MergedDictionaries.Insert(0, le theme que tu veux mettre en premiere position);

bon la je sais faudrait rajouter une clef au resource directory
(en fait j'ai utilisé le meme principe pour faire une selection de langue pour mon logiciel)

07/08/2008, 19h13
amandinerenard

Ok merci beaucoup pour la réponse.

J'ai maintenant un autre dilemme.
Je crée par exemple un customControl qui hérite de button qui s'appelle CustomButton. Je crée un théme1 ou le background de mon Button est orange et un théme2 qui avec un background en Bleu.

Maintenant j'aimerai afficher dans une même page mon 2 CustomButton avec les 2 thémes. C'est à dire afficher un button bleu et un button Orange, donc un button avec le théme1 et un button avec le théme 2.
est ce que c'est possible?

Merci de m'indiquer comment car là je ne sais pas.

Merci pour votre aide
Amandine
07/08/2008, 19h17
Thomas Lebrun

Voila comment je ferais:

Sur ton CustomButton, tu ajoutes une Dependency Property. Chaque fois qu'elle est modifiée, tu appeles une callback qui se charge d'appliquer le bon thème
08/08/2008, 10h54
Thrud

Bonjour,

tu as une propriété Resources au niveau du bouton, pas uniquement de l'application. Si tu charges un thème au niveau des MergedDictionnaries des boutons, tu dois pouvoir appliquer un thème par bouton, non ?
08/08/2008, 11h06
amandinerenard

Ok super j'ai réussi.
Merci beaucoup je vais pouvoir commencer mon framework.
Amandine
08/08/2008, 11h12
amandinerenard

Euh oui j' y ai pensé aussi à la propriété ressource directement sur le bouton, mais je trouve ça plus propre de rajouter une dépendency Property. :D
08/08/2008, 11h19
Thrud

ah ok,

si ça ne t'ennuie pas , je voudrais bien voir le morceau de code qui fait ton changement de thème, c'est un truc qui pourra certainement me servir par la suite.
08/08/2008, 14h24
Thomas Lebrun

Citation:

Envoyé par Thrud

c'est un truc qui pourra certainement me servir par la suite.

A toi et à d'autres ;)

oui oui je pensais le faire.

Dans un premier temps pour switcher de théme :

Je créer un projet de type "Class Library" qui s'appelle FMCustomControl. dans ce projet j'ai plusieurs dossiers : "FMButton, FMComboBox, etc...
Dans chacuns de ces dossier j'ai un custom control et ses themes associés.

Par exemple dans FMButton j'ai :
- FMButton.cs et un dossier Theme avec 2 dictionnaires : generic.xaml et aero.normalcolor.xaml.

Pareil pour FMComboBox.

Ensuite j'ai un autre dossier à la racine de ce projet qui s'appelle Theme et dedans j'ai 2 dictionnaires qui merge mes themes de chaque CustomControl :

Pour generic.xaml:

Code:

1
2
3
4
5
6
7
8
9
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    x:Class="FuturMaster.WPF.RefTech.CustomControl.generic"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                        
>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/FuturMaster.WPF.RefTech.CustomControl;component/FMComboBox/Themes/generic.xaml"/>
        <ResourceDictionary Source="pack://application:,,,/FuturMaster.WPF.RefTech.CustomControl;component/FMButton/Themes/generic.xaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Et je créer 2 classes :

generic.cs :

Code:

1
2
3
4
5
6
7
8
 
 public partial class generic
    {
        public generic()
        {
            this.InitializeComponent();
        }
    }

et aero.normalcolor.cs :

Code:

1
2
3
4
5
6
7
8
 
public partial class aeronormalcolor
    {
        public aeronormalcolor()
        {
            this.InitializeComponent();
        }
}

Ensuite j'ai un Deuxime projet de type " Windows Application" quie s'appelle
"TestCustom"

Je référence le projet "FMCustomControl" dans ce projet.

Puis si je vous vouler switcher de théme dans tout l'appli
Il faut rajouter dans le App.cs :

Code:

1
2
3
4
5
6
7
8
9
 
 protected override void OnStartup(StartupEventArgs e)
        {
            // pour le theme generic
             base.OnStartup(e);
            this.Resources.MergedDictionaries.Add(new generic());
// pour le theme aero
//this.Resources.MergedDictionaries.Add(new aeronormalcolor());
        }

Si vous voulez switcher dans une window
il faut dans le constructeurs de la window ajouter cette ligne

Code:

1
2
3
4
5
 
// pour generic
this.Resources.MergedDictionaries.Add(new generic());
// pour le theme aero
this.Resources.MergedDictionaries.Add(new aeronormalcolor());

MAintenant si vous voulez afficher dans la MEME page un CustomControl avec plusieurs theme differents. Il faut :

1 / Ajouter dans le CustomControl.cs ::

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
  #region Dependency Property 
         public static readonly DependencyProperty ThemeProperty = DependencyProperty.Register("ThemeSource", typeof(string), typeof(FMButton), new PropertyMetadata(null, new PropertyChangedCallback(OnThemeSourceChanged)));
 
         public string ThemeSource
         {
 
             get { return (string)GetValue(ThemeProperty); }
 
             set
             {
                 SetValue(ThemeProperty, value);                
             }
         }
 
         private static void OnThemeSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             Debug.WriteLine("ThemeProperty changed");
 
             string valeur = (string)e.NewValue;
 
             if (valeur == "Orange")
             {
 
                 FMButton button = (FMButton)d;
 
                 button.Resources.MergedDictionaries.Add(new aeronormalcolor());
 
                 //Set binding programmatically
                 //UIList list = (UIList)d;
                 //list.treeView.SetValue(ItemsControl.ItemsSourceProperty, e.NewValue);
             }
         }
         #endregion

Puis dans la window1.xaml dans laquelle vous afficher le custom :

Code:

1
2
 
   <CustomControl:FMButton ThemeSource="Orange"/>

VOILA si vous n'avez pas compris quelque chose n'hésitez pas a me demander.

Amandine

08/08/2008, 16h27
ikeas

salut moi j'ai fait un truc de se style
pour changer les languages

sur le menu j'ai mis (en utilisant le tag)
<MenuItem Name="MenuItemDe" Header="{DynamicResource T_DE}" IsCheckable="True" Click="Lang_Click"
Checked="Lang_Checked"
Tag=".\Resources\Lang_De.xaml">

et j'ai juste fait me methode checheck comme ceci
privatevoid Lang_Checked(object sender, RoutedEventArgs e)
{
MenuItem _LastMenuItemChecked = sender asMenuItem;
SetTranslation(_LastMenuItemChecked.Tag asstring);
}

tu dois pouvoir faire la meme chose pour un bouton
12/08/2008, 12h07
Thomas Lebrun

Merci Amandine ;)