Discussion :

[YannSa]

Bonjour amis développeurs !!

Je vous explique tout depuis le début pour essayer d'être clair (ce qui n'est pas mon fort en général) :

J'aimerais créer une bibliothèque de contrôles WPF personnalisés afin de pouvoir l'importer dans n'importe quel projet et obtenir ainsi une homogénéité au niveau du design d'une suite logiciel.
Jusque là pas de soucis.
Dans l'environnement de visual studio mes contrôles personnalisés apparaissent bien dans ma fenêtre de boite à outils et je peux les utiliser sans problème non plus.

Maintenant je veux créer un bouton personnalisé dans l'image change suivant les états qu'il prend.
Avec le code suivant j'arrive à faire ce que je veux, à savoir avoir une image de base, une autre image différente en survol, encore une autre image quand le bouton de la souris est pressé, une animation quand ce bouton est relaché et arrêter mon animation quand le bouton perd le focus :

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
<Style x:Key="{x:Type local:BoutonBase}" TargetType="{x:Type local:BoutonBase}" BasedOn="{StaticResource {x:Type Button}}">
        <!--Dimensions et positionnement du bouton-->
        <Setter Property="Width" Value="150" />
        <Setter Property="Height" Value="150" />
        <Setter Property="Margin" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:BoutonBase}">
                    <Grid Width="{TemplateBinding Width}" 
                            Height="{TemplateBinding Height}" ClipToBounds="True">
 
                        <!--Les images qui correspondent aux differents etats de mon bouton-->
                        <Image Name="imageBase"
                                Source="/Themes/Base.png"
                                Stretch="None"
                                Visibility="Visible" />
                        <Image Name="imageSurvol"
                                Source="/Themes/Survol.png"
                                Stretch="None"
                                Visibility="Collapsed" />
                        <Image Name="imageClick"
                                Source="/Themes/Click.png"
                                Stretch="None"
                                Visibility="Collapsed" />
 
                        <!--Le rectangle qui me permettra de faire une animation quand le bouton sera clique-->
                        <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                StrokeThickness="0"  Opacity="0"
                                Fill="{StaticResource MyGlassBrushResource}"
                                RenderTransformOrigin="0.5,0.5">
 
                            <Rectangle.Stroke>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0.0" Color="#3A9D23" />
                                        <GradientStop Offset="1.0" Color="Gray" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                        </Rectangle>
                    </Grid>
 
                    <!--Gestion des evenements sur mon bouton-->
                    <ControlTemplate.Triggers>
                        <!--En survol de la souris j'affiche l'image de survol et je masque les autres-->
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="glassCube"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="imageBase"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="imageSurvol"
                                    Property="Visibility"
                                    Value="Visible" />
                            <Setter TargetName="imageClick"
                                    Property="Visibility"
                                    Value="Collapsed" />
                        </Trigger>
 
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="glassCube"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="imageBase"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="imageSurvol"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="imageClick"
                                    Property="Visibility"
                                    Value="Visible" />
 
                        </Trigger>
 
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="imageBase"
                                    Property="Visibility"
                                    Value="Visible" />
                            <Setter TargetName="imageSurvol"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="imageClick"
                                    Property="Visibility"
                                    Value="Collapsed" />
                        </Trigger>
 
                        <!--Animation quand on relache le bouton gauche de la souris-->
                        <EventTrigger RoutedEvent="Mouse.PreviewMouseUpOutsideCapturedElement">
                            <EventTrigger.Actions>
                                <BeginStoryboard Name="mouseEnterBeginStoryboard">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="glassCube" 
                                                Storyboard.TargetProperty="Opacity"
                                                From="1.0" To="0.0" Duration="0:0:1" 
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
 
                        <!--Arret de l'animation du dessus quand le bouton perd le focus-->
                        <EventTrigger RoutedEvent="Button.LostFocus">
                            <EventTrigger.Actions>
                                <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                            </EventTrigger.Actions>
                        </EventTrigger>
 
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Maintenant ce code m'oblige à avoir un contrôle utilisateur différent pour chaque bouton qui aura un design avec des images différentes ... Un peu lourd à mettre en place ce système...

J'en arrive donc à mon problème : j'aimerais pouvoir ajouter 3 propriétés qui apparaissent dans la fenêtre Propriétés de visual studio quand je clique sur mon bouton personnalisé dans ma fenêtre MainWindow.xaml.
Ces 3 propriétés me permettrais de paramétrer dynamiquement mes 3 images et donc de faire le lien dynamiquement avec mon code contenu dans mon fichier Generic.xaml ...
Sauf que je n'y arrive pas a gérer ses propriétés ni a faire le lien avec le xaml !

Donc si quelqu'un à la solutionou peut me mettre sur une piste je ne pourrais que lui promettre toute ma reconnaissance, mais c'est déjà pas mal ! :p

[GuruuMeditation]

En gros, tu dois créer un custom control qui hérite de boutton et qui ajoute des propriétés. Dans la méthode OnApplyTemplate, tu peux trouver les controles images qui sont dans le template avec GetTemplateChild. Il ne reste plus qu'a faire le lien entre les deux.

[YannSa]

Ben en fait je suis passé par les DependencyProperty ...

Elles se déclarent comme ça dans le fichier .cs du contrôle :

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
public class BoutonBase : Button
    {
 
        public static DependencyProperty imageBaseProperty;
        public static DependencyProperty imageSurvolProperty;
        public static DependencyProperty imageClickProperty;
 
        static BoutonBase()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(BoutonBase), new FrameworkPropertyMetadata(typeof(BoutonBase)));
 
            BitmapImage bi3 = new BitmapImage(new Uri("pack://application:,,,/Themes/Default.png"));
            imageBaseProperty = DependencyProperty.Register("imageBase", typeof(ImageSource), typeof(BoutonBase),
                new UIPropertyMetadata(bi3));
            //imageBaseProperty = DependencyProperty.Register("imageBase", typeof(ImageSource), typeof(BoutonBase));
            imageSurvolProperty = DependencyProperty.Register("imageSurvol", typeof(ImageSource), typeof(BoutonBase));
            imageClickProperty = DependencyProperty.Register("imageClick", typeof(ImageSource), typeof(BoutonBase));
        }
 
        public ImageSource imageBase
        {
            get { return (ImageSource)base.GetValue(imageBaseProperty); }
            set { base.SetValue(imageBaseProperty, value); }
        }
 
        public ImageSource imageSurvol
        {
            get { return (ImageSource)base.GetValue(imageSurvolProperty); }
            set { base.SetValue(imageSurvolProperty, value); }
        }
 
        public ImageSource imageClick
        {
            get { return (ImageSource)base.GetValue(imageClickProperty); }
            set { base.SetValue(imageClickProperty, value); }
        }
    }

et puis dans le fichier .xaml j'ai changé mon codde en dure pour les images en :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--Les images qui correspondent aux differents etats de mon bouton-->
 
                        <Image Name="Base"
                                Source="{TemplateBinding imageBase}"
                                Stretch="Fill"
                                Visibility="Visible" />
                        <Image Name="Survol"
                                Source="{TemplateBinding imageSurvol}"
                                Stretch="Fill"
                                Visibility="Collapsed" />
                        <Image Name="Click"
                                Source="{TemplateBinding imageClick}"
                                Stretch="Fill"
                                Visibility="Collapsed" />

Les propriétés "imageBase", "imageSurvol", "imageClick", apparaissent même dans le xaml de la MainWindows du projet

[GuruuMeditation]

Oui, j'allais corriger ma réponse (mal réveillé ce matin) pour de dire d'aller voir les dependencyproperties et des templatebindings