如何删除WPF按钮上的默认鼠标悬停效果?

时间:2010-10-04 10:26:20

标签: wpf button mouseover

我的问题是,在WPF中,每当我尝试使用触发器或动画更改按钮背景的颜色时,默认的鼠标悬停效果(橙色发光为灰色)似乎优先。

经过大量搜索后,我对如何消除这种影响毫无头绪。

8 个答案:

答案 0 :(得分:98)

这类似于Mark Heath所提到的解决方案,但没有创建一个非常基本的按钮,没有内置鼠标动画效果的代码。它保留了一个简单的鼠标效果,将按钮边框显示为黑色。例如,可以将样式插入到Window.Resources或UserControl.Resources部分中(如图所示)。

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

答案 1 :(得分:19)

只是添加一个非常简单的解决方案,这对我来说已经足够了,我认为解决了OP的问题。我使用了解决方案in this answer,除了使用常规Background值而不是图像。

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

除了强制Background永远是模板化按钮的Transparent背景之外,不会重新模板化 - 一旦完成,鼠标悬停不再影响背景。显然用任何首选值替换Transparent

答案 2 :(得分:16)

您需要创建自己的自定义按钮模板,才能完全控制所有状态下的外观。这是一个tutorial

答案 3 :(得分:5)

松饼人有一个非常简单的答案,对我有用。

为了增加一个更具体的方向,至少对于VS 2013:

  • 右键单击控件
  • 选择修改模板=&gt;编辑副本......
  • 我选择了应用程序&#39;在哪里保存风格
    • 从这里,您可以直接编辑App.xaml并查看直观命名的属性。为了我的目的,我只设置了RenderMouseOver =&#34; False&#34;
  • 然后,在MainWindow.xaml或GUI的任何位置,您可以将新样式粘贴到Button标记的末尾,例如: ... Style="{DynamicResource MouseOverNonDefault}"/>

答案 4 :(得分:3)

如果有人不想覆盖默认的控制模板,那么这就是解决方案。

您可以为具有TextBlock的按钮创建DataTemplate,然后您可以在IsMouseOver属性上编写Property触发器以禁用鼠标悬停效果。 TextBlock和Button的高度应该相同。

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

答案 5 :(得分:2)

此链接对我有很大帮助 http://www.codescratcher.com/wpf/remove-default-mouse-over-effect-on-wpf-buttons/

UserControl.Resources 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>

然后以这种方式将样式添加到按钮中 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>

答案 6 :(得分:1)

dodgy_coder答案的扩展,增加了对..的支持

  • 维护WPF按钮样式
  • 添加对IsSelected和hover的支持,即切换按钮

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

例子..

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

答案 7 :(得分:0)

使用模板触发器:

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