如何修复XAML样式中Canvas.Top引用错误，实现RadioButton控制椭圆移动

我来帮你搞定这个问题！你遇到的崩溃根源很明确：在WPF动画中引用附加属性时，必须使用括号语法包裹属性名，你的初始代码里没这么做，导致WPF无法正确解析Canvas.Top这个附加属性。

核心修复（仅修改样式，不碰Ellipse标签） #

不需要修改<Ellipse>自身的任何代码，只需要把样式里所有DoubleAnimation的Storyboard.TargetProperty从Canvas.Top改成(Canvas.Top)就行。

修改后的完整样式代码如下：

<Window.Resources>
    <Style TargetType="Ellipse">
        <Setter Property="Fill" Value="Red"></Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsChecked, ElementName=RedRB}" Value="True">
                <Setter Property="Fill" Value="Red"></Setter>
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.400" To="83">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsChecked, ElementName=YellowRB}" Value="True">
                <Setter Property="Fill" Value="Orange"></Setter>
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.400" To="133">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsChecked, ElementName=GreenRB}" Value="True">
                <Setter Property="Fill" Value="Green"></Setter>
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0.400" To="183">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

为什么这样能行？ #

在WPF中，Canvas.Top是附加属性——它不是Ellipse自带的属性，而是Canvas容器给子元素附加的布局属性。当你在动画的Storyboard.TargetProperty里引用这类属性时，必须用(附加属性所属类.属性名)的格式，也就是(Canvas.Top)，这样WPF的属性路径解析器才能准确找到这个属性，不会把它当成Ellipse的普通属性来解析，自然就不会崩溃了。

这样修改后，你的Ellipse标签完全可以保持原样：

<Ellipse Name="Light" Width="50" Height="50" Canvas.Left="180"></Ellipse>

不需要额外添加Canvas.Top属性，动画就能正常控制它在Canvas里的垂直位置，完美实现红绿灯切换的效果。

内容的提问来源于stack exchange，提问作者Šaman Bobo