在 UWP 中显示 Grid 时模拟页面过渡动画答案

【问题标题】：Simulating page transition animation when showing a Grid in UWP在 UWP 中显示 Grid 时模拟页面过渡动画
【发布时间】：2015-12-07 08:10:47
【问题描述】：

我在SplitView 中有一个带有几个屏幕的 Windows 10 (UWP) 应用程序。在页面之间导航时会显示页面过渡动画（我在SplitView 的Frame 中添加了动画）。

应用程序的一个页面有点不同。在左半部分显示了一个日历。右半部分显示了一天的详细信息。当用户点击日历中的某一天（左侧）时，详细信息将显示在右侧。

当窗口较窄或应用在手机上运行时，仅显示日历或日期。所以用户看到日历，点击一天，日历隐藏（Visibility=Collapsed），显示日期细节（Visibility=Visible）。反之亦然。

问题是这让人感觉很尴尬，因为没有动画看起来像是从日历过渡到一天。

那么问题来了，如何在显示 Grid 时模拟页面过渡动画？

我查看了主从场景的 UWP 示例（我的情况基本上是主从场景）。在示例中，Microsoft 有两个页面而不是 on，一个包含列表和详细信息的母版页和一个单独的重复详细信息页面。还有大量丑陋的代码用于根据屏幕大小进行导航，在窗口大小发生变化时操作后台堆栈等等。不是一个优雅的解决方案。

【问题讨论】：

【解决方案1】：

不确定模拟导航转换的优雅解决方案，但我不会使用Visibility。动画效果不好。

我会考虑使用类似Transform 的动画来将两个元素偏移一个屏幕宽度。我不会模拟导航转换，但它会比不和谐的开关更好。

或者，您可以在更改选项卡时模拟Pivot 转换之类的东西。

【讨论】：