故事板中的WPF更改路径数据

时间:2015-06-19 15:04:11

标签: wpf storyboard

所以我有一个像这样的路径设置

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

我不知道如何改变路径的数据方面来进行这些转换。

2 个答案:

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