IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Windows Presentation Foundation Discussion :

Design de bouton avec Photoshop ?


Sujet :

Windows Presentation Foundation

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut Design de bouton avec Photoshop ?
    Bonjour

    Je suis en cours de développement d'une application avec WPF.

    Actuellement, je génère un écran de sélection avec des CheckBox, que j'ai mis en style "ToggleButton" pour un rendu esthétique plus sympa. Seulement, dans ce CheckBox au style de "ToggleButton"; difficile de mettre le contenu texte d'une variable d'une binding en haut, puis un autre texte, descriptif par exemple, à la ligne.

    J'ai vu qu'il était possible de designer son application WPF avec Photoshop. Je souhaite donc, pour mes CheckBox, ne pas leur donner le style "ToggleButton" mais, une image, rectangle, ressemblant à un bouton avec 2 zones de textes ou je pourrais écrire.

    Avez-vous des tutoriaux à proposer ? Faut-il acheter un logiciel spécifique pour pouvoir importer ces fichiers. Ou alors, Photoshop n'est peut-être pas la bonne solution et il y à un autre moyen ?


    Par avance, merci.

  2. #2
    Expert confirmé
    Inscrit en
    Avril 2008
    Messages
    2 564
    Détails du profil
    Informations personnelles :
    Âge : 64

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 564
    Points : 4 441
    Points
    4 441
    Par défaut
    Bonjour

    Photoshop pour préparer une image ,2 images pour des transitions oui, à condition de maitriser ce logiciel !!!

    Par contre pour combiner les effets de transition, de frétillement ,mouvement etc.,il n'y a rien de mieux que VS Blend qui offre une interface de manipulation interactive conviviale qui est traduite à la volée en XAML pour un control WPF dont le fichier XAML est réutilisable dans un projet WPF sous VS...
    VS Blend est installé avec VS Community 2017 ou 2015.....

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Salut

    Je connais Photoshop.

    Peux-tu m'expliquer comment faire mon image avec mes 2 zones de texte qui sera une checkbox ou as-tu un tuto ??

    Merci

  4. #4
    Expert confirmé
    Inscrit en
    Avril 2008
    Messages
    2 564
    Détails du profil
    Informations personnelles :
    Âge : 64

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 564
    Points : 4 441
    Points
    4 441
    Par défaut
    bonjour

    Pour rester simple et comme tu as besoin d'une bascule à 2 états, tu peux faire un UserControl avec:
    Partie code behind :
    1/ une DP IsChecked de type bool synchronise avec chaque état
    2/ 2 DP ImageUne et ImageDeux (une pour chaque état)
    3/ 2 DP Text1 et Text2 de type string pour tes 2 textes
    4/ un évent Click du UserControl qui gère le basculement de la DP IsCheched et suivant sa valeur assignera l'image Une ou Deux à un control Image dans l'interface(voit ci-après)


    Partie interface:
    1/ - un control Button Template avec un Control Image bindé sur l'image Une par défaut (le UserControl doit être nommé avec Name et non x:Name) et deux TextBox ou TextBlock bindes aux DP Text1 et Text2 ...

    Voici un exemple code à améliorer :

    code XAML du UserControl:
    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
     
    <UserControl x:Class="WpfClickableImage.ControlClickableImage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Name="UC"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300"
                 >
        <StackPanel>
            <Button 
     
                Click="Button_Click"
                Margin="10"
                HorizontalAlignment="Center"
                ToolTip="Click on Fred">
                <Button.Template>
                    <ControlTemplate>
                        <Border x:Name="theBorder"
                            BorderBrush="Transparent"
                            BorderThickness="2">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image 
                                    Grid.Column="0" 
                                    Source="{Binding ElementName=UC, Path=Image}"
                                    Width="{Binding ElementName=UC, Path=ImageWidth}"
                                    Height="{Binding ElementName=UC, Path=ImageHeight}"/>
                                <StackPanel
                                    Grid.Column="1"
                                    Orientation="Vertical" Margin="5">
                                    <TextBlock 
                                        Text="{Binding ElementName=UC, Path=Text1}"
                                        Margin="10,0,0,0"/>
                                    <TextBlock 
                                        Text="{Binding ElementName=UC, Path=Text2}"
                                        Margin="10,0,0,0"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="theBorder"
                                    Value="LightSkyBlue"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </StackPanel>
    </UserControl>
    son code boiler-plate behind.cs
    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
     
    namespace WpfClickableImage
    {
        /// <summary>
        /// Logique d'interaction pour ControlClickableImage.xaml
        /// </summary>
        public partial class ControlClickableImage : UserControl
        {
            public ControlClickableImage()
            {
                InitializeComponent();
            }
            public ImageSource Image
            {
                get { return (ImageSource)GetValue(ImageProperty); }
                set { SetValue(ImageProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for Image.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageProperty =
                DependencyProperty.Register("Image", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
            public ImageSource ImageBack
            {
                get { return (ImageSource)GetValue(ImageBackProperty); }
                set { SetValue(ImageBackProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageBack.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageBackProperty =
                DependencyProperty.Register("ImageBack", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
     
            public double ImageWidth
            {
                get { return (double)GetValue(ImageWidthProperty); }
                set { SetValue(ImageWidthProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageWidth.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageWidthProperty =
                DependencyProperty.Register("ImageWidth", typeof(double), typeof(ControlClickableImage),
                new UIPropertyMetadata(16d));
     
            public double ImageHeight
            {
                get { return (double)GetValue(ImageHeightProperty); }
                set { SetValue(ImageHeightProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageHeight.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageHeightProperty =
                DependencyProperty.Register("ImageHeight", typeof(double), typeof(ControlClickableImage), 
                new UIPropertyMetadata(16d));
     
            public string Text1
            {
                get { return (string)GetValue(Text1Property); }
                set { SetValue(Text1Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text1Property =
                DependencyProperty.Register("Text1", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
            public string Text2
            {
                get { return (string)GetValue(Text2Property); }
                set { SetValue(Text2Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text2Property =
                DependencyProperty.Register("Text2", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
     
     
     
            public bool IsChecked
            {
                get { return (bool)GetValue(IsCheckedProperty); }
                set { SetValue(IsCheckedProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for IsChecked.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty IsCheckedProperty =
                DependencyProperty.Register("IsChecked", typeof(bool), typeof(ControlClickableImage), 
                new UIPropertyMetadata(false));
     
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                this.IsChecked = !IsChecked;
               // swap images
                ImageSource temp = this.Image;
                this.Image = this.ImageBack;
                this.ImageBack = temp;
                //// assign
                //    this.IsChecked == true ? new ImageBrush(this.ImageBack) : new ImageBrush(this.Image);
     
            }
        }
    }
    code XAML du Form User(pas de code behind):

    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
     
    <Window x:Class="WpfClickableImage.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:my="clr-namespace:WpfClickableImage"
            Title="Window1" Height="300" Width="300">
        <Grid>
            <my:ControlClickableImage 
                Image="calendar.png" 
                ImageBack="worldwallpaper.jpg" 
                Text1="ControlImageClickable" 
                Text2="Description" 
                HorizontalAlignment="Left" VerticalAlignment="Top"
                ImageWidth="20" ImageHeight="20" Margin="10" ButtonBase.Click="Button_Click">
     
            </my:ControlClickableImage>
        </Grid>
    </Window>
    pour un user on doit exposer aux moins 2 events Checked et Unchecked à raiser dans le Button_Click suivant la valeur de la DP IsChecked....et d'autres choses

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Bonjour et merci beaucoup pour la réponse.

    Pouvez-vous me dire ce qu'est une "DP" s.v.p ??

    J'ai une erreur sur :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
                                    <my:BoutonSelection
                                    Image="calendar.png" 
                                    ImageBack="worldwallpaper.jpg" 
                                    Text1="ControlImageClickable" 
                                    Text2="Description" 
                                    HorizontalAlignment="Left" VerticalAlignment="Top"
                                    ImageWidth="20" ImageHeight="20" Margin="10" ButtonBase.Click="Button_Click">
                                    </my:BoutonSelection>
    "Le nom "BoutonSelection" n'existe pas dans l'espace de noms "clr-Plutus:BoutonSelection".

    Pourtant j'ai bien mis ça en haut :

    xmlns:my="clr-Plutus:BoutonSelection"

    EDIT : C'est bon j'ai réussi

    par contre 1 soucis, dans la Form ou je veux utiliser le contrôle utilisateur, pas de code en Behind, résultat :

    'Plutus.SelectionIlot' ne contient pas une définition pour 'Button_Click' et aucune méthode d'extension 'Button_Click' acceptant un premier argument de type 'Plutus.SelectionIlot' n'a été trouvée (une directive using ou une référence d'assembly est-elle manquante*?)

    Si j'enlève ce bout ButtonBase.Click="Button_Click" de l'appel de mon user contrôle c'est Ok ça génère

    Par contre tout est blanc, je ne vois pas mes images apparaître, ni mes textes. Mais des espaces sont créés donc quelque chose est généré.

    J'ai essayé de faire un DataContext = this sur le user control à l'initialisation mais ça n'a pas changé.

    Merci.

  6. #6
    Expert confirmé
    Inscrit en
    Avril 2008
    Messages
    2 564
    Détails du profil
    Informations personnelles :
    Âge : 64

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 564
    Points : 4 441
    Points
    4 441
    Par défaut
    rebonjour

    Pouvez-vous me dire ce qu'est une "DP" s.v.p. ??
    DP acronyme de DependencyProperty (ou Propriété de Dépendance) ,c'est une propriété spécifique à WPF ,en plus de la propriété CLR classique )...
    Elle supporte le Binding à "droite et à gauche" du littéral "=" alors qu'une propriété CLR n peut figurer qu'à droite du littéral "=" dans un Binding...
    Règle valable en code behind également....!!!
    exemple code :
    [CODE]
    //Si DP1 & DP2 sont des DependencyProperty de type double et PROP1 une propriété CLR de type double classique la syntaxe permise en XAML est la suivante:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
      DP1 ="{Binding Path = DP2}"
      DP2 ="{Binding Path = PROP1
      PROP1 = ="{Binding Path = PROP1}" <--- le compilateur se plaint--->
      PROP1 = 125.0 // correct
    Le XAML << ButtonBase.Click="Button_Click" >> dans le Form User est à virer c'est une erreur ,excuse-moi ...!!!

    Tu devrais voir un UserControl dans ton Form avec un Image et 2 textes à droite...
    Tu as du élagué "à la machette" le code XAML du UserControl car le Name="UC" est indispensable sinon tu verras le néant !!!

    j'ai déjà signale que "pour un futur User de ton control on doit exposer aux moins 2 évents Publics Checked et Unchecked à raiser dans le Button_Click suivant la valeur de la DP IsChecked....et d'autres choses"

    Voici le code précédemment donné et complété avec les 2 évents CheckChanged et UnChecked

    code XAML du UserControl dans
    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
     
    <UserControl x:Class="WpfClickableImage.ControlClickableImage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                Name="UC"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300"
                 >
        <StackPanel>
            <Button 
     
                Click="Button_Click"
                Margin="10"
                HorizontalAlignment="Center"
                ToolTip="Click on Fred">
                <Button.Template>
                    <ControlTemplate>
                        <Border x:Name="theBorder"
                            BorderBrush="Transparent"
                            BorderThickness="2">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image 
                                    Grid.Column="0" 
                                    Source="{Binding ElementName=UC, Path=Image}"
                                    Width="{Binding ElementName=UC, Path=ImageWidth}"
                                    Height="{Binding ElementName=UC, Path=ImageHeight}"/>
                                <StackPanel
                                    Grid.Column="1"
                                    Orientation="Vertical" Margin="5">
                                    <TextBlock 
                                        Text="{Binding ElementName=UC, Path=Text1}"
                                        Margin="10,0,0,0"/>
                                    <TextBlock 
                                        Text="{Binding ElementName=UC, Path=Text2}"
                                        Margin="10,0,0,0"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="theBorder"
                                    Value="LightSkyBlue"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </StackPanel>
    </UserControl>
    et son code behind .cs:
    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
     
    namespace WpfClickableImage
    {
        /// <summary>
        /// Logique d'interaction pour ControlClickableImage.xaml
        /// </summary>
        public partial class ControlClickableImage : UserControl
        {
     
     
     
            public ControlClickableImage()
            {
                InitializeComponent();
            }
            public ImageSource Image
            {
                get { return (ImageSource)GetValue(ImageProperty); }
                set { SetValue(ImageProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for Image.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageProperty =
                DependencyProperty.Register("Image", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
            public ImageSource ImageBack
            {
                get { return (ImageSource)GetValue(ImageBackProperty); }
                set { SetValue(ImageBackProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageBack.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageBackProperty =
                DependencyProperty.Register("ImageBack", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
     
            public double ImageWidth
            {
                get { return (double)GetValue(ImageWidthProperty); }
                set { SetValue(ImageWidthProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageWidth.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageWidthProperty =
                DependencyProperty.Register("ImageWidth", typeof(double), typeof(ControlClickableImage),
                new UIPropertyMetadata(16d));
     
            public double ImageHeight
            {
                get { return (double)GetValue(ImageHeightProperty); }
                set { SetValue(ImageHeightProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageHeight.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageHeightProperty =
                DependencyProperty.Register("ImageHeight", typeof(double), typeof(ControlClickableImage), 
                new UIPropertyMetadata(16d));
     
            public string Text1
            {
                get { return (string)GetValue(Text1Property); }
                set { SetValue(Text1Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text1Property =
                DependencyProperty.Register("Text1", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
            public string Text2
            {
                get { return (string)GetValue(Text2Property); }
                set { SetValue(Text2Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text2Property =
                DependencyProperty.Register("Text2", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
     
     
     
            public bool IsChecked
            {
                get { return (bool)GetValue(IsCheckedProperty); }
                set { SetValue(IsCheckedProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for IsChecked.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty IsCheckedProperty =
                DependencyProperty.Register("IsChecked", typeof(bool), typeof(ControlClickableImage), 
                new UIPropertyMetadata(false));
     
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                this.IsChecked = !IsChecked;
               // swap images
                ImageSource temp = this.Image;
                this.Image = this.ImageBack;
                this.ImageBack = temp;
     
                //les 2 events sont declenches ici
                if (this.IsChecked)
                    OnCheckedChanged(this, e);
                else if (!this.IsChecked )
                    OnUnCheckChanged(this, e);
     
            }
     
     
     
            // event perso Checked
            public static readonly RoutedEvent CheckedEvent = EventManager.RegisterRoutedEvent(
                "Checked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));
     
            // Provide CLR accessors for the event
            public event RoutedEventHandler Checked
            {
                add { AddHandler(CheckedEvent, value); }
                remove { RemoveHandler(CheckedEvent, value); }
            }
            // event perso UnChecked
            public static readonly RoutedEvent UnCheckedEvent = EventManager.RegisterRoutedEvent(
                "UnChecked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));
     
            // Provide CLR accessors for the event
            public event RoutedEventHandler UnChecked
            {
                add { AddHandler(UnCheckedEvent, value); }
                remove { RemoveHandler(UnCheckedEvent, value); }
            }
            // methods charge de raiser les 2 events
            private void OnCheckedChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
            {
                RoutedEventArgs newEventArgs = new RoutedEventArgs( ControlClickableImage.CheckedEvent);
                newEventArgs.Source = controlClickableImage;
                RaiseEvent(newEventArgs);
     
            }
            private void OnUnCheckChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
            {
                RoutedEventArgs newEventArgs = new RoutedEventArgs(ControlClickableImage.UnCheckedEvent);
                newEventArgs.Source = controlClickableImage;
                RaiseEvent(newEventArgs);
     
            }
        }
     
     
    }
    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
     
    <Window x:Class="WpfClickableImage.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:my="clr-namespace:WpfClickableImage"
            Title="Window1" Height="300" Width="300">
        <StackPanel>
            <my:ControlClickableImage 
                x:Name="yourcontrol"
                Image="calendar.png" 
                ImageBack="worldwallpaper.jpg" 
                Text1="ControlImageClickable" 
                Text2="Description" 
                HorizontalAlignment="Left" VerticalAlignment="Top"
                ImageWidth="20" ImageHeight="20" Margin="10" 
                Checked="ControlClickableImage_Checked"
                UnChecked="ControlClickableImage_UnChecked">
     
            </my:ControlClickableImage>
            <!--un ordinaire checkbox bindé à notre usercontrol-->
            <CheckBox IsChecked="{Binding ElementName=yourcontrol,Path=IsChecked}"/>
        </StackPanel>
    </Window>
    et son code behind .cs:
    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
     
    namespace WpfClickableImage
    {
        /// <summary>
        /// Logique d'interaction pour Window1.xaml
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
            }
     
            private void ControlClickableImage_Checked(object sender, RoutedEventArgs e)
            {
                ControlClickableImage ctl = e.Source as ControlClickableImage;
                MessageBox.Show(ctl.IsChecked.ToString() + " ; " + ctl.Text1 + " ; " + ctl.Text2);
     
            }
     
            private void ControlClickableImage_UnChecked(object sender, RoutedEventArgs e)
            {
                ControlClickableImage ctl = e.Source as ControlClickableImage;
                MessageBox.Show(ctl.IsChecked.ToString() + " ; " + ctl.Text1 + " ; " + ctl.Text2);
     
            }
     
     
        }
    }
    bon code...

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Hello

    Merci pour ta réponse.

    Le résultat visuel n'est pas encore tout à fait ce que je veux, mais ça fonctionne je pense qu'en cherchant je vais arriver à ce que je veux.

    Cependant, j'ai un dernier soucis :

    sur ma checkbox standard j'envoyais également ceci IsChecked="{Binding bChecked}"

    Ce qui me permettait de checker automatiquement à l'ouverture un bouton si il était dans une liste.

    ça ne fonctionne pas avec le usercontrol.

    Que me manque-t-il ?

    Merci.

    EDIT : Au niveau du résultat visuel, c'est ok, j'ai pu avoir ce que je souhaitais. Il reste plus qu'à ce que je comprenne comment checker mon bouton par défaut ou non selon ma valeur bChecked

    Cette variable bChecked est également utilisée pour mon bouton "Sélectionner tous" ou "Sélectionner aucun" :

    private void btnTous_Click(object sender, RoutedEventArgs e)
    {
    foreach (var item in LstIlots)
    {
    item.bChecked = true;
    }
    }

    Merci.

    Par avance, merci.

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Personne n'a d'idée pour ma propriété IsChecked ?

    Même si je le mets à True, ::

    <StackPanel Orientation="Vertical">
    <my:UserControl1
    x:Name="yourcontrol"
    Tag="{Binding strCodeIlot}"
    IsChecked="True"
    Image="Images/btnNormal.png"
    ImageBack="Images/btnChecked.png"
    Text1="{Binding strCodeIlot}"
    Text2="{Binding strDesIlot}"
    HorizontalAlignment="Left" VerticalAlignment="Top"
    ImageWidth="20" ImageHeight="20" Margin="10" Visibility="Visible" Checked="ControlClickableImage_Checked" UnChecked="ControlClickableImage_UnChecked" />
    </StackPanel>

    Les boutons ne se cochent pas...

    Malheureusement.

    Mais sinon, c'est exactement ce dont j'ai besoin !!

  9. #9
    Expert confirmé
    Inscrit en
    Avril 2008
    Messages
    2 564
    Détails du profil
    Informations personnelles :
    Âge : 64

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 564
    Points : 4 441
    Points
    4 441
    Par défaut
    rebonjour

    Personne n'a d'idée pour ma propriété IsChecked ?

    Même si je le mets à True, ::
    Ce comportement peut être obtenu avec des triggers mais un UserControl ne permets pas hélas d'inclure dans ses Triggers les nouvelles DP rajoutées telles que:IsChecked,ImageWidth,ImageHeight,Image et ImageBack...

    Pour cela le control Button initial du UserControl est substitué par un ToggleButton qui dispose d'une DP IsChecked...
    Ce ToggleButton permute les 2 images dans ses Triggers ...

    De plus le UserControl est "redoté" d'une DP IsChecked par un mécanisme d'emprunt des DP (ToggleButton.IsCheckedProperty.AddOwner) de type bool? identique à celui du ToggleButton
    Ce qui permet de binder La DP IsChecked du UserControl à celle du ToggleButton...

    Au final le Click du ToggleButton ne sert qu'à déclencher les évents !!!

    Egalement l'utilisation d'un UserControl "nommé" est supprimé grade à la syntaxe XAML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor
    code XAML du UserControl revu:
    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
     
    <UserControl x:Class="WpfClickableImage.ControlClickableImage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300"
                 >
        <!--le Name="UC" est inutile --> 
        <StackPanel>
            <ToggleButton 
     
                Click="ToggleButton_Click"
                Margin="10"
                HorizontalAlignment="Center"
                ToolTip="Click on Fred"
                IsChecked="{Binding Path=IsChecked,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}">
                <ToggleButton.Template>
                    <ControlTemplate>
                        <Border x:Name="theBorder"
                            BorderBrush="Transparent"
                            BorderThickness="2">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image 
                                    Grid.Column="0" 
                                    x:Name="img"
                                    Source="{Binding ElementName=UC, Path=Image}"
                                    Width="{Binding Path=ImageWidth,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                    Height="{Binding Path=ImageHeight,RelativeSource={RelativeSource AncestorType=UserControl,Mode=FindAncestor}}"
                                   >
                                </Image>
                                <StackPanel
                                    Grid.Column="1"
                                    Orientation="Vertical" Margin="5">
                                    <TextBlock 
                                        Text="{Binding Path=Text1,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                        Margin="10,0,0,0"/>
                                    <TextBlock 
                                        Text="{Binding Path=Text2,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                        Margin="10,0,0,0"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter 
                                    Property="BorderBrush" TargetName="theBorder"
                                    Value="LightSkyBlue"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="false">
                                <Setter
                                    TargetName="img" Property="Source" 
                                    Value="{Binding Path=Image,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter
                                    TargetName="img" Property="Source" 
                                    Value="{Binding Path=ImageBack,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ToggleButton.Template>
            </ToggleButton>
        </StackPanel>
     
    </UserControl>
    et son code behind.cs
    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
     
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Controls.Primitives;
     
    namespace WpfClickableImage
    {
        /// <summary>
        /// Logique d'interaction pour ControlClickableImage.xaml
        /// </summary>
        public partial class ControlClickableImage : UserControl
        {
     
     
     
            public ControlClickableImage()
            {
                InitializeComponent();
            }
            public ImageSource Image
            {
                get { return (ImageSource)GetValue(ImageProperty); }
                set { SetValue(ImageProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for Image.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageProperty =
                DependencyProperty.Register("Image", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
            public ImageSource ImageBack
            {
                get { return (ImageSource)GetValue(ImageBackProperty); }
                set { SetValue(ImageBackProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageBack.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageBackProperty =
                DependencyProperty.Register("ImageBack", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
     
            public double ImageWidth
            {
                get { return (double)GetValue(ImageWidthProperty); }
                set { SetValue(ImageWidthProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageWidth.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageWidthProperty =
                DependencyProperty.Register("ImageWidth", typeof(double), typeof(ControlClickableImage),
                new UIPropertyMetadata(16d));
     
            public double ImageHeight
            {
                get { return (double)GetValue(ImageHeightProperty); }
                set { SetValue(ImageHeightProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageHeight.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageHeightProperty =
                DependencyProperty.Register("ImageHeight", typeof(double), typeof(ControlClickableImage), 
                new UIPropertyMetadata(16d));
     
            public string Text1
            {
                get { return (string)GetValue(Text1Property); }
                set { SetValue(Text1Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text1Property =
                DependencyProperty.Register("Text1", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
            public string Text2
            {
                get { return (string)GetValue(Text2Property); }
                set { SetValue(Text2Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text2Property =
                DependencyProperty.Register("Text2", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
     
     
     
            public bool? IsChecked
            {
                get { return (bool?)GetValue(IsCheckedProperty); }
                set { SetValue(IsCheckedProperty, value); }
            }
     
             //Using a DependencyProperty as the backing store for IsChecked.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty IsCheckedProperty =
             ToggleButton.IsCheckedProperty.AddOwner(typeof (ControlClickableImage));
     
     
     
     
            private void ToggleButton_Click(object sender, RoutedEventArgs e)
            {
                //les 2 events sont declenches ici
                if ( (bool)this.IsChecked)
                    OnCheckedChanged(this, e);
                else if (!(bool)this.IsChecked)
                    OnUnCheckChanged(this, e);
            }
     
            // event perso Checked
            public static readonly RoutedEvent CheckedEvent = EventManager.RegisterRoutedEvent(
                "Checked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));
     
            // Provide CLR accessors for the event
            public event RoutedEventHandler Checked
            {
                add { AddHandler(CheckedEvent, value); }
                remove { RemoveHandler(CheckedEvent, value); }
            }
            // event perso UnChecked
            public static readonly RoutedEvent UnCheckedEvent = EventManager.RegisterRoutedEvent(
                "UnChecked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));
     
            // Provide CLR accessors for the event
            public event RoutedEventHandler UnChecked
            {
                add { AddHandler(UnCheckedEvent, value); }
                remove { RemoveHandler(UnCheckedEvent, value); }
            }
            // methods charge de raiser les 2 events
            private void OnCheckedChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
            {
                RoutedEventArgs newEventArgs = new RoutedEventArgs( ControlClickableImage.CheckedEvent);
                newEventArgs.Source = controlClickableImage;
                RaiseEvent(newEventArgs);
     
            }
            private void OnUnCheckChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
            {
                RoutedEventArgs newEventArgs = new RoutedEventArgs(ControlClickableImage.UnCheckedEvent);
                newEventArgs.Source = controlClickableImage;
                RaiseEvent(newEventArgs);
     
            }
     
     
        }
     
     
    }
    le code XAML du form Window1 et son code behind.cs déjà communiqué reste inchangé

    Tu peux tester la nouvelle DP IsChecked du UserControl sur le Designer VS...
    bon code....

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Salut

    Merci pour ta réponse

    C'est super ! ça fonctionne

    Cependant, je ne voulais pas modifier juste l'image à gauche, mais tout le fond du bouton, le background du stackpanel

    Avec l'autre solution ça fonctionnait, avec celle ci j'y arrive pas :

    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
     <StackPanel>
            <StackPanel.Background>
                <ImageBrush ImageSource="{Binding Path=Image,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}" Stretch="UniformToFill" />
            </StackPanel.Background>
            <ToggleButton 
                Click="ToggleButton_Click"
                Margin="10"
                HorizontalAlignment="Center"
                IsChecked="{Binding Path=IsChecked,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}">
                <ToggleButton.Template>
                    <ControlTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image 
                                    Grid.Column="0" 
                                    x:Name="img"
                                    Source="{Binding ElementName=UC, Path=Image}"
                                    Width="{Binding Path=ImageWidth,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                    Height="{Binding Path=ImageHeight,RelativeSource={RelativeSource AncestorType=UserControl,Mode=FindAncestor}}"
                                   >
                                </Image>
                            <StackPanel Background="{Binding Path=Image,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                    Grid.Column="1"
                                    Orientation="Vertical" Margin="5">
                                    <TextBlock 
                                        Text="{Binding Path=Text1,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                        Margin="10,0,0,0"/>
                                    <TextBlock 
                                        Text="{Binding Path=Text2,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                        Margin="10,0,0,0"/>
                                </StackPanel>
                            </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="false">
                                <Setter
                                    TargetName="img" Property="Source" 
                                    Value="{Binding Path=Image,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter
                                    TargetName="img" Property="Source" 
                                    Value="{Binding Path=ImageBack,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ToggleButton.Template>
            </ToggleButton>
        </StackPanel>
    Avec ton autre solution :

    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
    <UserControl x:Class="BoutonsSelection.UserControl1"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 Name="UC"
                 d:DesignHeight="75" d:DesignWidth="225">
        <StackPanel >
            <StackPanel.Background>
                <ImageBrush ImageSource="{Binding ElementName=UC, Path=Image}" Stretch="UniformToFill" />
            </StackPanel.Background>
            <Button 
                Click="Button_Click"
                Margin="0"
                HorizontalAlignment="Center">
                <Button.Template>
                    <ControlTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <StackPanel
                                    Grid.Column="1"
                                    Orientation="Vertical" Margin="5">
                                    <TextBlock HorizontalAlignment="Center" FontWeight="Bold" FontSize="14"
                                        Text="{Binding ElementName=UC, Path=Text1}"
                                        Margin="10,0,0,0"/>
                                    <TextBlock HorizontalAlignment="Center" FontStyle="Italic" FontSize="12"
                                        Text="{Binding ElementName=UC, Path=Text2}"
                                        Margin="10,0,0,0"/>
                                </StackPanel>
                            </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush"
                                    Value="LightSkyBlue"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </StackPanel>
    </UserControl>
    Voici le résultat escompté (réussi avec ton ancien code)

    Nom : Example.png
Affichages : 121
Taille : 12,8 Ko

    Résultat avec le nouveau code qui fonctionne pour le IsChecked :

    Nom : Result.png
Affichages : 120
Taille : 8,9 Ko

    Salutations

  11. #11
    Expert confirmé
    Inscrit en
    Avril 2008
    Messages
    2 564
    Détails du profil
    Informations personnelles :
    Âge : 64

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 564
    Points : 4 441
    Points
    4 441
    Par défaut
    bonjour
    Pas très clair pour moi, j'ai rien compris avec des images...
    Si c'est le background du Stackpanel c'est bon pour les 2 versions...
    Si tu parles des nombreux TextBlock il faut dire d'où ils viennent...et pour cela avoir les codes des 2 versions (XAML et .cs à la fois) pour comprendre ce qui ne vas !!!

  12. #12
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Bonjour

    La première image représente ce que je souhaite avoir comme résultat : j'ai réussi à l'avoir avec ta première version.

    La seconde image représente ce que j'ai comme résultat avec ta seconde version (ToggleButton)

    Je n'arrive pas à faire en sorte, qu'il me prenne l'imageBack pour le fond du StackPanel le bouton est checké (bChecked)

    Et qu'il me mette l'image normale pour le fond si le bouton n'est pas checké.

    Avec ton exemple, c'est juste le petit carré à gauche de l'image 2 qui change de couleur (image/imageback) mais pas le fond du stack panel, je n'arrive pas à le faire changer

  13. #13
    Expert confirmé
    Inscrit en
    Avril 2008
    Messages
    2 564
    Détails du profil
    Informations personnelles :
    Âge : 64

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 564
    Points : 4 441
    Points
    4 441
    Par défaut
    rebonjour
    Je n'arrive pas à faire en sorte, qu'il me prenne l'imageBack pour le fond du StackPanel le bouton est checké (bChecked)

    Et qu'il me mette l'image normale pour le fond si le bouton n'est pas checké.
    il faut utiliser la DP Background du Grid du Template du ToggleButton car ce Grid cache totalement le fond du StackPanel à merveille...!!!

    code XAML du UserControl version "toggle" revu :
    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
     
    <UserControl x:Class="WpfClickableImage.ControlClickableImage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300"
                >
        <!--le Name="UC" est inutile --> 
        <StackPanel x:Name="myPanel" >
            <ToggleButton 
                x:Name="toggle"
                Click="ToggleButton_Click"
                Margin="10"
                HorizontalAlignment="Center"
                ToolTip="Click on Fred"
                IsChecked="{Binding Path=IsChecked,RelativeSource={RelativeSource   AncestorType=UserControl,Mode=FindAncestor}}">
                <ToggleButton.Template>
                    <ControlTemplate>
                        <Border x:Name="theBorder"
                            BorderBrush="Magenta"
                            BorderThickness="2"
                            CornerRadius="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.Background>
                                    <ImageBrush ImageSource="{Binding ElementName=img,Path=Source}"/>
                                </Grid.Background>
                                <Image 
                                    Grid.Column="0" 
                                    x:Name="img"
                                    Margin="15"
                                    Source="{Binding Path=Image,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                    Width="{Binding Path=ImageWidth,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                    Height="{Binding Path=ImageHeight,RelativeSource={RelativeSource AncestorType=UserControl,Mode=FindAncestor}}"
                                   >
                                </Image>
                                <StackPanel
                                    Grid.Column="1"
                                    Orientation="Vertical" Margin="15">
                                    <TextBlock 
                                        Text="{Binding Path=Text1,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                        Margin="10,0,0,0"/>
                                    <TextBlock 
                                        Text="{Binding Path=Text2,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"
                                        Margin="10,0,0,0"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter 
                                    Property="BorderBrush" TargetName="theBorder"
                                    Value="LightSkyBlue"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="false">
                                <Setter
                                    TargetName="img" Property="Source" 
                                    Value="{Binding Path=Image,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter
                                    TargetName="img" Property="Source" 
                                    Value="{Binding Path=ImageBack,RelativeSource={RelativeSource  AncestorType=UserControl,Mode=FindAncestor}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ToggleButton.Template>
            </ToggleButton>
        </StackPanel>
     
    </UserControl>
    son code .cs:
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Controls.Primitives;

    namespace WpfClickableImage
    {
    /// <summary>
    /// Logique d'interaction pour ControlClickableImage.xaml
    /// </summary>
    public partial class ControlClickableImage : UserControl
    {


    public ControlClickableImage()
    {
    InitializeComponent();
    }


    public ImageSource Image
    {
    get { return (ImageSource)GetValue(ImageProperty); }
    set { SetValue(ImageProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Image. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageProperty =
    DependencyProperty.Register("Image", typeof(ImageSource), typeof(ControlClickableImage),
    new UIPropertyMetadata(null));



    public ImageSource ImageBack
    {
    get { return (ImageSource)GetValue(ImageBackProperty); }
    set { SetValue(ImageBackProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ImageBack. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageBackProperty =
    DependencyProperty.Register("ImageBack", typeof(ImageSource), typeof(ControlClickableImage),
    new UIPropertyMetadata(null));




    public double ImageWidth
    {
    get { return (double)GetValue(ImageWidthProperty); }
    set { SetValue(ImageWidthProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ImageWidth. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageWidthProperty =
    DependencyProperty.Register("ImageWidth", typeof(double), typeof(ControlClickableImage),
    new UIPropertyMetadata(16d));

    public double ImageHeight
    {
    get { return (double)GetValue(ImageHeightProperty); }
    set { SetValue(ImageHeightProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ImageHeight. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageHeightProperty =
    DependencyProperty.Register("ImageHeight", typeof(double), typeof(ControlClickableImage),
    new UIPropertyMetadata(16d));

    public string Text1
    {
    get { return (string)GetValue(Text1Property); }
    set { SetValue(Text1Property, value); }
    }

    // Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty Text1Property =
    DependencyProperty.Register("Text1", typeof(string), typeof(ControlClickableImage),
    new UIPropertyMetadata(""));

    public string Text2
    {
    get { return (string)GetValue(Text2Property); }
    set { SetValue(Text2Property, value); }
    }

    // Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty Text2Property =
    DependencyProperty.Register("Text2", typeof(string), typeof(ControlClickableImage),
    new UIPropertyMetadata(""));




    public bool? IsChecked
    {
    get { return (bool?)GetValue(IsCheckedProperty); }
    set { SetValue(IsCheckedProperty, value); }
    }

    //Using a DependencyProperty as the backing store for IsChecked. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsCheckedProperty =
    ToggleButton.IsCheckedProperty.AddOwner(typeof (ControlClickableImage));



    private void ToggleButton_Click(object sender, RoutedEventArgs e)
    {
    //les 2 events sont declenches ici
    if ((bool)this.IsChecked)
    {
    OnCheckedChanged(this, e);

    }

    else if (!(bool)this.IsChecked)
    {
    OnUnCheckChanged(this, e);

    }

    }

    // event perso Checked
    public static readonly RoutedEvent CheckedEvent = EventManager.RegisterRoutedEvent(
    "Checked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));

    // Provide CLR accessors for the event
    public event RoutedEventHandler Checked
    {
    add { AddHandler(CheckedEvent, value); }
    remove { RemoveHandler(CheckedEvent, value); }
    }
    // event perso UnChecked
    public static readonly RoutedEvent UnCheckedEvent = EventManager.RegisterRoutedEvent(
    "UnChecked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));



    // Provide CLR accessors for the event
    public event RoutedEventHandler UnChecked
    {
    add { AddHandler(UnCheckedEvent, value); }
    remove { RemoveHandler(UnCheckedEvent, value); }
    }
    // methods charge de raiser les 2 events
    private void OnCheckedChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
    {
    RoutedEventArgs newEventArgs = new RoutedEventArgs( ControlClickableImage.CheckedEvent);
    newEventArgs.Source = controlClickableImage;
    RaiseEvent(newEventArgs);

    }
    private void OnUnCheckChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
    {
    RoutedEventArgs newEventArgs = new RoutedEventArgs(ControlClickableImage.UnCheckedEvent);
    newEventArgs.Source = controlClickableImage;
    RaiseEvent(newEventArgs);

    }


    }


    }

    code XAML du form :
    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
     
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Controls.Primitives;
     
    namespace WpfClickableImage
    {
        /// <summary>
        /// Logique d'interaction pour ControlClickableImage.xaml
        /// </summary>
        public partial class ControlClickableImage : UserControl
        {
     
     
            public ControlClickableImage()
            {
                InitializeComponent();
            }
     
     
            public ImageSource Image
            {
                get { return (ImageSource)GetValue(ImageProperty); }
                set { SetValue(ImageProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for Image.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageProperty =
                DependencyProperty.Register("Image", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
            public ImageSource ImageBack
            {
                get { return (ImageSource)GetValue(ImageBackProperty); }
                set { SetValue(ImageBackProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageBack.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageBackProperty =
                DependencyProperty.Register("ImageBack", typeof(ImageSource), typeof(ControlClickableImage),
                new UIPropertyMetadata(null));
     
     
     
     
            public double ImageWidth
            {
                get { return (double)GetValue(ImageWidthProperty); }
                set { SetValue(ImageWidthProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageWidth.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageWidthProperty =
                DependencyProperty.Register("ImageWidth", typeof(double), typeof(ControlClickableImage),
                new UIPropertyMetadata(16d));
     
            public double ImageHeight
            {
                get { return (double)GetValue(ImageHeightProperty); }
                set { SetValue(ImageHeightProperty, value); }
            }
     
            // Using a DependencyProperty as the backing store for ImageHeight.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ImageHeightProperty =
                DependencyProperty.Register("ImageHeight", typeof(double), typeof(ControlClickableImage), 
                new UIPropertyMetadata(16d));
     
            public string Text1
            {
                get { return (string)GetValue(Text1Property); }
                set { SetValue(Text1Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text1Property =
                DependencyProperty.Register("Text1", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
            public string Text2
            {
                get { return (string)GetValue(Text2Property); }
                set { SetValue(Text2Property, value); }
            }
     
            // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty Text2Property =
                DependencyProperty.Register("Text2", typeof(string), typeof(ControlClickableImage),
                new UIPropertyMetadata(""));
     
     
     
     
            public bool? IsChecked
            {
                get { return (bool?)GetValue(IsCheckedProperty); }
                set { SetValue(IsCheckedProperty, value); }
            }
     
             //Using a DependencyProperty as the backing store for IsChecked.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty IsCheckedProperty =
             ToggleButton.IsCheckedProperty.AddOwner(typeof (ControlClickableImage));
     
     
     
            private void ToggleButton_Click(object sender, RoutedEventArgs e)
            {
                //les 2 events sont declenches ici
                if ((bool)this.IsChecked)
                {
                    OnCheckedChanged(this, e);
     
                }
     
                else if (!(bool)this.IsChecked)
                {
                    OnUnCheckChanged(this, e);
     
                } 
     
            }
     
            // event perso Checked
            public static readonly RoutedEvent CheckedEvent = EventManager.RegisterRoutedEvent(
                "Checked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));
     
            // Provide CLR accessors for the event
            public event RoutedEventHandler Checked
            {
                add { AddHandler(CheckedEvent, value); }
                remove { RemoveHandler(CheckedEvent, value); }
            }
            // event perso UnChecked
            public static readonly RoutedEvent UnCheckedEvent = EventManager.RegisterRoutedEvent(
                "UnChecked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ControlClickableImage));
     
     
     
            // Provide CLR accessors for the event
            public event RoutedEventHandler UnChecked
            {
                add { AddHandler(UnCheckedEvent, value); }
                remove { RemoveHandler(UnCheckedEvent, value); }
            }
            // methods charge de raiser les 2 events
            private void OnCheckedChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
            {
                RoutedEventArgs newEventArgs = new RoutedEventArgs( ControlClickableImage.CheckedEvent);
                newEventArgs.Source = controlClickableImage;
                RaiseEvent(newEventArgs);
     
            }
            private void OnUnCheckChanged(ControlClickableImage controlClickableImage, RoutedEventArgs e)
            {
                RoutedEventArgs newEventArgs = new RoutedEventArgs(ControlClickableImage.UnCheckedEvent);
                newEventArgs.Source = controlClickableImage;
                RaiseEvent(newEventArgs);
     
            }
     
     
        }
     
     
    }
    son code .cs
    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
     
    namespace WpfClickableImage
    {
        /// <summary>
        /// Logique d'interaction pour Window1.xaml
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
            }
     
            private void ControlClickableImage_Checked(object sender, RoutedEventArgs e)
            {
                ControlClickableImage ctl = e.Source as ControlClickableImage;
                MessageBox.Show(ctl.IsChecked.ToString() + " ; " + ctl.Text1 + " ; " + ctl.Text2);
     
            }
     
            private void ControlClickableImage_UnChecked(object sender, RoutedEventArgs e)
            {
                ControlClickableImage ctl = e.Source as ControlClickableImage;
                MessageBox.Show(ctl.IsChecked.ToString() + " ; " + ctl.Text1 + " ; " + ctl.Text2);
     
            }
     
     
        }
    }
    bon code....

  14. #14
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Salut

    Encore une fois merci beaucoup pour tes réponses et ton aide.

    Bcheked fonctionnera cette foi si avec cette version ?


    Tu as mis le code behind du form et non le xaml. Cependant je vais prendre le temps d'essayer et j'espère arriver à l'intégrer !

    Merci

  15. #15
    Nouveau membre du Club
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2017
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2017
    Messages : 71
    Points : 25
    Points
    25
    Par défaut
    Je valide la solution ! ça fonctionne ! merci beaucoup. et je passe le topic en résolu !

Discussions similaires

  1. créer un bouton avec photoshop comme l'image donnée
    Par hraiwen dans le forum Imagerie
    Réponses: 1
    Dernier message: 04/10/2009, 19h15
  2. [Design] Bouton avec effet lumineux
    Par Elendhil dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 03/09/2009, 22h59
  3. [Webdesign] Design avec Photoshop
    Par jadorelescss38 dans le forum Webdesign & Ergonomie
    Réponses: 5
    Dernier message: 17/07/2007, 13h35
  4. Construire chemin sur bouton avec évt Javascript
    Par Ph. B. dans le forum XMLRAD
    Réponses: 4
    Dernier message: 27/05/2003, 10h26
  5. Désigner une variable avec une variable?
    Par littleman dans le forum Paradox
    Réponses: 4
    Dernier message: 12/08/2002, 11h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo