Question

我有一个带有三个可导航步骤的应用程序，比如firstPage，secondPage和thirdPage。

我为此导航创建了一个控件，其中包含三个按钮和一个应始终位于活动步骤按钮下方的边框。为此，我在边框上使用动画，从最后一个活动步骤移动到新的动画。

以下是动画边框的XAML：

<ControlTemplate.Triggers>
    <DataTrigger Binding="{Binding ActivePage}" Value="FirstPage">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="FirstPageStoryboard">
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0.2"
                                     Storyboard.TargetName="ActivePageIndicator"
                                     Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
                                     To="-185" />
                </Storyboard>
            </BeginStoryboard>
            <StopStoryboard BeginStoryboardName="SecondPageStoryboard" />
            <StopStoryboard BeginStoryboardName="ThirdPageStoryboard" />
        </DataTrigger.EnterActions>
    </DataTrigger>

    <DataTrigger Binding="{Binding ActivePage}" Value="SecondPage">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="SecondPageStoryboard">
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0.2"
                                     Storyboard.TargetName="ActivePageIndicator"
                                     Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
                                     To="0" />
                </Storyboard>
            </BeginStoryboard>
            <StopStoryboard BeginStoryboardName="FirstPageStoryboard" />
            <StopStoryboard BeginStoryboardName="ThirdPageStoryboard" />
        </DataTrigger.EnterActions>
    </DataTrigger>

    <DataTrigger Binding="{Binding ActivePage}" Value="ThirdPage">
        <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="ThirdPageStoryboard">
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0.2"
                                     Storyboard.TargetName="ActivePageIndicator"
                                     Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
                                     To="185" />
                </Storyboard>
            </BeginStoryboard>
            <StopStoryboard BeginStoryboardName="FirstPageStoryboard" />
            <StopStoryboard BeginStoryboardName="SecondPageStoryboard" />
        </DataTrigger.EnterActions>
    </DataTrigger>
</ControlTemplate.Triggers>

一切正常，从第三页到第二页的过渡：边框直接将其位置设置为0，没有动画。

如果我在SecondPage故事板中将0替换为10，则边框首先将其位置重置为0，然后滑动到10。

如果我删除StopStoryboard指令，边框始终保持到最后定义其故事板的步骤（如果我导航到SecondPage，然后返回到FirstPage，边框将保留在SecondPage上，如果我导航到ThirdPage然后返回到第一页或第二页，边框保留在第三页上。

我尝试将stopstoryboard移动到ExitAction或使用FillBehavior = Stop但没有成功。

我知道我可以使用后面的代码和storyboard.completed来使用它，但有没有办法让它只使用XAML？

WPF Successive TranslateTransform开始位置

0 个答案: