EventTrigger sur un composant perso + Template

**seiryujay** · 24/10/2008, 18h43

Bonjour,

Je suis en train d'essayer de développer un template de manière à ce qu'une CheckBox soit représentée sous la forme d'un bouton à 3 états (style interrupteur avec en plus un état indéfini), de manière à pouvoir représenter l'état d'une alimentation (indéfini, ON ou OFF).

Du coup, j'ai créé mon template, mais j'ai du mal avec le trigger qui doit capter mon clic et modifier l'apparence de la checkbox. J'arrive à capter le MouseEnter, mais pas le MouseLeftButtonDown.

Voici mon XAML :

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
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
 
    <ControlTemplate x:Key="ThreeStateButtonControlTemplate"
                     TargetType="{x:Type CheckBox}">
        <!-- Ressources définissant l'animation lors du clic -->
        <ControlTemplate.Resources>
            <Storyboard x:Key="OnMouseClick_UndefinedToOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="-45" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
 
            <Storyboard x:Key="OnMouseClick_OnToOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="45" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
 
            <Storyboard x:Key="OnMouseClick_OffToOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[4].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="-45" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
 
        <!-- Composant en lui-même : DockPanel contenant 3 labels et une Grid contenant elle-même des ellipses-->
        <DockPanel x:Name="buttonDockPanel"
                   Margin="15">
            <Label x:Name="undefinedLabel"
                   Content="-"
                   HorizontalAlignment="Center"
                   DockPanel.Dock="Top" />
            <Label x:Name="onLabel"
                   Foreground="Green"
                   Content="ON"
                   DockPanel.Dock="Left" />
            <Label x:Name="offLabel"
                   Foreground="Red"
                   Content="OFF"
                   DockPanel.Dock="Right" />
 
            <Grid x:Name="buttonGrid"
                  Width="Auto"
                  Height="Auto"
                  RenderTransformOrigin="0.5,0.5"
                  DockPanel.Dock="Bottom">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
 
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1"
                                        ScaleY="1" />
                        <SkewTransform AngleX="0"
                                       AngleY="0" />
                        <RotateTransform x:Name="rotateUndefinedToOn"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <RotateTransform x:Name="rotateOnToOff"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <RotateTransform x:Name="rotateOffToOn"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <TranslateTransform X="0"
                                            Y="0" />
                    </TransformGroup>
                </Grid.RenderTransform>
 
                <Ellipse x:Name="mainEllipse"
                         HorizontalAlignment="Center"
                         Margin="5"
                         Width="48"
                         Height="48"
                         Grid.RowSpan="2"
                         Grid.ColumnSpan="3"
                         Fill="{StaticResource toolBarBlackGradient}"
                         Stroke="{StaticResource strokeGradientBrush}"
                         StrokeThickness="2" />
 
                <Ellipse x:Name="littleEllipse"
                         HorizontalAlignment="Center"
                         Width="8"
                         Height="8"
                         Grid.Column="1"
                         Fill="White"
                         Stroke="{StaticResource strokeGradientBrush}"
                         StrokeThickness="2" />
            </Grid>
        </DockPanel>
 
        <!-- Gestion des évènements -->
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="Control.MouseLeftButtonDown">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_UndefinedToOn}" />
                </EventTrigger.Actions>
            </EventTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Je me dis que mon contrôle n'arrive pas à capter mon évènement clic parce qu'il est sur un DockPanel contenant d'autres composants et quand je clique je ne sais pas si les composants fils font remonter l'info à mon DockPanel racine.

Est-ce que quelqu'un voit comment faire ?
Merci d'avance.

**Thomas Lebrun** · 24/10/2008, 19h17

Essaye avec l'event PreviewMouseLeftButtonDown (PS: Une Checkbox, ca a 2 états: tu veux le sortir d'où le 3ème ?)

**seiryujay** · 27/10/2008, 09h35

D'après ce que j'ai compris, on peux y ajouter un état "undefined" (en y mettant null comme valeur je crois) comme sur les checkbox Windows.

Et merci pour le PreviewMouseLeftButtonDown : ça marche nickel !

Par contre, dans quels cas doit-on utiliser le PreviewMouseLeftButtonDown plutôt que le MouseLeftButtonDown ?

**Thomas Lebrun** · 28/10/2008, 08h09

Envoyé par seiryujay

Par contre, dans quels cas doit-on utiliser le PreviewMouseLeftButtonDown plutôt que le MouseLeftButtonDown ?

Dis toi que dès que tu veux t'abonner à un event d'un contrôle qui n'as pas le focus => PreviewXXX sinon XXX

**seiryujay** · 31/10/2008, 17h02

Question supplémentaire.
Je souhaite créer un interrupteur qui :
1) au départ se situe dans un état intermédiaire (correspondant à "indéterminée)
2) quand on clique dessus depuis sa position intermédiaire, il doit passer sur l'état OFF
3) quand on clique dessus depuis sa position OFF, il doit passer sur l'état ON
3) quand on clique dessus depuis sa position ON, il doit passer sur l'état OFF

Pour cela, j'ai amélioré mon code présenté précédemment et voici ce que ça donne :

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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    x:Class="CheckBox">
 
 
 
    <!-- Contrôle permettant de représenter unbouton à 3 états à la manière d'un potentiomètre -->
    <!-- Bordure en dégradé -->
    <LinearGradientBrush x:Key="strokeGradientBrush"
                         StartPoint="0,0"
                         EndPoint="0,1">
        <GradientStop Color="SteelBlue"
                      Offset="0.0" />
        <GradientStop Color="LightSteelBlue"
                      Offset="0.5" />
        <GradientStop Color="SteelBlue"
                      Offset="1.0" />
    </LinearGradientBrush>
 
    <!-- Composant en lui-même -->
    <ControlTemplate x:Key="ThreeStateButtonControlTemplate"
                     TargetType="{x:Type CheckBox}">
        <!-- Ressources définissant l'animation lors du clic -->
        <ControlTemplate.Resources>
            <Storyboard x:Key="OnMouseClick_UndefinedToOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="-45" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
 
            <Storyboard x:Key="OnMouseClick_UndefinedToOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="45" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
 
            <Storyboard x:Key="OnMouseClick_OnToOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[4].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="90" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
 
            <Storyboard x:Key="OnMouseClick_OffToOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="buttonGrid"
                                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[5].(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                                          Value="-90" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
 
        <!-- Composant en lui-même : DockPanel contenant 3 labels et une Grid contenant elle-même des ellipses-->
        <DockPanel x:Name="buttonDockPanel"
                   Margin="15">
            <Label x:Name="undefinedLabel"
                   Content="-"
                   HorizontalAlignment="Center"
                   DockPanel.Dock="Top" />
            <Label x:Name="onLabel"
                   Foreground="Green"
                   Content="ON"
                   DockPanel.Dock="Left" />
            <Label x:Name="offLabel"
                   Foreground="Red"
                   Content="OFF"
                   DockPanel.Dock="Right" />
 
            <Grid x:Name="buttonGrid"
                  Width="Auto"
                  Height="Auto"
                  RenderTransformOrigin="0.5,0.5"
                  HorizontalAlignment="Center"
                  DockPanel.Dock="Bottom">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
 
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1"
                                        ScaleY="1" />
                        <SkewTransform AngleX="0"
                                       AngleY="0" />
                        <RotateTransform x:Name="rotateUndefinedToOn"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <RotateTransform x:Name="rotateUndefinedToOff"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <RotateTransform x:Name="rotateOnToOff"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <RotateTransform x:Name="rotateOffToOn"
                                         CenterX="0.5"
                                         CenterY="0.5" />
                        <TranslateTransform X="0"
                                            Y="0" />
                    </TransformGroup>
                </Grid.RenderTransform>
 
                <Ellipse x:Name="mainEllipse"
                         HorizontalAlignment="Center"
                         Margin="5"
                         Width="48"
                         Height="48"
                         Grid.RowSpan="2"
                         Grid.ColumnSpan="3"
                         Fill="{StaticResource toolBarBlackGradient}"
                         Stroke="{StaticResource strokeGradientBrush}"
                         StrokeThickness="2" />
 
                <Ellipse x:Name="littleEllipse"
                         HorizontalAlignment="Center"
                         Width="8"
                         Height="8"
                         Grid.Column="1"
                         Fill="White"
                         Stroke="{StaticResource strokeGradientBrush}"
                         StrokeThickness="2" />
            </Grid>
        </DockPanel>
 
        <!-- Gestion des évènements -->
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked"
                               Value="{x:Null}" />
                    <Condition Property="IsPressed"
                               Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_UndefinedToOff}" />
                </MultiTrigger.EnterActions>
            </MultiTrigger>
 
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked"
                               Value="True" />
                    <Condition Property="IsPressed"
                               Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_OnToOff}" />
                </MultiTrigger.EnterActions>
            </MultiTrigger>
 
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked"
                               Value="False" />
                    <Condition Property="IsPressed"
                               Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_OffToOn}" />
                </MultiTrigger.EnterActions>
            </MultiTrigger>
 
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>

Ca marche presque, mais j'ai un problème : la première fois que mon composant doit réaliser une transition (que ce soit de intermédiaire vers OFF, de OFF vers ON ou de ON vers OFF), tout fonctionne. (donc en gros lors des 3 premiers clics)
Par contre, à la suite de ces 3 clics, mon bouton ne bouge plus, et je ne comprend pas pourquoi...

Quelqu'un verrait-il ce qui cloche dans mon code ?

Merci !

**despeludo** · 02/11/2008, 10h59

Envoyé par seiryujay

Bonjour,

Du coup, j'ai créé mon template, mais j'ai du mal avec le trigger qui doit capter mon clic et modifier l'apparence de la checkbox. J'arrive à capter le MouseEnter, mais pas le MouseLeftButtonDown.

Il faut savoir qu'une checkbox est une classe qui hérite de Button, classe qui met à disposition l'événement Click. De ce fait, tous les événements de type MouseLeftButtonDown, PreviewMouseLeftButtonDown et autres sont entièrement gérés par la classe Button et il n'est donc plus possible (enfin moi j'ai déjà lutter et je n'ai pas trouvé comment faire), de recevoir ces événements sur du code utilisateur. Pour le bouton droit pas de problème, mais pour le gauche c'est une autre histoire.

La solution pourrait éventuellement consister à ce que ton Control soit un UserControl sur lequel tu pourrra gère les événements de MouseLeftButtonDown et autres, et affecter la représentation de ta checkbox en fonction.

**Thomas Lebrun** · 02/11/2008, 12h53

Envoyé par despeludo

il n'est donc plus possible (enfin moi j'ai déjà lutter et je n'ai pas trouvé comment faire), de recevoir ces événements sur du code utilisateur.

Dasn le constructeur de ton CustomControl, tu peux rajouter un AddHandler sur un event.

Genre:

this.AddHandler(Button.Click, ....);

**seiryujay** · 03/11/2008, 11h13

Ca ne m'explique pas pourquoi mes évènements fonctionnent la première fois et pas les suivantes...

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
35
36
37
38
39
40
 
        <!-- Gestion des évènements -->
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked"
                               Value="{x:Null}" />
                    <Condition Property="IsPressed"
                               Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_UndefinedToOff}" />
                </MultiTrigger.EnterActions>
            </MultiTrigger>
 
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked"
                               Value="True" />
                    <Condition Property="IsPressed"
                               Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_OnToOff}" />
                </MultiTrigger.EnterActions>
            </MultiTrigger>
 
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked"
                               Value="False" />
                    <Condition Property="IsPressed"
                               Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseClick_OffToOn}" />
                </MultiTrigger.EnterActions>
            </MultiTrigger>
 
        </ControlTemplate.Triggers>

**Thomas Lebrun** · 03/11/2008, 13h08

A en juger par le code que tu mets, je suppose que si ca marche la première fois, c'est que tu entre bien dans l'une des conditions de tes multitriggers mais pas les fois suivantes....

**seiryujay** · 03/11/2008, 13h21

Envoyé par Thomas Lebrun

A en juger par le code que tu mets, je suppose que si ca marche la première fois, c'est que tu entre bien dans l'une des conditions de tes multitriggers mais pas les fois suivantes....

Ben ouais, mais justement je ne comprends pas pourquoi je n'y rentre pas les fois suivantes...
Mon composant c'est une CheckBox et je ne fais qu'en modifier le rendu via mon template, donc je ne comprends pas pourquoi la 2ème fois il ne rentre pas dans mes triggers.

EventTrigger sur un composant perso + Template

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager