WinRT中如何实现无缝页面导航？答案

【问题标题】：How to achieve seamless Page navigation in WinRT?WinRT中如何实现无缝页面导航？
【发布时间】：2023-03-05 09:42:01
【问题描述】：

每当我似乎在 Metro 应用程序中从一个页面导航到另一个页面时，都会出现一个“闪光”，其中没有显示任何内容 - 仅显示默认背景颜色。如何使 Frame.Navigate 方法正确转换？我的应用程序的图像很重，所以我想部分原因是图像加载。不过我尝试过其他应用程序，似乎也有类似的问题。

【问题讨论】：

【解决方案1】：

我找到的解决方案是使用 WinRT XAML 工具包，该工具包具有 AlternativePage 和 AlternativeFrame 控件。我使用扩展的初始屏幕来预加载 MainPage 和用户可能需要快速访问的任何页面 - 然后我会在需要时预加载其他页面。

【讨论】：

【解决方案2】：

在使用图像密集型 Metro 应用程序时，我遇到了同样的问题。简而言之，我从来没有找到一种无缝、不冲突的过渡方式，即使在对加载的项目进行排序并通过异步调用填充适当的元素时也是如此。

我最后做的是对第一个页面的父元素应用淡出效果，并在第二个页面上应用淡入效果。它使负载更令人赏心悦目。不是带有图像的弹出效果，而是平滑过渡。它确实比非褪色版本增加了一个非常短的延迟，但它看起来更加自然和吸引人。

【讨论】：

好的，你是怎么做到的？
就我而言，我只是创建了一个带有 DoubleAnimation 的 StoryBoard，它从 UIElement.Opacity 1 到 0 用于淡出，0 到 1 用于淡入，并适当地应用它。您还可以使用 FadeOutThemeAnimation 和 FadeInThemeAnimation 元素，尽管我有更多自定义需求。因为我的导航是在单击时触发的，所以我将我的 storyBoard.Begin() 绑定到单击上，并且在故事板上完成了实际导航事件。第二个页面从父元素的 Opacity 0 开始，并在页面 OnNavigatedTo 事件中执行故事板的淡入。
再一次，这一切都是为了 Metro 应用程序。这是动画 UI 元素的链接。 msdn.microsoft.com/en-us/library/windows/apps/xaml/…
顺便说一句，我的应用程序是 XAML/C#，但如果存在相同的问题，可以在 JS/HTML5 中完成相同的转换。