同时在同一个 ContentControl 上设置两个 UserControl 的动画

Question

我在 App.xaml 中有这些 Load 和 Unload 动画：

<Storyboard x:Key="Unload">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-800"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Key="Load">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="0" Value="800"/>
        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

在我的代码中，我会像这样调用按钮点击：

sb1 = FindResource("Unload") as Storyboard;
sb2 = FindResource("Load") as Storyboard;

void Button_Click(object sender, RoutedEventArgs e)
{
    uc1.RenderTransform = GetTG();
    uc2.RenderTransform = GetTG();

    sb1.Begin(uc2);
    sb2.Begin(uc1);

    content.Content = uc1;
}

//and 

void Button_Click_1(object sender, RoutedEventArgs e)
{
    uc2.RenderTransform = GetTG();
    uc1.RenderTransform = GetTG();

    sb2.Begin(uc2);
    sb1.Begin(uc1);

    content.Content = uc2;
}

GetTGreturns一个TransformGroup

TransformGroup GetTG()
{
    var tg = new TransformGroup();
    tg.Children.Add(new ScaleTransform());
    tg.Children.Add(new SkewTransform());
    tg.Children.Add(new RotateTransform());
    tg.Children.Add(new TranslateTransform());
    return tg;
}

有了这些只有 Load 动画有效。如何让两者同时工作？

Answer 1

将动画应用于 ContentControl。这应该将当前的 Content/UserControl 滑出到左侧，并从右侧滑入新的 Content/UserControl：

void Button_Click(object sender, RoutedEventArgs e)
{
    UnLoadAndLoad(uc1);
}

void Button_Click_1(object sender, RoutedEventArgs e)
{
    UnLoadAndLoad(uc2);
}

void UnLoadAndLoad(object ucToBeLoaded)
{
    if (content.Content != ucToBeLoaded)
    {
        content.RenderTransform = GetTG();

        EventHandler completed = null;
        completed = (ss, ee) =>
        {
            sb1.Completed -= completed;
            content.Content = ucToBeLoaded;
            //load
            sb2.Begin(content);
        };
        sb1.Completed += completed;
        //unload

        if (content.Content != null)
            sb1.Begin(content);
        else
            completed(this, EventArgs.Empty);
    }
}

同时在同一个 ContentControl 上设置两个 UserControl 的动画

Animating two UserControls on the same ContentControl at the same time

wpf

rendertransform