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

【问题标题】：How can I change Fill color of Ellipse when mouse is over another Ellipse?当鼠标悬停在另一个椭圆上时，如何更改椭圆的填充颜色？
【发布时间】：2017-05-02 12:19:44
【问题描述】：

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

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

    <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>

【问题讨论】：

标签： c# wpf triggers

【解决方案1】：

您可以使用 DataTrigger 绑定到另一个 Ellipse 的 IsMouseOver 属性：

<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>

【讨论】：