Wie entferne ich den Standard-Mouseover-Effekt auf WPF-Schaltflächen?

83

Mein Problem ist, dass in WPF, wenn ich versuche, die Farbe des Hintergrunds einer Schaltfläche mithilfe von Triggern oder Animationen zu ändern, der Standard-Mouseover-Effekt (grau mit diesem orangefarbenen Schimmer) Priorität zu haben scheint.

Nach umfangreichen Suchen habe ich keine Ahnung, wie ich diesen Effekt entfernen kann.

wpf  button  mouseover 
— Nellius
quelle

Antworten:

17

Sie müssen Ihre eigene benutzerdefinierte Schaltflächenvorlage erstellen, um die vollständige Kontrolle über das Erscheinungsbild in allen Status zu haben. Hier ist ein Tutorial .

— Mark Heath
quelle
2
Danke, das war perfekt. Es war komplizierter als ich dachte, aber jetzt funktioniert alles gut.
— Nellius
16
Aus irgendeinem Grund gibt es 100 Antworten zum Erstellen benutzerdefinierter Vorlagen für WPF-Steuerelemente, und alle sind unnötig falsch. Es gibt keinen Grund, Schwierigkeiten zu haben, 50 Zeilen Vorlagencode für eine Schaltfläche zu schreiben, um eine Sache zu ändern. Alles, was Sie tun müssen, ist, im xaml-Designer mit der rechten Maustaste auf das Steuerelement zu klicken und eine Kopie des Vorlagencodes zu erstellen. VS erstellt aus genau dieser Schaltfläche einen Stil, den Sie von dort aus anpassen können. Dauert buchstäblich 2 Sekunden.
— Der Muffin-Mann
106

Dies ähnelt der von Mark Heath genannten Lösung, enthält jedoch nicht so viel Code, um nur eine sehr einfache Schaltfläche zu erstellen, ohne den integrierten Mouse-Over-Animationseffekt. Es behält einen einfachen Mouse-Over-Effekt bei, bei dem der Schaltflächenrand schwarz angezeigt wird.

Der Stil kann beispielsweise (wie gezeigt) in den Abschnitt Window.Resources oder UserControl.Resources eingefügt werden.

<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>
— dodgy_coder
quelle
2
Ich mag diese Lösung sehr. Der Mauszeiger wird jedoch nur aktiviert, wenn sich die Maus über dem Text auf der Schaltfläche befindet. Ich habe einen Textblock mit einer bestimmten Breite innerhalb der Schaltfläche hinzugefügt, um dieses Problem zu beheben.
— Dave
25

Nur um eine sehr einfache Lösung hinzuzufügen, das war gut genug für mich, und ich denke , es geht um das Problem des OP. Ich habe die Lösung in dieser Antwort verwendet, außer mit einem regulären BackgroundWert anstelle eines Bildes.

<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>

Kein erneutes Templating, außer das Erzwingen Background, dass der TransparentHintergrund immer der Template-Button ist - Mouseover wirkt sich nicht mehr auf den Hintergrund aus, sobald dies erledigt ist. Offensichtlich durch einen Transparentbeliebigen Wert ersetzen .

— Lyall
quelle
9

Der Muffin-Mann hatte eine sehr einfache Antwort, die für mich funktionierte.

Um eine etwas spezifischere Richtung hinzuzufügen, zumindest für VS 2013:

  • Klicken Sie mit der rechten Maustaste auf das Steuerelement
  • Wählen Sie Vorlage bearbeiten => Kopie bearbeiten ...
  • Ich habe 'Anwendung' ausgewählt, um den Stil zu speichern
    • Von hier aus können Sie App.xaml direkt bearbeiten und die intuitiv benannten Eigenschaften anzeigen. Für meine Zwecke habe ich einfach RenderMouseOver = "False" gesetzt.
  • Dann können Sie in der Datei MainWindow.xaml oder wo immer sich Ihre GUI befindet, den neuen Stil am Ende des Button-Tags einfügen, z ... Style="{DynamicResource MouseOverNonDefault}"/>
— Benji-Man
quelle
Wer ist der Muffin-Mann?
— Mike W
LOL. Er gab die zweite Antwort auf die vom Frageninhaber akzeptierte Antwort. Ich war mir nicht sicher, ob Sie ernsthaft fragten oder scherzten. Schwer zu sagen mit einem Namen wie Muffin Man.
— Benji-Man
4

Dieser Link hat mir sehr geholfen http://www.codescratcher.com/wpf/remove-default-mouse-over-effect-on-wpf-buttons/

Definieren Sie einen Stil in UserControl.Resources oder Window.Resources

 <Window.Resources>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" Value="0.8" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Fügen Sie dann den Stil auf diese Weise zu Ihrer Schaltfläche hinzu. Style = "{StaticResource MyButton}"

<Button Name="btnSecond" Width="350" Height="120" Margin="15" Style="{StaticResource MyButton}">
    <Button.Background>
        <ImageBrush ImageSource="/Remove_Default_Button_Effect;component/Images/WithStyle.jpg"></ImageBrush>
    </Button.Background>
</Button>
— Arash.Zandi
quelle
4

Wenn jemand die Standardsteuerungsvorlage nicht überschreiben möchte, finden Sie hier die Lösung.

Sie können eine DataTemplate for-Schaltfläche erstellen, die TextBlock enthalten kann, und anschließend den Eigenschaftstrigger in die IsMouseOver-Eigenschaft schreiben, um den Mouse-Over-Effekt zu deaktivieren. Die Höhe von TextBlock und Button sollte gleich sein.

<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>
— Prateek Rai
quelle
1

Eine Erweiterung der Antwort von dodgy_coder, die Unterstützung für ..

  • WPF-Schaltflächenstil beibehalten

  • Fügt Unterstützung für IsSelected und Hover hinzu, dh eine umgeschaltete Schaltfläche

        <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>

Beispiele ..

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

— stoj
quelle
0

Verwenden eines Vorlagenauslösers:

<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>
— Laine Mikael
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.