XAML Border鼠标悬停触发器未生效问题求助

问题原因 #

你当前的触发器Trigger Property="Border.IsMouseOver"是在Ellipse的Style中，默认会尝试读取Ellipse自身的Border.IsMouseOver附加属性，而非父级Border的状态，所以只有鼠标直接悬停Ellipse时才会触发动画。

修复方案 #

1. 绑定父级Border的IsMouseOver状态 #

将触发器改为使用DataTrigger，通过RelativeSource绑定父级Border的IsMouseOver属性，确保检测的是整个开关区域的鼠标状态。

2. 添加鼠标离开的恢复动画 #

为了让Ellipse在鼠标离开时回到初始状态，需要补充ExitActions动画。

3. 明确Style的目标类型 #

给Style指定TargetType="Ellipse"，避免属性绑定的歧义。

修正后的完整代码 #

<UserControl x:Class="AToggle.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:AToggle"
             mc:Ignorable="d">

    <Grid>
        <Border x:Name="BD" Background="#FFDEDEDE" MaxHeight="30" MaxWidth="60" MinHeight="30" MinWidth="60" CornerRadius="15">
            <Ellipse Fill="White" Height="26" Width="26" Margin="2,2,32,2">
                <Ellipse.RenderTransform>
                    <TranslateTransform />
                </Ellipse.RenderTransform>
                <Ellipse.Style>
                    <Style TargetType="Ellipse">
                        <Style.Triggers>
                            <!-- 绑定父级Border的IsMouseOver状态 -->
                            <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.X)" To="30" Duration="0:0:0.1"/>
                                            <ColorAnimation Storyboard.TargetProperty="(Fill).(SolidColorBrush.Color)" To="Orange" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <!-- 鼠标离开时恢复初始状态 -->
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.X)" To="0" Duration="0:0:0.1"/>
                                            <ColorAnimation Storyboard.TargetProperty="(Fill).(SolidColorBrush.Color)" To="White" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Ellipse.Style>
            </Ellipse>
        </Border>
    </Grid>
</UserControl>

关键修改点 #

• 替换Trigger为DataTrigger，通过RelativeSource绑定父级Border的IsMouseOver，确保检测整个开关区域的鼠标状态。
• 新增ExitActions动画，实现鼠标离开后的状态恢复。
• 指定Style TargetType="Ellipse"，消除属性绑定的歧义。

内容的提问来源于stack exchange，提问作者Eli