Personnaliser un bouton

**Lionhart** · 12/01/2017, 14h22

Bonjour,

Je cherche à faire un bouton ayant une forme originale, mais je ne sais pas comment définir la forme de celui-ci.

Je voudrais qu'il ressemble à ceci :

Nom : exemple bouton.png
Affichages : 160
Taille : 1,1 Ko

Nom : exemple bouton.png
Affichages : 160
Taille : 1,1 Ko

Mes problèmes sont les suivants :

-

Comment faire pour que la largeur change avec le texte dans le bouton ?
Dois-je définir un template avec le premier éclair puis un textblock et pour finit le deuxième éclair ? ou le définir comme un seul bloc ?
Si je définis mon bouton dans un stackpanel de 3 items; lorsque je rajoute un effet sur le passage de souris la bordure que je veux faire apparaitre est sur le stackpanel et ne suis donc pas mes éclairs... Comment faire ?

Merci d'avance pour l'aide que vous pourrez m'apporter

ps : Les éclairs auront une image de background

**micka132** · 12/01/2017, 16h45

J'ai fait ceci, mais c'est pas bien complet...J'ai voulu utiliser des path pour les images afin de bénéficier du redimensionnement, sauf que du coup le margin de mes lignes n'est plus bon en jouant sur le height du bouton...
Neanmoins en utilisant une taille fixe, ce qui est le cas en remplaçant les path par des images tu devrais avoir le comportement souhaité (en jouant un peu sur les margin des Rectangles).
Il y a peut etre moyen de chercher du coté des "clip" également.

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
    <UserControl.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
 
 
                            <Rectangle  Grid.ColumnSpan="3" Stroke="Black" StrokeThickness="1"  Stretch="Fill" Height="1" VerticalAlignment="Top" Margin="5,3,5,0"  />
                            <Path Grid.Column="0" HorizontalAlignment="Left" Stretch="Uniform" Fill="Black" Data="F1 M 75.5912,68.0208C 66.8893,45.5736 58.1849,23.1237 49.4805,0.675751C 49.3308,0.289093 49.0352,3.05176e-005 48.5925,3.05176e-005C 39.9089,3.05176e-005 31.224,3.05176e-005 22.5378,3.05176e-005C 22.3021,3.05176e-005 22.1264,0.0840149 21.9844,0.201233C 21.672,0.38028 21.4753,0.716156 21.6497,1.16534C 27.0756,15.1362 32.5013,29.1093 37.9272,43.0788C 37.2592,43.0788 36.5912,43.0788 35.922,43.0788C 31.5105,43.0788 27.0977,43.0788 22.6862,43.0788C 15.4207,43.0788 8.15372,43.0788 0.88681,43.0788C 0.334625,43.0788 -0.221344,43.6758 0,44.2455C 4.83865,56.7071 9.67715,69.168 14.5144,81.6302C 17.4115,89.0912 20.3086,96.5508 23.2045,104.012C 23.7891,105.516 24.3724,107.018 24.957,108.523C 24.3868,108.745 23.8164,108.966 23.2461,109.188C 21.6212,109.818 19.9948,110.447 18.3685,111.078C 17.612,111.37 17.4597,112.285 18.1472,112.76C 28.0196,119.573 37.8933,126.388 47.7631,133.201C 48.2448,133.531 48.9884,133.203 49.1172,132.652C 51.806,120.969 54.4961,109.285 57.1849,97.6016C 57.3256,96.9792 56.7474,96.1979 56.0535,96.4688C 54.7969,96.9531 53.5417,97.4402 52.2891,97.9246C 51.2931,98.3099 50.2996,98.6927 49.2917,99.0861C 48.2461,96.3919 47.2005,93.7006 46.1537,91.0066C 43.3308,83.7344 40.5065,76.4609 37.681,69.1875C 38.6212,69.1875 39.5612,69.1875 40.5013,69.1875C 45.0729,69.1875 49.6433,69.1875 54.2174,69.1875C 61.0442,69.1875 67.8737,69.1875 74.7045,69.1875C 75.2565,69.1875 75.8125,68.5912 75.5912,68.0208 Z " RenderTransformOrigin="0.5,0.5">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="-20"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
 
                            <Path  Grid.Column="2" HorizontalAlignment="Right" Stretch="Uniform" Fill="Black"
                                  Data="F1 M 75.5912,68.0208C 66.8893,45.5736 58.1849,23.1237 49.4805,0.675751C 49.3308,0.289093 49.0352,3.05176e-005 48.5925,3.05176e-005C 39.9089,3.05176e-005 31.224,3.05176e-005 22.5378,3.05176e-005C 22.3021,3.05176e-005 22.1264,0.0840149 21.9844,0.201233C 21.672,0.38028 21.4753,0.716156 21.6497,1.16534C 27.0756,15.1362 32.5013,29.1093 37.9272,43.0788C 37.2592,43.0788 36.5912,43.0788 35.922,43.0788C 31.5105,43.0788 27.0977,43.0788 22.6862,43.0788C 15.4207,43.0788 8.15372,43.0788 0.88681,43.0788C 0.334625,43.0788 -0.221344,43.6758 0,44.2455C 4.83865,56.7071 9.67715,69.168 14.5144,81.6302C 17.4115,89.0912 20.3086,96.5508 23.2045,104.012C 23.7891,105.516 24.3724,107.018 24.957,108.523C 24.3868,108.745 23.8164,108.966 23.2461,109.188C 21.6212,109.818 19.9948,110.447 18.3685,111.078C 17.612,111.37 17.4597,112.285 18.1472,112.76C 28.0196,119.573 37.8933,126.388 47.7631,133.201C 48.2448,133.531 48.9884,133.203 49.1172,132.652C 51.806,120.969 54.4961,109.285 57.1849,97.6016C 57.3256,96.9792 56.7474,96.1979 56.0535,96.4688C 54.7969,96.9531 53.5417,97.4402 52.2891,97.9246C 51.2931,98.3099 50.2996,98.6927 49.2917,99.0861C 48.2461,96.3919 47.2005,93.7006 46.1537,91.0066C 43.3308,83.7344 40.5065,76.4609 37.681,69.1875C 38.6212,69.1875 39.5612,69.1875 40.5013,69.1875C 45.0729,69.1875 49.6433,69.1875 54.2174,69.1875C 61.0442,69.1875 67.8737,69.1875 74.7045,69.1875C 75.2565,69.1875 75.8125,68.5912 75.5912,68.0208 Z " RenderTransformOrigin="0.5,0.5">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="-1"/>
                                        <SkewTransform/>
                                        <RotateTransform Angle="19.999999999999996"/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
 
                            </Path>
                            <ContentPresenter  Grid.Column="1" x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle Grid.ColumnSpan="3" Stroke="Black" StrokeThickness="1"  Stretch="Fill" Height="1" VerticalAlignment="Bottom" Margin="13,0,13,1" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Stroke" TargetName="haut" Value="{StaticResource Button.MouseOver.Border}"/>
                                <Setter Property="Stroke" TargetName="bas" Value="{StaticResource Button.MouseOver.Border}"/>
                                <Setter Property="Fill" TargetName="gauche" Value="{StaticResource Button.MouseOver.Border}"/>
                                <Setter Property="Fill" TargetName="droit" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Stroke" TargetName="haut" Value="{StaticResource Button.Pressed.Border}"/>
                                <Setter Property="Stroke" TargetName="bas" Value="{StaticResource Button.Pressed.Border}"/>
                                <Setter Property="Fill" TargetName="gauche" Value="{StaticResource Button.Pressed.Border}"/>
                                <Setter Property="Fill" TargetName="droit" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Stroke" TargetName="haut" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="Stroke" TargetName="bas" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="Fill" TargetName="gauche" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="Fill" TargetName="droit" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Button Height="25" Style="{DynamicResource ButtonStyle1}" HorizontalAlignment="Center" >un  defewsuper bouton</Button>
    </Grid>

**Lionhart** · 12/01/2017, 17h16

Merci pour cette approche

.
Jvais voir ce que je peux faire avec ça en premier lieu.

Mon problème et que je voudrais faire un contrôle qui ait un contour qui le suit pour rajouter un effet.
En fait ça me permettrai de définir un contour qui considère mon button comme un seul et unique objet pour éviter de définir le OnMouseOver sur chaque item qui le compose.

J'ai créé le path suivants : (juste que du coup j'ai pas de texte... et que je réfléchit encore au comment appliquer un contour)

Code :

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

 <Path TextBlock.TextAlignment="Center" Stretch="Uniform" Stroke="Black" Width="75" Fill="Red" Data="M470 498 c-58 -34 -99 -63 -92 -66 23 -7 12 -21 -44 -53 -53 -30 -55 -33 -35 -43 20 -11 16 -14 -46 -50 l-67 -39 79 -39 79 -40 19 26 19 26 643 0 643 0 19 -26 19 -26 79 40 79 39 -67 39 c-62 36 -66 39 -46 50 20 10 18 13 -35 43 -56 32 -67 46 -44 53 7 3 -34 32 -92 66 l-105 62 -450 0 -450 0 -105 -62z m1063 -23 c47 -61 55 -76 42 -81 -13 -6 -9 -15 25 -49 24 -25 39 -48 35 -55 -4 -6 1 -22 9 -35 l16 -25 -635 0 -635 0 16 25 c8 13 13 29 9 35 -4 7 11 30 35 55 34 34 38 43 25 49 -13 5 -5 20 42 81 l58 75 450 0 450 0 58 -75z m-1034 -11 c-41 -52 -49 -68 -38 -75 11 -6 5 -18 -29 -52 -28 -29 -39 -46 -31 -49 10 -3 7 -13 -9 -39 -49 -76 -42 -74 -115 -38 -36 18 -64 36 -61 40 2 4 30 22 61 39 51 29 55 34 39 45 -16 12 -12 16 38 46 41 25 52 36 45 45 -10 13 -4 18 101 81 55 34 55 27 -1 -43z m1073 30 c84 -49 90 -54 79 -68 -7 -8 6 -22 45 -45 50 -30 54 -34 38 -46 -16 -11 -12 -16 39 -45 31 -17 59 -35 61 -39 3 -4 -25 -22 -61 -40 -73 -36 -66 -38 -115 38 -16 26 -19 36 -9 39 8 3 -3 20 -31 49 -34 34 -40 46 -29 52 11 7 3 23 -38 75 -29 36 -50 66 -47 66 3 0 33 -16 68 -36z">

J'ai lu un ou 2 trucs sur les Canvas.

Jdois avouer que ce n'est pas évident de trouver un truc simple.

J'ai aussi pensé combiner des paths mais bon...

Sinon j'ai trouver ceci

**Issam** · 14/01/2017, 04h01

bonjour,
même si j'ai lu ta question en diagonale

, je pense que tu as un bon début avec ce code

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
 
<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="ButtonControlTemplate1"
                         TargetType="{x:Type Button}">
 
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="35" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="35" />
                </Grid.ColumnDefinitions>
                <Rectangle Grid.ColumnSpan="3"
                           Height="1"
                           Fill="Black"
                           Margin="10,5"
                           VerticalAlignment="Top" />
                <Rectangle Grid.ColumnSpan="3"
                           Height="1"
                           Fill="Black"
                           Margin="33,5"
                           VerticalAlignment="Bottom" />
                <Path Data="M12.400024,0L19.100006,9 16,10.100037 24.5,17.800049 22,19 32,32 14.900024,22 18.100006,20.700012 7.7000122,14.400024 11.200012,12.5 0,6z"
                      Stretch="Uniform"
                      Fill="#FF000000"
                      x:Name="path1"
                      Width="35"
                      Height="35"
                      Margin="0,0,0,0"
                      RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <TransformGroup.Children>
                                <RotateTransform Angle="0" />
                                <ScaleTransform ScaleX="1"
                                                ScaleY="1" />
                            </TransformGroup.Children>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <!--<ContentPresenter VerticalAlignment="Center" Grid.Column="1"/>-->
                <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1"
                           VerticalAlignment="Center"/>
                <Path Data="M12.400024,0L19.100006,9 16,10.100037 24.5,17.800049 22,19 32,32 14.900024,22 18.100006,20.700012 7.7000122,14.400024 11.200012,12.5 0,6z"
                      Stretch="UniformToFill"
                      Fill="#FF000000"
                      Width="35"
                      Height="35"
                      x:Name="path2"
                      Grid.Column="2"
                      Margin="0,0,0,0"
                      RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <TransformGroup.Children>
                                <RotateTransform Angle="90" />
                                <ScaleTransform ScaleX="1"
                                                ScaleY="1" />
                            </TransformGroup.Children>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
 
 
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames 
                                    Storyboard.TargetName="path1"
                                    Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0.3"
                                                         Value="Yellow" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path2"
                                                              Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0.3"
                                                         Value="Yellow" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
 
 
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path1"
                                                              Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0.3"
                                                         Value="Black" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path2"
                                                              Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0.3"
                                                         Value="Black" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button x:Name="button"
                Content="AAAAAAAAAAAAAAAAAAAAAA"
                HorizontalAlignment="Left"
                Margin="180,124,0,0"
                VerticalAlignment="Top"
                Height="35"
                Template="{DynamicResource ButtonControlTemplate1}" />
 
    </Grid>
</Window>

si ce n'est pas le cas n'hésite pas a donner plus de précisions .

**MABROUKI** · 14/01/2017, 05h09

bonjour

•Comment faire pour que la largeur change avec le texte dans le bouton ?
•Dois-je définir un template avec le premier éclair puis un textblock et pour finit le deuxième éclair ? ou le définir comme un seul bloc ?
•Si je définis mon bouton dans un stackpanel de 3 items; lorsque je rajoute un effet sur le passage de souris la bordure que je veux faire apparaitre est sur le stackpanel et ne suis donc pas mes éclairs... Comment faire ?

Pour la question 1 c'est pas possible ,il vaut mieux raisonner à rebours : "compresse" la taille du texte pour l'adapter à l'espace interieur disponible dans le Path (le double eclair Jupiterien)
Pour la question 2, evidemment un seul Path est plus simple à gerer ....
Pour la question 3 ,pour que l'effet de bordure soit celui du Path ,le même Path doit figurer dans le style ButtonFocusVisual....

voici un exemple pris de la MSDN lib avec tous ses "brushes" modifie qui fera peut etre ton bonheur ...
L'eclair a été dessiné avec MS Expression Blend (en dessus de l'image donné dans ton poste et le xaml generé par Blend copie )....

1/code xaml du fichier application :

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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
 
 
<Application x:Class="WpfCustButtonTemplate.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
 
 
 
    <Application.Resources>
        <!-- Fill Brushes -->
        <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#CCC" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#CCC" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#AAA" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#BBB" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="0.1"/>
                    <GradientStop Color="#EEE" Offset="0.9"/>
                    <GradientStop Color="#FFF" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
        <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
 
        <!-- eclair Brushes -->
        <LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#CCC" Offset="0.0"/>
                    <GradientStop Color="#444" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#CCC" Offset="0.0"/>
                    <GradientStop Color="#444" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#777" Offset="0.0"/>
                    <GradientStop Color="#000" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#444" Offset="0.0"/>
                    <GradientStop Color="#888" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
        <SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />
 
        <!-- Miscellaneous Brushes -->
        <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
        <SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />
 
        <!-- LE CONTROL TEMPLATE     -->
 
        <Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <!--BORDER INUTILE,l'ECLAIR LE REMPLACE-->
                        <!--<Border >-->
                            <Path 
                                Data="M34.374999,42.999998 L41.124995,80.25005 36.624999,92.250069 52.624971,158.75017 47.62498,175.25018 65.624958,265.75032 69.62495,288.5 231.95847,289 254.62492,178 249.95792,156.667 266.625,94.000153 260.95786,83.667122 265.95802,43.333332 z M274.62518,1 L299.625,51.333134 279.29181,114.33363 286.29178,130.66739 265.29193,182.66721 268.62494,201.00023 237.29153,291.00034 237.625,298.33334 149.625,298.66702 149.69772,298.50381 65.75,298.75 65.75,289.5 31.75,200 36.499998,183.5 16.499998,130 22.25,113.25 1,54.249999 25.750001,1.5 31.999998,31.750002 267.625,33.666667 z" Margin="-1.625,1,1,-0.75" 
                                Stretch="Uniform" Stroke="#FFFB0697" StrokeThickness="2" StrokeLineJoin="Bevel" StrokeEndLineCap="Round" StrokeStartLineCap="Round" >
                                <Path.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF189E2B" Offset="0.151"/>
                                        <GradientStop Color="#FFF9084A" Offset="1"/>
                                        <GradientStop Color="#FFE4DEE0" Offset="0.5"/>
                                        <GradientStop Color="#FFE4DEE0" Offset="0.653"/>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                        <!--</Border >-->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style  TargetType="Button">
            <!--Set to true to not get any properties from the themes.-->
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="MinHeight" Value="23"/>
            <Setter Property="MinWidth" Value="75"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                       <!--VIEWBOX  QUI SCALE TOUT POUR DES RAISONS D'ESTHETIQUE -->
                        <Viewbox 
                            StretchDirection="Both" Stretch="Uniform">
                            <Grid>
                                <Path 
                                    x:Name="eclair"
                                    Data="M34.374999,42.999998 L41.124995,80.25005 36.624999,92.250069 52.624971,158.75017 47.62498,175.25018 65.624958,265.75032 69.62495,288.5 231.95847,289 254.62492,178 249.95792,156.667 266.625,94.000153 260.95786,83.667122 265.95802,43.333332 z M274.62518,1 L299.625,51.333134 279.29181,114.33363 286.29178,130.66739 265.29193,182.66721 268.62494,201.00023 237.29153,291.00034 237.625,298.33334 149.625,298.66702 149.69772,298.50381 65.75,298.75 65.75,289.5 31.75,200 36.499998,183.5 16.499998,130 22.25,113.25 1,54.249999 25.750001,1.5 31.999998,31.750002 267.625,33.666667 z" Margin="-1.625,1,1,-0.75" 
                                    Stretch="Uniform" Stroke="#FFFB0697" StrokeThickness="2" StrokeLineJoin="Bevel" StrokeEndLineCap="Round" StrokeStartLineCap="Round" >
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF189E2B" Offset="0.151"/>
                                            <GradientStop Color="#FFF9084A" Offset="1"/>
                                            <GradientStop Color="#FFE4DEE0" Offset="0.5"/>
                                            <GradientStop Color="#FFE4DEE0" Offset="0.653"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                                <!--RECTANGLE ILLUSTRATIF SERVANT A DETERMINER LE HEIGHT ET WIDTH INTERIEUR-->
                                <!--DU PATH ,LESQUELS HEIGHT ET WIDTH SERVIRONT DANS LE VIEWBOX CI-APRES POUR SCALER LE TEXT DU -->
                                <!--DU CONTENTPRESENTER-->
                                <Rectangle 
                                   Stroke="#FF1A3DDA" StrokeThickness="2"  
                                   MaxWidth="200" MaxHeight="100" Stretch="UniformToFill"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                <Viewbox 
                                    StretchDirection="Both"  Stretch="Uniform"
                                    MaxWidth="200" MaxHeight="100"
                                    >
                                    <ContentPresenter 
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        HorizontalAlignment="Center"   VerticalAlignment="Center"
                                    />
                                 </Viewbox>
                            </Grid>
                        </Viewbox>
                        <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter TargetName="eclair" Property="Stroke" Value="{StaticResource DefaultedBorderBrush}" />
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter TargetName="eclair" Property="Stroke" Value="{StaticResource DefaultedBorderBrush}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="eclair" Property="Fill" Value="{StaticResource DarkBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="eclair" Property="Fill" Value="{StaticResource PressedBrush}" />
                            <Setter TargetName="eclair" Property="Stroke"   Value="{StaticResource PressedBorderBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="eclair" Property="Fill" Value="{StaticResource DisabledBackgroundBrush}" />
                            <Setter TargetName="eclair" Property="Stroke" Value="{StaticResource DisabledBorderBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

2/code xaml du Form User :

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
 
<Window x:Class="WpfCustButtonTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel >
        <Button 
            Content="MyButton" FontSize="72" FontFamily="arial" FontWeight="Bold"
            Foreground="Goldenrod"  
            Click="Button_Click">
        </Button>
        <Separator Height="40"/>
 
        <!--EXEMPLE QUI M'A INSPIRE-->
        <Button Width="120"
               >
            <Viewbox
                Margin="4"
                VerticalAlignment="Stretch"
                Height="Auto">
                <TextBlock   Text="Bartenders" />
            </Viewbox>
        </Button>
    </StackPanel >
</Window>

et son code behind .cs illustrant la zone reactive:

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
 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace WpfCustButtonTemplate
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("mybutton");
        }
    }
}

bon code....

**Lionhart** · 16/01/2017, 09h59

Bonjour,

Serait-il possible d'avoir le lien du tuto msdn aussi s'il vous plaît ?

Merci beaucoup pour votre aide.

**MABROUKI** · 16/01/2017, 12h55

bonjour

MSDN HELP Library Fr et rubriques ci-après :

Developpement .NET
=>Kit de developpement .NET Framework SDK
=>Rubrique NET Framework
=>Windows Presentation Foundation
=>Contrôles
=>Personnalisation des contrôles
=>Exemples de ControlTemplate
=>Button ControlTemplate, exemple....

bon code...

**Lionhart** · 17/01/2017, 11h34

Encore merci pour votre aide.

Personnaliser un bouton

Windows Presentation Foundation

Discussions similaires

Partager

Partager