[WPF MVVM] Couleur de la sélection dans le popup combobox

**megamario** · 14/12/2020, 09h19

Bonjour à tous,

J'ai un petit souci cosmétique dans mon logiciel.

J'ai fait en sorte que l'utilisateur peut utiliser des thèmes diffèrent, couleur background et foreground, dans les vues, textebox, label, combobox, et c'est dans ce dernier que j'ai un petit souci.

Lorsque l'on clique sur le combobox pour sélectionner dans la liste, suivant les thèmes de couleur sélectionné, le contraste entre les choix possible et la sélection ne se voie presque plus et suivant les écrans cela change pas mal.

Aillant plusieurs vue qui utilise le combobox, j'ai aussi créer un style dans application.xaml.

Code XAML :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
        <!-- PERSONNAL COMBOBOX -->
        <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <Border
                  x:Name="Border" 
                  Grid.Column="1"
                  CornerRadius="0,5,5,0"
                  Background="Gray " 
                  BorderBrush="Black"
                  BorderThickness="2" />
                <Border 
                  Grid.Column="0"
                  CornerRadius="5,0,0,5" 
                  Margin="0" 
                  Background="{TemplateBinding Background}"  
                  BorderBrush="Black"
                  BorderThickness="2,2,0,2" />
                <Path 
                  x:Name="Arrow"
                  Grid.Column="1"     
                  Fill="White"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
                />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#808080" />
                </Trigger>
                <Trigger Property="ToggleButton.IsChecked" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
                    <Setter Property="Foreground" Value="#888888"/>
                    <Setter TargetName="Arrow" Property="Fill" Value="#888888" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
 
        <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
            <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}"/>
        </ControlTemplate>
        <Style x:Key="MyCombo" TargetType="{x:Type ComboBox}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="MinWidth" Value="50"/>
            <Setter Property="MinHeight" Value="20"/>
            <Setter Property="Foreground" Value="Yellow"/>
            <Setter Property="Background" Value="Black" />
            <Setter Property="HorizontalContentAlignment"  Value="Center"/>
            <Setter Property="VerticalContentAlignment"  Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <ToggleButton Name="ToggleButton" 
                                          Template="{StaticResource ComboBoxToggleButton}" 
                                          Grid.Column="2" 
                                          Focusable="false"
                                          IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                          ClickMode="Press"
                                          Background="{TemplateBinding Background}">
                            </ToggleButton>
                            <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}"
                                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                              Margin="5,3,23,1"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment }"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment }"
                            />
                            <TextBox x:Name="PART_EditableTextBox"
                                     Style="{x:Null}" 
                                     Template="{StaticResource ComboBoxTextBox}" 
                                     HorizontalAlignment="Left" 
                                     VerticalAlignment="Center" 
                                     Margin="3,3,23,3"
                                     Focusable="True" 
                                     Background="{TemplateBinding Background}" 
                                     Foreground="{TemplateBinding Foreground }"  
                                     Visibility="Hidden"
                                     IsReadOnly="{TemplateBinding IsReadOnly}"/>
                            <Popup Name="Popup"
                                   Placement="Bottom"
                                   IsOpen="{TemplateBinding IsDropDownOpen}"
                                   AllowsTransparency="True" 
                                   Focusable="False"
                                   PopupAnimation="Slide">
                                <Grid Name="DropDown"
                                      SnapsToDevicePixels="True"                
                                      MinWidth="{TemplateBinding ActualWidth}"
                                      MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder"
                                        Background= "Black"
                                        BorderThickness="1"
                                        BorderBrush="Gray"
                                        />
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasItems" Value="false">
                                <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#888888"/>
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            </Trigger>
                            <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                                <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
                                <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                            </Trigger>
                            <Trigger Property="IsEditable"  Value="true">
                                <Setter Property="IsTabStop" Value="false"/>
                                <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
            </Style.Triggers>
        </Style>

Pour le moment j'ai mi en dur le background dans le popup:

Code XAML :

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

1
2
3
4
5
<Border x:Name="DropDownBorder"
                                        Background= "Black"
                                        BorderThickness="1"
                                        BorderBrush="Gray"
                                        />

Donc mes questions:

1)Est t'il possible d'avoir des couleurs (ou plus généralement des objets) dynamique?
C'est a dire quand lorsque l'on change de thème, cela peut changer des valeur ici, dans Application.xaml.
Certaines sont accessible avec par exemple <Setter Property="HorizontalContentAlignment" Value="Center"/>. Mais comment faire pour la partie popup, j'ai essaye de redéclarer un foreground, mais il me dit que c'est déjà déclarer.

2)Comment déclarer la couleur de la sélection ?

Merci

**megamario** · 15/12/2020, 13h50

Bonjour,

J'ai testé simplement cela, mais cela ne fonctionne pas.

Code XAML :

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
<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:essaie2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
       >
 
    <StackPanel Margin=" 20,20,20,115">
        <ComboBox Name="Cbox"
                  Height="30" >
 
                <ComboBox.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Red</SolidColorBrush>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}">green</SolidColorBrush>
                </ComboBox.Resources>
                <ComboBoxItem>One</ComboBoxItem>
                <ComboBoxItem>Two</ComboBoxItem>
 
 
        </ComboBox>
    </StackPanel>
</Window>

C'est toujours la même couleur de Windows qui est en surbrillance.

Mon style proposé au précèdent message me plais, et si je pouvais juste rajouter cela dans le XAML de mes vues avec un binding sur une variable SolidColorBrush qui serait donc modifiable se serait parfait.

**megamario** · 15/12/2020, 14h58

Bon enfin presque,

J'ai trouvé les variables qui me permettent de changer ma sélection, background et foreground.
Je les avait sous les yeux, mais je ne les trouvais pas:

C'est ici que cela se passe.

Code XAML :

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
   <!-- SimpleStyles: ComboBoxItem -->
            <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
                <Setter Property="SnapsToDevicePixels" Value="true"/>
                <Setter Property="Foreground" Value="{Binding TXT_General_Foreground,FallbackValue='Yellow'}" />
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                            <Border Name="Border"
                              Padding="2"
                              SnapsToDevicePixels="true">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsHighlighted" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="{Binding CMB_Popup_Background,FallbackValue='Blue'}"/>
                                <Setter Property="Foreground" Value="{Binding CMB_Popup_Foreground,FallbackValue='Red'}"/>
                                </Trigger>
 
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Ici je l'ai déplacé dans ma vue, le texte sélectionné dans mon combobox rouge sur fond bleu, pas contre je n'ai pas de changement lorsque je change CMB_Popup_Background et CMB_Popup_Foreground. La liaison ne se fait pas.

Donc comment avoir ces couleurs qui s'adaptent au choix de l'utilisateur?

Dans mon soft, j'ai 4 thèmes possible. Mais l'un de ces thèmes est "custom", donc l'utilisateur peut indiquer ce qu'il veut comme couleur. Les couleurs sont stockées dans un fichier ini. Lorsque je les charge je renseigne la variable CMB_Popup_Background, CMB_Popup_Foreground et TXT_General_Foreground etc...

Merci de votre aide.

[WPF MVVM] Couleur de la sélection dans le popup combobox

VB.NET

Vue hybride

Discussions similaires

Partager

Partager