如何将 Windows.UI.Composition 动画集成到 UWP MVVM Light 应用程序中答案

【问题标题】：How to integrate Windows.UI.Composition animations into UWP MVVM Light app如何将 Windows.UI.Composition 动画集成到 UWP MVVM Light 应用程序中
【发布时间】：2016-11-17 21:18:31
【问题描述】：

我是第一次在我的应用程序中使用 Windows.UI.Composition 框架。我的应用程序是基于 MVVM Light 构建的。我正在更新应用程序以在元素之间添加更多过渡动画。

使用 MVVM 的普遍观点是，您应该尽可能将 UI 代码保留在 XAML 中，将视觉状态绑定到 ViewModel 属性等。但是我看到的所有 Windows.UI.Composition 材料和示例，而是在代码隐藏中定义 UI 操作。

让我们以显示/隐藏场景为例。我的 ViewModel 中有一个 bool 属性，例如 ShowTheBox。我将 TheBox 的 Visibility 属性绑定到 ViewModel 属性。 Box 将根据我的 ViewModel 中的更改自动显示或隐藏。

现在，我想使用 Windows.UI.Composition 为 TheBox 的可见性变化添加淡入/淡出动画。放置 C# 代码的最佳位置在哪里，如何将该转换绑定到我的 ShowTheBox 属性？

【问题讨论】：

标签： c# xaml uwp mvvm-light

【解决方案1】：

我不同意 MVVM 的目的是将 UI 代码仅保留在 XAML 中。与任何其他层分离模式一样，MVVM 的要点是将 UI 层与应用程序的逻辑分离。 MVVM 只是以绑定的形式添加了自己的风格。

所以我认为，当您有复杂的动画和其他与 UI 相关的东西时，将它们放在代码隐藏中是非常好的。但在此之前，您可能需要尝试将尽可能多的动画提取到自定义控件中，这会稍微缓解您的疑虑。

编辑： 将很多 UI 逻辑直接绑定到 ViewModel 属性并不总是一个好的解决方案。存在层分离是有原因的，因此当您组合层时，想象您正在编写 Xamarin 应用程序并具有通用 ViewModel，但不同平台的 View 不同。现在你甚至不确定在另一个平台上是否会有这些动画。也许在 UWP 上占用一个屏幕的流程将在 iOS 上占用两个屏幕，或者其他什么。拥有一个仅用于多个视图之一的属性“IsVisible”现在没有多大意义，不是吗？因此，您必须为 ViewModel 找到一些共同点，并将其他所有内容移至 UI 层。

归根结底，MVVM 只是一种帮助您编写更好代码的模式。尽可能坚持所有良好做法是可以理解的，但如果这对您的应用没有意义 - 是否值得？

【讨论】：

这一切都说得通，但无论代码是否在代码隐藏中，我都不知道如何从基于绑定到可见性的 ViewModel 属性的简单显示/隐藏场景中移动（就像我描述的那样）淡入/淡出动画。每次我想简单地淡入/淡出某些东西时，似乎都必须创建一个自定义控件。
好吧，我猜你搞砸了，在残酷的 MVVM 世界中没有动画可能:) 严肃地说，检查我更新的答案。我希望它会有所帮助。
不是每个人都可以选择自己的框架。值不值得我坚持使用 MVVM Light 应用程序。我的例子不是一个很好的例子。我的 ViewModel 实际上并不包含 UI 信息，它反映了数据的不同状态。各种 UI 元素通过 VM 绑定到数据的状态。这适用于简单的可见性。我遇到的问题是如何将过渡动画集成到元素的可见性中以使 UI 更加优雅。我尝试过 XAML 转换，但它们只在创建元素时播放一次。我不清楚如何通过可见性触发这些。
是的，我理解您面临的困难。对于以上所有内容，我还可以补充一点，如果您需要绑定元素查看 VM 中的数据状态，您可能会发现这很有用：EnumStateBehavior。我认为您可以尝试在此处使用视觉状态下的情节提要事件来集成合成动画，或者找到另一种方式。祝你好运。