在控制模板资源中挂钩 Storyboard 的已完成事件时出现问题

Question

我正在创建一个名为 ImageFader 的自定义控件。样式模板如下所示：

<ControlTemplate TargetType="{x:Type controls:ImageFader}">
    <Grid>
        <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                Stretch="{TemplateBinding Stretch}"
                x:Name="PART_SourceImage" Opacity="1" />

        <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                Stretch="{TemplateBinding Stretch}"
                x:Name="PART_TargetImage" Opacity="0" />

    </Grid>
    <ControlTemplate.Resources>
        <Storyboard x:Key="FadeImageStoryboard">
            <!-- fade in the new image -->
            <DoubleAnimation From="0" To="1"
                                Duration="{TemplateBinding FadeTime}"
                                Storyboard.TargetName="PART_TargetImage"
                                Storyboard.TargetProperty="Opacity" />

            <!-- fade out the previous image -->
            <DoubleAnimation From="1" To="0"
                                Duration="{TemplateBinding FadeTime}"
                                Storyboard.TargetName="PART_SourceImage"
                                Storyboard.TargetProperty="Opacity" />

        </Storyboard>
    </ControlTemplate.Resources>
</ControlTemplate>

在代码中，我有这样的：

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    SourceImage = Template.FindName("PART_SourceImage", this) as Image;
    TargetImage = Template.FindName("PART_TargetImage", this) as Image;
    FadeImageStoryboard = Template.Resources["FadeImageStoryboard"] as Storyboard;

    FadeImageStoryboard.Completed += new EventHandler(FadeImageStoryboard_Completed);
}

在已完成的处理程序中，我尝试交换图像并重置其不透明度：

private void FadeImageStoryboard_Completed(object sender, EventArgs e)
{
    SourceImage.Source = TargetImage.Source;
    SourceImage.Opacity = 1;
    TargetImage.Opacity = 0;
}

我使用以下方法在 DispatchTimer 内启动动画：

FadeImageStoryboard.Begin(this, this.Template, true);

一切正常，直到我放置两个或同一窗口上的多个 ImageFader 控件。当我这样做时（使用 DispatchTimer 以不同的时间间隔启动动画），故事板完成事件会为两个 ImageFader 运行。

我相信我的控制是从模板资源中获取故事板作为静态参考。

我该如何避免这种情况？

Answer 1

一种解决方案可能是从代码创建故事板，它不会变得太难看:)

只需更改此代码：

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    SourceImage = Template.FindName("PART_SourceImage", this) as Image;
    TargetImage = Template.FindName("PART_TargetImage", this) as Image;
    FadeImageStoryboard = GetFadeImageStoryboard();

    FadeImageStoryboard.Completed += new EventHandler(FadeImageStoryboard_Completed);
}

private Storyboard GetFadeImageStoryboard()
{
    DoubleAnimation fadeNewImage = new DoubleAnimation { From = 0, To = 1, Duration = FadeTime };
    Storyboard.SetTarget(fadeNewImage, SourceImage);
    Storyboard.SetTargetProperty(fadeNewImage, new PropertyPath("Opacity"));

    DoubleAnimation fadePreviousImage = new DoubleAnimation { From = 0, To = 1, Duration = FadeTime };
    Storyboard.SetTarget(fadePreviousImage, TargetImage);
    Storyboard.SetTargetProperty(fadePreviousImage, new PropertyPath("Opacity"));

    Storyboard fadeImageStoryboard = new Storyboard();
    fadeImageStoryboard.Children.Add(fadeNewImage);
    fadeImageStoryboard.Children.Add(fadePreviousImage);

    return fadeImageStoryboard;
}

每个控件都会获得它自己的故事板。我不认为将这些故事板作为模板的一部分是一个好主意，因为它们是此控件正确行为的重要组成部分，而且它们上没有太多需要更改的内容（因此几乎所有情况下）模板代码必须重复）。