c# - 当鼠标悬停在另一个椭圆上时，如何更改椭圆的填充颜色？

Question

当鼠标悬停在另一个椭圆上时，如何更改椭圆的填充颜色？

当鼠标悬停在“外部”椭圆上时，我想更改“内部”椭圆的颜色。你是通过什么方式实现这种行为的？

    <Canvas
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="50" Height="50">
        <Ellipse x:Name="inner" Width="50"
                 Height="50"
                 Fill="White"
                 Canvas.ZIndex="0"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" Stroke="Black">
            <Ellipse.Style>
                <Style TargetType="Ellipse">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0"  Value="Black" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0"  Value="White" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>
    <Ellipse x:Name="outter" Width="44"
                 Height="44"
                 Fill="Blue"
                 Canvas.ZIndex="1"
                 Canvas.Left="3"
                 Canvas.Top="3">
    </Ellipse>
    </Canvas>

Answer 1

您可以使用 DataTrigger 与另一个 Ellipse 的 IsMouseOver 属性的绑定(bind):

<Canvas>
    <Ellipse Width="50" Height="50">
        <Ellipse.Style>
            <Style TargetType="Ellipse">
                <Setter Property="Fill" Value="White"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=outer}"
                                 Value="True">
                        <Setter Property="Fill" Value="Black"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <Ellipse x:Name="outer" Canvas.Left="3" Canvas.Top="3"
             Width="44" Height="44" Fill="Blue"/>
</Canvas>