WPF中含GeometryGroup的Path元素动画:Storyboard.TargetProperty路径解析问题求助
解决WPF中GeometryGroup下LineGeometry的颜色动画路径问题
我来帮你理清这个问题,核心是你混淆了Path本身的Stroke属性和Geometry内部的Stroke属性,同时之前的属性路径写法存在几个关键错误。
先搞清楚核心误区
你的theO能正常工作,是因为你动画的是Path.Stroke——也就是整个椭圆路径的描边颜色,而且你给theO显式设置了Stroke="Transparent",这意味着Path已经有一个有效的SolidColorBrush实例供动画修改。
但你的theX有两个问题:
- 你没给
theX设置Stroke属性,所以Path.Stroke默认是null,这也是你尝试(Path.Stroke).(SolidColorBrush.Color)失败的原因——没有可修改的Brush实例。 - 你错误地试图从
Path.Stroke往下找GeometryGroup,但Path.Stroke是Brush类型,和GeometryGroup完全没有关系,GeometryGroup在Path.Data属性里。
解决方案分两种场景
场景1:让整个X的两条线一起变色(最简单的方案)
如果你不需要单独控制每条线的颜色,只需要整个X统一变色,那直接给theX添加Stroke属性,然后复用theO的动画写法即可:
修改后的Path代码:
<Path x:Name="theX" Stroke="#333333" StrokeThickness="7" StrokeStartLineCap="Round" StrokeEndLineCap="Round"> <Path.Data> <GeometryGroup> <LineGeometry StartPoint="4, 4" EndPoint="60, 60"/> <LineGeometry StartPoint="4, 60" EndPoint="60, 4"/> </GeometryGroup> </Path.Data> </Path>
动画代码(和theO完全一致):
<ColorAnimationUsingKeyFrames BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="theX" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" FillBehavior="Stop"> <DiscreteColorKeyFrame Value="#333333" KeyTime="0:0:0"/> <LinearColorKeyFrame Value="#6AFF00" KeyTime="0:0:0.2"/> <DiscreteColorKeyFrame Value="#6AFF00" KeyTime="0:0:0.5"/> <LinearColorKeyFrame Value="#333333" KeyTime="0:0:0.9"/> </ColorAnimationUsingKeyFrames>
这个方案能直接解决你的问题,因为现在Path.Stroke有了有效的SolidColorBrush,动画可以正常修改它的Color属性。
场景2:单独控制每条LineGeometry的颜色
如果你需要让两条线分别变色,那就要给每个LineGeometry单独设置Stroke属性,然后通过GeometryGroup.Children的索引来定位具体的线条:
修改后的Path代码:
<Path x:Name="theX" StrokeThickness="7" StrokeStartLineCap="Round" StrokeEndLineCap="Round"> <Path.Data> <GeometryGroup> <LineGeometry StartPoint="4, 4" EndPoint="60, 60"> <LineGeometry.Stroke> <SolidColorBrush Color="#333333"/> </LineGeometry.Stroke> </LineGeometry> <LineGeometry StartPoint="4, 60" EndPoint="60, 4"> <LineGeometry.Stroke> <SolidColorBrush Color="#333333"/> </LineGeometry.Stroke> </LineGeometry> </GeometryGroup> </Path.Data> </Path>
动画代码(分别控制两条线):
<Storyboard> <!-- 动画第一条LineGeometry --> <ColorAnimationUsingKeyFrames BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="theX" Storyboard.TargetProperty="(Path.Data).(GeometryGroup.Children)[0].(LineGeometry.Stroke).(SolidColorBrush.Color)" FillBehavior="Stop"> <DiscreteColorKeyFrame Value="#333333" KeyTime="0:0:0"/> <LinearColorKeyFrame Value="#6AFF00" KeyTime="0:0:0.2"/> <DiscreteColorKeyFrame Value="#6AFF00" KeyTime="0:0:0.5"/> <LinearColorKeyFrame Value="#333333" KeyTime="0:0:0.9"/> </ColorAnimationUsingKeyFrames> <!-- 动画第二条LineGeometry --> <ColorAnimationUsingKeyFrames BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="theX" Storyboard.TargetProperty="(Path.Data).(GeometryGroup.Children)[1].(LineGeometry.Stroke).(SolidColorBrush.Color)" FillBehavior="Stop"> <DiscreteColorKeyFrame Value="#333333" KeyTime="0:0:0"/> <LinearColorKeyFrame Value="#6AFF00" KeyTime="0:0:0.2"/> <DiscreteColorKeyFrame Value="#6AFF00" KeyTime="0:0:0.5"/> <LinearColorKeyFrame Value="#333333" KeyTime="0:0:0.9"/> </ColorAnimationUsingKeyFrames> </Storyboard>
这里的关键是通过Children[0]和Children[1]来访问GeometryGroup中的具体LineGeometry,然后定位到它的Stroke.Color属性。
解释你之前的错误尝试
(Path.Stroke).GeometryGroup.(...):完全错误,Path.Stroke是Brush类型,没有GeometryGroup这个属性,导致路径解析失败。(Path.Data).(GeometryGroup.Children).(...):Children是GeometryCollection集合,必须通过索引(比如[0])来指定具体元素,不能直接写Children。(Path.Stroke).(SolidColorBrush.Color):之前失败是因为theX没有设置Stroke属性,Path.Stroke为null,无法找到Color属性。
内容的提问来源于stack exchange,提问作者MK-NEUKO
相关产品推荐
相关产品推荐

