WPF-按钮在IsMouseOver和IsPressed触发器之间混淆

我有一个按钮，当你将鼠标悬停在它上面时，它周围的边距会减小，它会使按钮变大，当你点击它时，它会将边距更改为上一个值并变小

但是当我点击并按住按钮时，如果我将鼠标“精确”地放在按钮边缘，它会在

IsMouseOver

和

IsPressed

连续触发之间发生变化，它们之间有点冲突，不知道现在处于什么状态，并导致按钮不断变大变小，那么我该如何解决这个问题呢

这是XAML代码

    <Style x:Key="MyButton" TargetType="Button">
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Padding" Value="0,0,0,2"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="BorderBrush" Value="#4767CF"/>
        <Setter Property="Margin" Value="8"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="Background" Value="#272C30"/>
        <Setter Property="Foreground" Value="#ADB5BD"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Padding="{TemplateBinding Padding}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Cursor" Value="Hand"/>
                            <Setter Property="FontSize" Value="16"/>
                            <Setter Property="Margin" Value="6"/>
                            <Setter Property="Background" Value="#2F3439"/>
                            <Setter Property="Button.Effect">
                                <Setter.Value>
                                    <DropShadowEffect Color="Black" Direction="310"
                                          ShadowDepth="18" BlurRadius="30" Opacity="0.2"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="FontSize" Value="14"/>
                            <Setter Property="Margin" Value="8"/>
                            <Setter Property="Background" Value="#272C30"/>
                            <Setter Property="Button.Effect">
                                <Setter.Value>
                                    <DropShadowEffect Opacity="0"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

---

下面是一个解决方案，它使用边距增加鼠标上方的按钮大小，而不会闪烁。但是，只有在设置了按钮的宽度和高度后，它才能保证工作。如果按钮的大小来自屏幕上的其他控件，则闪烁可能会返回

在下面的代码中，我使用边框的边距，而不是按钮本身来调整大小，如果没有明确设置，我还使用FallbackValue使按钮大小为50x100。否则，它与问题中的代码几乎相同

XAML：

按钮

替代解决方案

或者，您可以使用增加鼠标上的按钮大小，这是解决此问题的更标准WPF方法。问题在于，它似乎模糊了按钮内容，而不仅仅是设置边距：

<Window x:Class="WpfApp10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp10"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="800">
    <Window.Resources>
        <SolidColorBrush x:Key="BackgroundColor" Color="White"/>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Padding" Value="0,0,0,2"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="#4767CF"/>
            <Setter Property="Margin" Value="8"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Background" Value="#272C30"/>
            <Setter Property="Foreground" Value="#ADB5BD"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Padding="{TemplateBinding Padding}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}">
                            <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand"/>
                                <Setter Property="FontSize" Value="16"/>
                                <!--<Setter Property="Margin" Value="6"/>-->
                                <Setter Property="Background" Value="#2F3439"/>
                                <Setter Property="Button.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect Color="Black" Direction="310"
                                          ShadowDepth="18" BlurRadius="30" Opacity="0.2"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1.03" ScaleY="1.03"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="FontSize" Value="14"/>
                                <!--<Setter Property="Margin" Value="8"/>-->
                                <Setter Property="Background" Value="#272C30"/>
                                <Setter Property="Button.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect Opacity="0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBlock Background="{StaticResource BackgroundColor}"></TextBlock>
        <StackPanel Orientation="Horizontal">
            <TextBlock Background="{StaticResource BackgroundColor}" Width="100"></TextBlock>
            <Button x:Name="MyButton" Height="100" Width="200" Style="{StaticResource MyButton}">Button</Button>
            <TextBlock Background="{StaticResource BackgroundColor}" Width="700"></TextBlock>
        </StackPanel>
        <TextBlock Background="{StaticResource BackgroundColor}"></TextBlock>
    </StackPanel>
</Window>

按钮

“它将边距更改为上一个值并变小”——所以不要这样做。仅允许边距受鼠标位置（悬停）的影响，而不受其他用户输入的影响。“按下”的定义是，单击鼠标按钮后，鼠标仍在按钮上方。您的代码故意使情况并非如此。当用户试图点击按钮时，将按钮移动到完全不同的位置，这显然是用户敌对行为的一种变体。不要编写用户恶意代码，问题就会消失。你的意思是我甚至不应该更改按钮的大小？我不认为当鼠标悬停在按钮上时增加按钮大小有什么根本性的问题。但是，当鼠标在按钮上时，即使按下按钮，也要保持这种状态。也就是说，是的：你当然应该考虑改变尺寸是否明智；在某些用户界面中就是这样

<Window x:Class="WpfApp10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp10"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="800">
    <Window.Resources>
        <SolidColorBrush x:Key="BackgroundColor" Color="White"/>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Padding" Value="0,0,0,2"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="#4767CF"/>
            <Setter Property="Margin" Value="8"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Background" Value="#272C30"/>
            <Setter Property="Foreground" Value="#ADB5BD"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Padding="{TemplateBinding Padding}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}">
                            <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand"/>
                                <Setter Property="FontSize" Value="16"/>
                                <!--<Setter Property="Margin" Value="6"/>-->
                                <Setter Property="Background" Value="#2F3439"/>
                                <Setter Property="Button.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect Color="Black" Direction="310"
                                          ShadowDepth="18" BlurRadius="30" Opacity="0.2"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1.03" ScaleY="1.03"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="FontSize" Value="14"/>
                                <!--<Setter Property="Margin" Value="8"/>-->
                                <Setter Property="Background" Value="#272C30"/>
                                <Setter Property="Button.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect Opacity="0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBlock Background="{StaticResource BackgroundColor}"></TextBlock>
        <StackPanel Orientation="Horizontal">
            <TextBlock Background="{StaticResource BackgroundColor}" Width="100"></TextBlock>
            <Button x:Name="MyButton" Height="100" Width="200" Style="{StaticResource MyButton}">Button</Button>
            <TextBlock Background="{StaticResource BackgroundColor}" Width="700"></TextBlock>
        </StackPanel>
        <TextBlock Background="{StaticResource BackgroundColor}"></TextBlock>
    </StackPanel>
</Window>