Question

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

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

GetTG返回一个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进行动画处理

1 个答案: