wpf - 同时在同一个 ContentControl 上为两个 UserControl 设置动画
问题描述
我有这些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>
在我的代码中,我在 Button Clicks 上调用它们,如下所示:
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
动画作品。如何使两者同时工作?
解决方案
将动画应用到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);
}
}
推荐阅读
- android - 无法运行反应本机应用程序android模拟器
- html - flexbox child 中的文本内容导致它覆盖它的邻居
- excel - 使用列作为条件对多行求和
- azure-functions - Azure Function .NET5:Microsoft.Azure.WebJobs.ServiceBus:ServiceBus 连接字符串“ServiceBusReadConnectionString”缺失或为空
- python - 解析项目内字符串,如 Python 中的 CLI 参数
- ios - 将 AVAudioEngine 与 AVComposition 和 AVAudioMix 一起使用
- r - 包括 R 中的 carrier::crate 中的额外功能,R 中的手动环境创建
- python - 使用pyspark时莳萝和泡菜之间的冲突
- python - 科拉兹序列。处理异常处理
- python - 检查列表中的所有元素是否都是列表类型并且长度是否大于零