web-dev-qa-db-fra.com

Comment supprimer l'effet de survol par défaut sur les boutons WPF?

Mon problème est que dans WPF, chaque fois que j'essaie de changer la couleur de l'arrière-plan d'un bouton à l'aide de déclencheurs ou d'animations, l'effet de survol par défaut (d'être gris avec cette lueur orange) semble être prioritaire.

Après des recherches approfondies, je ne sais pas comment éliminer cet effet.

76
Nellius

Vous devez créer votre propre modèle de bouton personnalisé pour avoir un contrôle total sur l'apparence dans tous les états. Voici un tutoriel .

15
Mark Heath

Ceci est similaire à la solution décrite par Mark Heath mais avec moins de code pour créer un bouton très basique, sans l'effet d'animation de la souris sur la souris. Il conserve un simple effet de survol de la souris, qui consiste à afficher la bordure du bouton en noir. Le style peut être inséré dans la section Window.Resources ou UserControl.Resources par exemple (comme indiqué).

    <UserControl.Resources>
        <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
        <Style x:Key="MyButtonStyle" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                            BorderThickness="1"
                            Padding="4,2" 
                            BorderBrush="DarkGray" 
                            CornerRadius="3" 
                            Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

<!-- usage in xaml -->
<Button Style="{StaticResource MyButtonStyle}">Hello!</Button>
100
dodgy_coder

Juste pour ajouter une solution très simple, cela me suffisait, et je pense que répond au problème du PO. J'ai utilisé la solution dans cette réponse sauf avec une valeur normale de Background à la place d'une image.

<Style x:Key="SomeButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Il n'est pas nécessaire de modifier le modèle au-delà de forcer le Background à toujours être l'arrière-plan Transparent à partir du bouton créé avec un modèle - le passage de la souris n'affecte plus l'arrière-plan une fois que cela est fait. Évidemment, remplacez Transparent par une valeur préférée.

21
Lyall

Le muffin man avait une réponse très simple qui a fonctionné pour moi.

Pour ajouter une direction un peu plus spécifique, du moins pour VS 2013:

  • Clic droit sur le contrôle
  • Sélectionnez Modifier le modèle => Modifier une copie ...
  • J'ai sélectionné 'Application' pour enregistrer le style
    • À partir de là, vous pouvez directement éditer App.xaml et voir les propriétés nommées de manière intuitive. Pour mes besoins, je viens de définir RenderMouseOver = "False"
  • Ensuite, dans MainWindow.xaml ou où que se trouve votre interface graphique, vous pouvez coller le nouveau style à la fin de la balise Button, par exemple. ... Style="{DynamicResource MouseOverNonDefault}"/>
7
Benji-Man

Si quelqu'un ne veut pas remplacer le modèle de contrôle par défaut, voici la solution.

Vous pouvez créer un bouton DataTemplate pour qui peut avoir TextBlock, puis écrire le déclencheur Property sur la propriété IsMouseOver pour désactiver l'effet de survol de la souris. La hauteur de TextBlock et Button doit être identique.

    <Button Background="Black" Margin="0" Padding="0" BorderThickness="0" Cursor="Hand" Height="20">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="GO" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextDecorations="Underline" Margin="0" Padding="0" Height="20">
                                <TextBlock.Style>
                                    <Style TargetType="TextBlock">
                                        <Style.Triggers>
                                            <Trigger Property ="IsMouseOver" Value="True">
                                                <Setter Property= "Background" Value="Black"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>
3
Prateek Rai

Une extension sur la réponse de dodgy_coder qui ajoute le support pour ..

  • Maintien du style de bouton WPF
  • Ajoute le support pour IsSelected et le survol, c’est-à-dire un bouton basculé

        <Style x:Key="Button.Hoverless" TargetType="{x:Type ButtonBase}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border Name="border"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="Selector.IsSelected" Value="False" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="#FFBEE6FD" />
                            </MultiTrigger>
    
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="Selector.IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="#BB90EE90" />
                            </MultiTrigger>
    
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="False" />
                                    <Condition Property="Selector.IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="LightGreen" />
                            </MultiTrigger>
    
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="Opacity" Value="0.95" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

exemples..

<Button Content="Wipe On" Selector.IsSelected="True" /> <Button Content="Wipe Off" Selector.IsSelected="False" />

1
stoj

Utiliser un modèle de déclencheur:

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="White"></Setter>
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="White"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
0
Laine Mikael