所以我有一个像这样的路径设置
<Grid x:Name="arrowPanel">
<Path x:Name="arrow" Data="M0,4 H8 M4,4 V8Z" Stroke="Black" StrokeThickness="2" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">
<!--Not sure what to do here -->
</Path>
</Grid>
我有像这样的故事板设置
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<!-- Something to change the data to this 'M0,5 H10'(A minus sign)-->
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<!-- Something to change the data back to it's original 'M0,5 H10 M5,5 V10Z' (A plus sign)-->
</Storyboard>
</VisualState>
</VisualStateGroup>
我不知道如何改变路径的数据方面来进行这些转换。
答案 0 :(得分:1)
您可以使用ObjectAnimationUsingKeyFrames
“动画化”路径的Data
属性:
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="arrow" Storyboard.TargetProperty="Data">
<DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame.Value>
<Geometry>M0,5 H10</Geometry>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
答案 1 :(得分:0)
为了得到我想要的结果,我创建了两条占据相同区域的路径。一个带加号,另一个带负号(加号没有垂直路径)。 的对象:强>
<Grid>
<Grid x:Name="plusSignPanel">
<!-- Minus -->
<Path Data="M0,4 H8" Stroke="Red" StrokeThickness="2" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8"/>
<!-- Plus -->
<Path x:Name="plusSign" Data="M0,4 H8 M4,4 V8Z" Stroke="Black" StrokeThickness="2" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8"/>
</Grid>
</Grid>
然后我所做的就是使用加号上的coloranimation将颜色从黑色更改为透明状态,反之亦然,折叠状态:
<强>动画:强>
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="plusSign" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="plusSign" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="Black"/>
</Storyboard>
</VisualState>
</VisualStateGroup>