Héritage de style et ControlTemplate - Définir PART_EditableTextBox dans une ComboBox

**FRED.G** · 13/10/2008, 13h57

Bonjour,

j'utilise le contrôle personnalisé InfoTextBox de Kevin Moore. Ce contrôle hérite de TextBox et définit quelques propriétés de dépendance, et surtout, un ControlTemplate par défaut basé sur celui de TextBox. Tout fonctionne parfaitement.

Maintenant, j'aimerais obtenir des fonctionnalités similaires sur une ComboBox. La classe ComboBox utilise un TextBox pour sa partie éditable, et ce TextBox peut être définit dans un ControlTemplate car ComboBox possède cet attribut :

Code vb.net :

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

TemplatePart(Name:="PART_EditableTextBox", Type:=GetType(TextBox))

Je pense donc à créer un nouveau contrôle personnalisé "InfoComboBox" pour lequel je n'aurais qu'à modifier le ControlTemplate afin de mapper PART_EditableTextBox sur une InfoTextBox. Je pense être sur la bonne voie mais je n'ai jamais (re)défini de ControlTemplate.

Y a-t-il un moyen d'hériter du ControlTemplate par défaut de ComboBox et de modifier uniquement la définition de PART_EditableTextBox ?

**FRED.G** · 13/10/2008, 14h58

Apparament, on peut hériter des styles, mais pas des ControlTemplate

Donc il me faut créer un ControlTemplate de A à Z. Voici mon point de départ :

Code xml :

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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<Style x:Key="{x:Type cvsUI:InfoComboBox}" TargetType="{x:Type cvsUI:InfoComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type cvsUI:InfoComboBox}">
                        <Grid Name="MainGrid" SnapsToDevicePixels="True">
 
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="0" MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
                            </Grid.ColumnDefinitions>
 
                            <Popup IsOpen="False" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" AllowsTransparency="True" Name="PART_Popup" Margin="1,1,1,1" Grid.ColumnSpan="2">
 
                                <mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw" MinWidth="0" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
 
                                    <Border BorderThickness="1,1,1,1" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" Name="DropDownBorder">
 
                                        <ScrollViewer CanContentScroll="True">
                                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained" />
                                        </ScrollViewer>
                                    </Border>
                                </mwt:SystemDropShadowChrome>
                            </Popup>
 
                            <ToggleButton IsChecked="False" BorderBrush="{TemplateBinding Border.BorderBrush}" 
                                          Background="{TemplateBinding Panel.Background}" Grid.ColumnSpan="2">
 
                                <ToggleButton.Style>
 
                                    <Style TargetType="ToggleButton">
 
                                        <Style.Resources>
                                            <ResourceDictionary />
                                        </Style.Resources>
 
                                        <Setter Property="FrameworkElement.OverridesDefaultStyle">
                                            <Setter.Value>
                                                <s:Boolean>True</s:Boolean>
                                            </Setter.Value>
                                        </Setter>
 
                                        <Setter Property="KeyboardNavigation.IsTabStop">
 
                                            <Setter.Value>
                                                <s:Boolean>False</s:Boolean>
                                            </Setter.Value>
                                        </Setter>
 
                                        <Setter Property="UIElement.Focusable">
 
                                            <Setter.Value>
                                                <s:Boolean>False</s:Boolean>
                                            </Setter.Value>
                                        </Setter>
 
                                        <Setter Property="ButtonBase.ClickMode">
 
                                            <Setter.Value>
                                                <x:Static Member="ClickMode.Press" />
                                            </Setter.Value>
                                        </Setter>
 
                                        <Setter Property="Control.Template">
 
                                            <Setter.Value>
 
                                                <ControlTemplate TargetType="ToggleButton">
 
                                                    <mwt:ButtonChrome Background="{TemplateBinding Panel.Background}" 
                                                                      BorderBrush="{TemplateBinding Border.BorderBrush}" 
                                                                      RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" 
                                                                      RenderPressed="{TemplateBinding ButtonBase.IsPressed}" 
                                                                      Name="Chrome" SnapsToDevicePixels="True">
 
                                                        <Grid Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" 
                                                              HorizontalAlignment="Right">
                                                            <Path Data="M0,0L3.5,4 7,0z" Fill="#FF000000" Name="Arrow" 
                                                                  Margin="3,1,0,0" HorizontalAlignment="Center" 
                                                                  VerticalAlignment="Center" />
                                                        </Grid>
                                                    </mwt:ButtonChrome>
 
                                                    <ControlTemplate.Triggers>
 
                                                        <Trigger Property="ToggleButton.IsChecked">
 
                                                            <Setter TargetName="Chrome" Property="mwt:ButtonChrome.RenderPressed">
 
                                                                <Setter.Value>
                                                                    <s:Boolean>True</s:Boolean>
                                                                </Setter.Value>
                                                            </Setter>
 
                                                            <Trigger.Value>
                                                                <s:Boolean>True</s:Boolean>
                                                            </Trigger.Value>
                                                        </Trigger>
 
                                                        <Trigger Property="UIElement.IsEnabled">
 
                                                            <Setter TargetName="Arrow" Property="Shape.Fill">
 
                                                                <Setter.Value>
                                                                    <SolidColorBrush>#FFAFAFAF</SolidColorBrush>
                                                                </Setter.Value>
                                                            </Setter>
 
                                                            <Trigger.Value>
                                                                <s:Boolean>False</s:Boolean>
                                                            </Trigger.Value>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ToggleButton.Style>
                            </ToggleButton>
                            <ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
                                              ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" 
                                              ContentStringFormat="{TemplateBinding ComboBox.SelectionBoxItemStringFormat}" 
                                              Margin="{TemplateBinding Control.Padding}" 
                                              HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
                                              VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" 
                                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                                              IsHitTestVisible="False" />
                        </Grid>
 
                        <ControlTemplate.Triggers>
 
                            <Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup">
 
                                <Setter TargetName="Shdw" Property="FrameworkElement.Margin">
 
                                    <Setter.Value>
                                        <Thickness>0,0,5,5</Thickness>
                                    </Setter.Value>
                                </Setter>
 
                                <Setter TargetName="Shdw" Property="mwt:SystemDropShadowChrome.Color">
 
                                    <Setter.Value>
                                        <Color>#71000000</Color>
                                    </Setter.Value>
                                </Setter>
 
                                <Trigger.Value>
                                    <s:Boolean>True</s:Boolean>
                                </Trigger.Value>
                            </Trigger>
 
                            <Trigger Property="ItemsControl.HasItems">
 
                                <Setter TargetName="DropDownBorder" Property="FrameworkElement.Height">
 
                                    <Setter.Value>
                                        <s:Double>95</s:Double>
                                    </Setter.Value>
                                </Setter>
 
                                <Trigger.Value>
                                    <s:Boolean>False</s:Boolean>
                                </Trigger.Value>
                            </Trigger>
 
                            <Trigger Property="UIElement.IsEnabled">
 
                                <Setter Property="TextElement.Foreground">
 
                                    <Setter.Value>
                                        <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                                    </Setter.Value>
                                </Setter>
 
                                <Setter Property="Panel.Background">
 
                                    <Setter.Value>
                                        <SolidColorBrush>#FFF4F4F4</SolidColorBrush>
                                    </Setter.Value>
                                </Setter>
 
                                <Trigger.Value>
                                    <s:Boolean>False</s:Boolean>
                                </Trigger.Value>
                            </Trigger>
 
                            <Trigger Property="ItemsControl.IsGrouping">
 
                                <Setter Property="ScrollViewer.CanContentScroll">
                                    <Setter.Value>
                                        <s:Boolean>False</s:Boolean>
                                    </Setter.Value>
                                </Setter>
 
                                <Trigger.Value>
                                    <s:Boolean>True</s:Boolean>
                                </Trigger.Value>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Je pense qu'il me reste à insérer un élément InfoTextbox en le nommant "PART_EditableTextBox", mais où l'insérer ?

EDIT : ce qui me laisse perplexe, c'est que ce template fonctionne alors même qu'aucun élément TextBox n'est spécifié. J'ai même vérifié dans reflector si la classe comboBox n'en créait pas une de substitution, et comme on pouvait s'y attendre, la réponse est non (heureusement) !

Je précise que quand j'écris que ça fonctionne bien, je parle tout particulièrement de la saisie de texte dans la zone d'édition de la Combo.

Franchement je n'y comprend rien. Je ne comprends pas comment la combo peut gérer l'édition de texte alors que son élément PART_EditableTextBox n'existe pas.

Toute aide est la bienvenue.

**FRED.G** · 14/10/2008, 13h12

Je pense que j'ai la réponse à la question suivante : comment des fonctions de saisie sont dispos alors que mon template ne spécifie aucun élément PART_EditableTextBox ?

En fait, il ne faut pas confondre Style et ControlTemplate (ça mériterait un petit tuto ça d'ailleurs

).

Le code xaml que j'ai posté précédement est un style à appliquer par défaut au custom contrôle InfoComboBox. Ce style définit bien un ControlTemplate, lequel effectivement ne définit aucun élément nommé PART_EditableTextBox.

Cependant, le style est basé sur un autre style, celui appliqué par défaut aux Combobox :

Code xml :

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

<Style x:Key="{x:Type cvsUI:InfoComboBox}" TargetType="{x:Type cvsUI:InfoComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">

Or justement, ce style hérité définit un trigger qui applique un nouveau style si la propriété IsEditable est à Vrai.

Code xml :

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

1
2
3
4
5
6
7
8
  <Style.Triggers>
    <Trigger Property="ComboBox.IsEditable">
...
                <Trigger.Value>
                  <s:Boolean>True</s:Boolean>
                </Trigger.Value>
              </Trigger>
  </Style.Triggers>

Et c'est dans ce nouveau style qu'est définit l'élement PART_EditableTextBox :

Code xml :

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
<TextBox 
    IsReadOnly="False" 
    HorizontalContentAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
    VerticalContentAlignment="{TemplateBinding Control.VerticalContentAlignment}" 
    Name="PART_EditableTextBox" 
    Margin="{TemplateBinding Control.Padding}" 
    xml:space="preserve">
    <TextBox.Style>
        <Style TargetType="TextBox">
            <Style.Resources>
                <ResourceDictionary /></Style.Resources>
            <Setter Property="FrameworkElement.OverridesDefaultStyle">
                <Setter.Value><s:Boolean>True</s:Boolean></Setter.Value>
            </Setter>
            <Setter Property="UIElement.AllowDrop">
                <Setter.Value><s:Boolean>True</s:Boolean></Setter.Value>
            </Setter>
            <Setter Property="FrameworkElement.MinWidth">
                <Setter.Value><s:Double>0</s:Double></Setter.Value>
            </Setter>
            <Setter Property="FrameworkElement.MinHeight">
                <Setter.Value><s:Double>0</s:Double></Setter.Value>
            </Setter>
            <Setter Property="FrameworkElement.FocusVisualStyle">
                <Setter.Value><x:Null /></Setter.Value>
            </Setter>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
 
                        <ScrollViewer HorizontalScrollBarVisibility="Hidden" 
                                      VerticalScrollBarVisibility="Hidden" 
                                      Background="#00FFFFFF" 
                                      Name="PART_ContentHost" 
                                      Focusable="False"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TextBox.Style>
</TextBox>

Je me suis dis que je n'avais qu'à remplacer cette portion de code par mon propre code créant un élément InfoTextBox au lieu de TextBox. Malheureusement cela ne fonctionne pas pour le thème Aero (dont les extraits xaml sont tous issus).

J'ai réussi à intégrer une InfoTextBox dans un comboBox avec un des styles personnalisés fournis en exemple sur msdn, mais pas avec le style correspondant au thème Aero.

Si quelqu'un est intéressé par ces recherches, je peux poster le code source de InfoTextbox, du style personnalisé avec lequel ça fonctionne, et le code complet du style Aero pour ComboBox.

Héritage de style et ControlTemplate - Définir PART_EditableTextBox dans une ComboBox

Windows Presentation Foundation

Discussions similaires

Partager

Partager