简单的 WPF 页面转换

• 下载源代码 - 20.2 KB

简介 / 背景

我正在做一个小型的个人项目，其中包含需要显示的多个信息页面，我希望找到一种比简单地将页面（UserControl）弹出和消失更流畅的页面切换方式（这对眼睛不好）。

我希望拥有更美观的过渡效果，这促使我开发了一个非常简单的控件库，其中内置了几个动画，以实现更优雅的页面切换。

此控件版本的页面过渡类型包括以下几种：

• 淡入淡出
• 滑动
• 滑动淡入淡出 (SlideAndFade)
• 增长 (Grow)
• 增长淡入淡出 (GrowAndFade)
• Flip
• 翻转淡入淡出 (FlipAndFade)
• 旋转 (Spin)
• 旋转淡入淡出 (SpinAndFade)

该控件本身非常简单……它由一个 UserControl（PageTransition）组成，其中包含所有转换逻辑。 在此控件内部，UserControl.Resources 标签中包含几个动画，定义了所有可用的动画。 还有一个枚举 (PageTransitionType)，它被映射为 DependencyProperty，定义了控件用户可用的动画类型。

Using the Code

使用 PageTransition 控件非常简单……你只需将控件拖放到 WPF 窗口中（或在 XAML 编辑器中使用代码输入），它看起来会像这样：

<pageTransitions:PageTransition Name="pageTransition" Margin="25" TransitionType="Fade" />

请务必将 TransitionType 属性设置为可用值之一（在上面的列表中），这将决定显示的动画类型。

不要忘记在你的窗口/控件声明中添加 WpfPageTransitions 项目/类的命名空间！

此时，你可以通过引用窗口上的 PageTransition 控件，并在代码后台执行类似以下操作来更改页面：

NewPage newPage = new NewPage();
pageTransition.ShowPage(newPage);   

关注点

我在进行滑动进出动画时遇到一个有趣的现象，即使用 TranslateTransform 来滑动控件进出窗口区域似乎无法正常工作。 我并没有特别寻找滑动进出的功能，所以就跳过了调查这个问题…… 如果有人有使用 TranslateTransform 来移动控件的示例，那将非常棒。

历史

首次修订。