WPF 有一个按钮，当鼠标移动到按钮上面的时候按钮的颜色变为红色，使用Style实现

Posted 2023-03-24

谢谢。

1、在页面上绘制一个简单的WPF的命令按钮。

2、然后我们就可以在这里看到文本这个属性可以设置。

3、此时可以在这里进行文本的选项切换。

4、或者我们还能在这里切换段落等属性。

5、因此，我们在这里设置字体和字号大小。

6、然后我们就能在这里进行字体样式的内容一个设置。

参考技术A 最简单的一个buttonStyle;
<Style x:Key="CustomButtonStyle" TargetType="x:Type Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" Background="white"/>
<ContentPresenter HorizontalAlignment="TemplateBinding HorizontalContentAlignment" RecognizesAccessKey="True" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
wpf的button用blend打开后发现是不能很深的编辑的。所以建议先用border、rectange等画一个外框，然后选中右键选择make into Control构成button即可。然后在blend左上states选项卡里添加各个状态。 参考技术B     <Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="80">button</Button>
    </Grid>

追问

你好，这样是没有效果的。
当鼠标移动到按钮上面按钮的背景色并未发生任何变化。

追答    <Window.Resources>
        <Style TargetType="x:Type Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="x:Type Button">
                        <Border Background="TemplateBinding Background">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="80">button</Button>
    </Grid>

追问

第二种的确可行。

可是第一种为什么不行呢

追答

这个要自己去领悟了。

本回答被提问者采纳

按钮悬停效果和触摸 (WPF)

【中文标题】按钮悬停效果和触摸 (WPF)

【英文标题】：Button hover effect and touch (WPF)

【发布时间】：2013-07-11 05:10:26

【问题描述】：

我有一个带有Button 的 WPF 桌面应用程序。当我在普通 PC 上运行它并将鼠标光标移到按钮上时，它变成蓝色（默认 Windows 主题）。当我将光标移出时，按钮再次变灰。很正常的行为。

但是当我在 Windows 8 平板电脑上运行它时，会发生以下情况：我触摸 Button，它变成蓝色。然后我向上移动手指，但按钮保持蓝色。没有MouseLeave 事件。在单击屏幕上的其他位置之前，我会看到蓝色按钮。

有什么办法可以防止这种情况发生吗？我知道我可以移除整个悬停效果，但我不想这样做，除非有其他方法。

【参考方案1】：

检查是否关注 (http://blakenui.codeplex.com/) 将帮助您处理问题

WPF: Is there a possibility to "route" ordinary mouse events to touch events in Windows 7

【参考方案2】：

我能够通过使用以下使用视觉状态的行为来解决这个问题：

public class TouchDeviceMouseOverUIElementFixBehavior : Behavior<UIElement>

    protected override void OnAttached()
    
        AssociatedObject.StylusUp += AssociatedObject_StylusUp;
    

    protected override void OnDetaching()
    
        AssociatedObject.StylusUp -= AssociatedObject_StylusUp;
    

    private void AssociatedObject_StylusUp(object sender, StylusEventArgs e)
    
        var control = sender as FrameworkElement;
        if (control != null)
        
            if (!VisualStateManager.GoToElementState(control, "Normal", true))
            
                VisualStateManager.GoToState(control, "Normal", true);
            
        
    

【参考方案3】：

您可以通过删除 WPF 中的默认鼠标悬停选项来做到这一点。它对我来说非常好。

这是我找到answer的来源