当鼠标悬停在自定义WPF按钮模板

Question

我正在尝试在WPF中创建一个直接的彩色按钮，当按下按钮时，当鼠标结束时会改变颜色。我最近一直在从事网络项目，而且与WP相比，WPF的样式更加复杂。

除了评论之外，尽管MS documentation on UIElement.IsMouseOver表明它包含了儿童元素，但我却遇到了相反的情况。当我的指针正好在按钮的边框上时，我的触发器会改变颜色，但是一旦它向内移动了几个像素，它就会变回。使用Snoop，当我逐个像素地朝向按钮的中心移动指针时，我可以看到IsMouseOver对于边框是真的，然后是ContentPresenter，然后是内部TextBlock，但它们是互斥的。当IsMouseOver对于子元素为true时，父元素为false。我见过许多使用与我相同的方法的例子，但它不起作用。我经历了不少编辑，所以也许我有一些错误的语法。当鼠标位于按钮内的任何位置时，如何应用触发器。

这是我的代码。我将画笔定义为按钮的资源，覆盖默认控件模板，用常规边框替换Chrome边框，然后替换样式触发器中的画笔。

<Grid Name="grdResults" Grid.Row="3" Margin="0" Visibility="Visible">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        ...
    </Grid.RowDefinitions>
    <Button Grid.ColumnSpan="2" Grid.RowSpan="2" Content="X" BorderThickness="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,3,0" Padding="5,1">
        <Button.Resources>
            <Style x:Key="ButtonFocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="2" SnapsToDevicePixels="true" Fill="Transparent" Stroke="WhiteSmoke" StrokeThickness="1" StrokeDashArray="1 2"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF9B9B9B" Offset="0"/>
                <GradientStop Color="#FF666666" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="BackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA21E00" Offset="0"/>
                <GradientStop Color="#FF550000" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="MouseOverBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB63200" Offset="0"/>
                <GradientStop Color="#FF681800" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="MouseDownBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF666666" Offset="0"/>
                <GradientStop Color="#FF9B9B9B" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="MouseDownBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF550000" Offset="0"/>
                <GradientStop Color="#FFA21E00" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ForegroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="#FFB9B9B9" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="MouseDownForegroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB9B9B9" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Button.Resources>
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
                <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="Border" CornerRadius="4" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                <ContentPresenter Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource MouseOverBackgroundBrush}" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource MouseDownBackgroundBrush}" />
                        <Setter Property="BorderBrush" Value="{StaticResource MouseDownBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource MouseDownForegroundBrush}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
    <TextBlock Text="Posts Processed:" HorizontalAlignment="Right" Height="16" VerticalAlignment="Top" Margin="13,0,0,0" />
    <TextBlock Grid.Column="1" Name="tbPostsProcessed" Margin="3,0,13,0" Text="{Binding PostsProcessed}" HorizontalAlignment="Left"/>

编辑：

我也刚刚发现MouseOver触发器似乎可以在X（按钮内容）右侧的任何地方工作。很奇怪。 IsPressed似乎也只适用于MouseOver处理的相同像素。