本文介绍了在MVVM Light上下文中以编程方式Animate(Translate)ScatterViewItem的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在Microsoft Surface(WPF,.NET 4.0,C#)中实现ScatterViewItems的程序化翻译。例如。由事件/命令/消息初始化的翻译。由于这些项本身可以位于任何位置,并且可以在
运行时添加/删除,因此它们不能在XAML中"预定义",因此将以编程方式添加和删除。翻译的端点也可能在运行时也会发生变化。


 


在MVVM中是否可以这样做?由于动画通常是在视图中发生的事情,但是为这些动画提供动力的数据很可能会在ViewModel中"生存"。 


 


我使用DispatchTimer来查看PointAnimations,RenderTransforms和'pseudo'动画以更新我的ScatterViewItem.Center属性,但无济于事。经过漫长而乏味的搜索,我在WPF中接近实际动画的最接近的是跟随
。虽然这种方法适用于不透明度和值等属性,但我并不能直接看到它允许我在ScatterView区域上设置项目位置的动画(如文章中的项目包含在自定义UserControl中),
也不是我能看到如何为多个对象启用此类行为。


 


我将尝试使用以下
图片。 


 


第一张图片显示"开始"按钮在这种情况下,Surface上有9个项目(ScatterView和ScatterViewItems),还有2个按钮(不一定是ScatterView的一部分)。这些按钮上的文字定义了他们将触发的动作类型。 


在第二张图片中:如果有人点击"绿色"按钮。按钮,绿色方块,绿色圆圈和绿色三角形将朝向"绿色"的附近移动。按钮。


第三张图片中显示:如果有人点击"Cirlce"按钮。按钮,循环项目将克隆自己并将此克隆版本(不透明度0.5)发送到按钮,通过线/渐变漩涡连接原始和克隆。


我已经看到了
example


I'm trying to realize programmatic translations of ScatterViewItems in Microsoft Surface (WPF, .NET 4.0, C#). E.g. translations that are initialized by an Event/Command/Message. As these items themselves can be at any location and can be added/deleted at runtime, they cannot be 'predefined' in the XAML and thus would be added and deleted programmatically. The endpoints of the translations might be changed as well during runtime.

Is such a thing possible within MVVM? As animations typically are something that happens in the View, but the data that powers these animations will most likely 'live' in the ViewModel. 

I've looked at PointAnimations, RenderTransforms and 'pseudo' animations using a DispatchTimer to update my ScatterViewItem.Center property, to no avail. After a long and tedious search, the closest I got to actual animations in WPF was by following anarticle by Josh Twist. Although this approach works fine for properties like Opacity and Value, I don't immedeatly see it allowing me to animate an item's position over the ScatterView area (as in the article the item is enclosed in a custom UserControl), nor do I see how I could enable such behaviour for multiple objects.

I'll try to illustrate my idea using the following pictures

The first image shows the "start" situation, there are 9 items laid out on the Surface (ScatterView with ScatterViewItems) and there are 2 buttons (not necessarily part of the ScatterView). The text on these buttons defines what kind of action they will trigger. 

In the second picture: If one clicks the "Green" button, the green square, the green circle and the green triangle would move towards the vicinity of the "Green" button.

Shown in the third picture: If one clicks the "Cirlce" button, the circular items would clone themselves and send this cloned version (opacity 0.5) towards the button, connecting both the original and the clone by a line/gradient swirl.

I already saw an example of connected ScatterViewItems by Bart Roosendaal (from Sevensteps), which already contains some of the things I want to do. But I'm stuck at getting them to animate to new positions, does anyone have any experience with this?

解决方案


这篇关于在MVVM Light上下文中以编程方式Animate(Translate)ScatterViewItem的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 11:09