0

动画几乎不会停止并且图像会重置其位置，但我希望动画完成到下一个完整的 360°。

有什么想法吗？

XAML 代码：

<Button
    BorderThickness="0"
    Cursor="Hand"
    Command="{Binding RefreshCommand}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border>
                <ContentPresenter />
            </Border>
        </ControlTemplate>
    </Button.Template>
    <Image Source="../Resources/RefreshIcon.png">
        <Image.Style>
            <Style>
                <Setter Property="Image.RenderTransform">
                    <Setter.Value>
                        <RotateTransform />
                    </Setter.Value>
                </Setter>
                <Setter Property="Image.RenderTransformOrigin" Value=".5,.5">
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsRefreshing}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Name="RotationStoryboard">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetProperty="RenderTransform.Angle"
                                        From="0"
                                        To="360"
                                        Duration="0:0:0.8"
                                        RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsRefreshing}" Value="False">
                        <DataTrigger.EnterActions>
                            <RemoveStoryboard BeginStoryboardName="RotationStoryboard"/>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Button>

最终解决方案，除了必须将其放入 UserControl 以使其更通用（另见@Sheridans 帖子和我在下面的评论）的事实之外：

<Button
    BorderThickness="0"
    Cursor="Hand"
    Command="{Binding RefreshCommand}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border>
                <ContentPresenter />
            </Border>
        </ControlTemplate>
    </Button.Template>
    <Image
        Name="RefreshImage"
        Source="../Resources/RefreshIcon.png"
        RenderTransformOrigin=".5,.5">
        <Image.Resources>
            <Storyboard
                x:Key="RotationStoryboard"
                Completed="RotationStoryboardCompleted">
                <DoubleAnimation
                    Storyboard.Target="{Binding ElementName=RefreshImage}"
                    Storyboard.TargetProperty="RenderTransform.Angle"
                    From="0"
                    To="360"
                    Duration="0:0:1.5">
                    <DoubleAnimation.EasingFunction>
                        <CircleEase EasingMode="EaseInOut"></CircleEase>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Image.Resources>
        <Image.Style>
            <Style>
                <Setter Property="Image.RenderTransform">
                    <Setter.Value>
                        <RotateTransform />
                    </Setter.Value>
                </Setter>
                <Setter Property="Image.RenderTransformOrigin" Value=".5,.5">
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsRefreshing}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <StaticResource ResourceKey="RotationStoryboard"/>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Button>

后面的代码：

public partial class SomeView
{
    public SomeView()
    {
        InitializeComponent();
    }

    private void RotationStoryboardCompleted(object sender, EventArgs e)
    {
        var viewModel = (ISomeViewModel)DataContext;
        var storyboard = (Storyboard)((ClockGroup)sender).Timeline;

        if (viewModel.IsRefreshing)
        {
            storyboard.Begin();
        }
    }
}
4

1 回答 1

1

我不知道在 XAML 中执行此操作的任何方法，但是通过代码，您可以使用一个Timeline.Completed事件。如果您将处理程序附加到您的Storyboard，那么它将在完成后被调用，您可以做任何您想做的事情：

<BeginStoryboard>
    <Storyboard Name="RotationStoryboard" Completed="StoryboardCompleted">
        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" From="0" 
To="360" Duration="0:0:0.8" />
    </Storyboard>
</BeginStoryboard>

在代码中：

private void StoryboardCompleted(object sender, EventArgs e)
{
    // Restart your Storyboard here each time until you want it to stop.
}

如需进一步帮助，请参阅 MSDN 上链接页面中的示例。

于 2013-12-10T12:44:20.053 回答