Discussion :

[amandinerenard]

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

[Thomas Lebrun]

Il suffit de merger (fusionner) le contenu de ton fichier de thèmes dans la propriétés Resources de ton CustomControl

[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

[Thomas Lebrun]

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

[ikeas]

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

voici le code
dans app tu colle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[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

[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

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

[amandinerenard]

Ok super j'ai réussi.
Merci beaucoup je vais pouvoir commencer mon framework.
Amandine

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

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

[Thomas Lebrun]

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

A toi et à d'autres

[amandinerenard]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et aero.normalcolor.cs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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


Amandine

[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

[Thomas Lebrun]

Merci Amandine