Discussion :

[yantoo]

Bonjour,

est-il possible de rendre cliquable la partie transparente d'une image dans un bouton?

J'ai fait un changement d'image au survol de la souris mais l'image disparait quand le pointeur de la souris est dans la partie transparente.

Merci pour votre aide

[popo]

Bonjour,

Est-ce que tu réalises combien il existe de manières de faire apparaitre ou changer une image sur un bouton ?
Et au survol de la souris sur quoi ? Sur le bouton ? Sur l'image ? Laquelle ?

Tout ça manque de précisions.

[micka132]

J'avoue que la question est assez imprécise, mais une règle concernant le clic si l'on est sur du wpf va concerner le fait que la hitzone doit etre active.
Pour cela mettre un background="Transparent" est souvent la solution.

[yantoo]

Bonjour,

Merci pour vos réponses, il est vrai que ma question est assez imprécise.

En gros j'applique un style sur mon bouton avec un dictionnaire de ressources pour avoir un fond de couleur unie. Puis dans le XAML ou est placé le bouton, j'appelle ce style et j'applique un changement d'image sur l'image

dans le dictionnaire de ressources :

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
<Style x:Key="ButtonNav" TargetType="{x:Type Button}">
    <Setter Property="Height" Value="40"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.BackgroundNav}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.BorderNav}"/>
    <Setter Property="Foreground" Value="{StaticResource Button.Static.ForegroundNav}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="10"
                    Padding="10,0,10,0"
                    SnapsToDevicePixels="True">
                    <ContentPresenter x:Name="ContentPresenter"
                                  Focusable="False"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  Margin="{TemplateBinding Padding}"
                                  RecognizesAccessKey="True"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    </ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.BackgroundNav}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.BorderNav}"/>
                        <Setter Property="TextElement.Foreground" Value="{StaticResource Button.MouseOver.ForegroundNav}"/>                           
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.BackgroundNav}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.BorderNav}"/>
                        <Setter Property="TextElement.Foreground" Value="{StaticResource Button.Pressed.ForegroundNav}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

dans le XAML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Button Click="Settings_Click" Style="{StaticResource ButtonNav}">
    <Button.Content>
        <Image>
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Width" Value="24"/>
                    <Setter Property="Height" Value="24"/>
                    <Setter Property="Source" Value="/Assets/Pictos/settings.png"/>                                
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Source" Value="/Assets/Pictos/settings_hover.png"/>                                        
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Button.Content>
</Button>

[micka132]

Mets l'image dans un border avec un background transparent.
Il faut également déplacer le trigger sur le mouse Hover du style du border, et ciblant la propriété source de l'image via la propriété elementName.

[yantoo]

Merci pour ton retour, j'ai du mal à comprendre ce que tu suggères au niveau du déplacement du trigger

[micka132]

Merci pour ton retour, j'ai du mal à comprendre ce que tu suggères au niveau du déplacement du trigger

Un truc dans le genre: (désolé pas de VS sous la main).

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
 
<Button Click="Settings_Click" Style="{StaticResource ButtonNav}">
    <Button.Content>
<Border Background="Transparent">
   <Border.Style>
          <Style TargetType="{x:Type Border}">
          <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Source" Value="/Assets/Pictos/settings_hover.png" TargetName="image" />                                        
                        </Trigger>
                    </Style.Triggers>
        <Image x:Name="image" Source="/Assets/Pictos/settings.png" Width="24" Height="24">            
        </Image>
</Border>
 
    </Button.Content>
</Button>

[yantoo]

Merci pour ton aide mais ça ne marche pas