使用MVVM和WPF实现逼真的可视化效果

Question

我目前需要创建一个轮渡系统的可视化表示，以显示实际的轮渡，它们在海上的位置和他们的货物状态。渡轮上有卡车，卡车上有小汽车。我需要显示实际的卡车和它们在甲板上的xy位置。当渡轮装载时，卡车的位置会频繁更新，因此看起来很有活力。此外，我需要显示卡车上的实际汽车。卡车、汽车和渡轮也有一些状态需要展示。因此，我有一个层次结构的数据，我需要以一种相当现实的方式可视化。

在WPF中实现这类东西的好方法是什么？我是否应该使用带有一个TreeView控件的MVVM，并为海运、渡轮、卡车和汽车创建一个HierarchicalDataTemplates，为TreeView创建一个ControlTemplate？或者我应该更好地使用UserControls，并在代码中组合和更新它们，而不是将数据绑定到ViewModel的可观察集合。你有这方面的经验吗？你会怎么做呢？你能画出类/控制设置的草图吗？

Answer 1

我建议你做一个“无外观”的控件，而不是做用户控件。通常，我使用用户控件作为我的无外观控件的粘合剂/容器。无外观控件的一个示例是Button类。它包含一个默认样式，在Blend中，您可以随意修改样式。它还支持可视化状态管理器，因此当状态发生变化时，您可以更改演示文稿的外观。您可以将无外观控件的代码隐藏在迷你ViewModel中。在这里，可以混合一些表示内容和你的域类。

如果您遵循相同的设计，则可以创建一个Ferry lookless控件。这个控件将有一组它自己的依赖属性(可能监听DP的OnChange )。

您的渡轮控制可能有一个称为“卡车”的ObservableCollection DP。

然后在您的Themes\generic.xaml中，为您的Ferry控件创建一个默认样式。您的默认样式可能具有带有ItemsSource={TemplateBinding Trucks}的ItemsControl。ItemsControl面板模板可以是您自己的自定义面板，用于安排卡车，也可以使用画布。对于ItemsControl items模板，您将拥有如下内容：

<DataTemplate>
     <mynamespace:TruckControl/>
</DataTemplate>

你的卡车控件，也将是一个没有外观的控件，它有自己的默认样式，而且它的数据上下文已经设置好了，所以你可以直接做{Binding Path=xyz}。你的卡车控件还可以设置它的Canvas.Left/Top (如果你选择在以前的items control..or中使用画布，如果你为它做了一个自定义面板，它可能根本不会设置它的位置)，或者渲染变换，以将它放在正确的X，Y。你也可以使用卡车模板中的items控件来渲染汽车，其方式与在渡轮控件中渲染卡车的方式相同。此外，还可以为VisualStateManager创建状态，使其完全混合可支持。因此，如果一辆卡车进入“问题状态”，例如，你可以很容易地在blend中设置该状态的样式，使其闪烁红色。

我知道这听起来很难消化，但最终拥有支持MVVM模型的样式控件将使您的生活变得轻松1000000倍。

我建议研究微软的silverlight工具包，以便更好地了解如何实现无外观控件之类的功能。试着看一个简单的控件，比如DatePicker ( http://silverlight.codeplex.com/SourceControl/changeset/view/25992# )，需要注意的一点是忽略DatePicker.xaml文件(它只是放在generic.xaml中的一个镜像，如果你只是删除它，不会发生什么坏事)。

您应该密切关注的事情是：

1.)类的属性。这些帮助Blend知道如何处理您的控制。

2.)OnApplyTemplate覆盖。这是您可以从模板中提取特定元素的地方。它们被称为" parts“，您将在Blend中看到parts选项卡。#1中的属性可以定义模板中的“部件”是什么，以及它们应该是什么类型。

3.)DefaultStyleKey = typeof(...)在构造函数中。这将告诉Silverlight在generic.xaml中使用哪个默认模板

4.)看看Themes\generic.xaml吧。这是一个特殊的硬编码文件位置，用于存储所有默认模板。搜索DatePicker样式，您就会得到这个想法:)

祝好运!

Answer 2

我只是想让你知道，我是如何实现它的。事实证明，根本没有必要为此编写自定义控件或UserControls。我所做的一切，就是为汽车、轮船、渡轮、卡车等ViewModels写数据模板。例如，FerryViewModel的数据模板包含一个带有类型为Canvas的ItemsPanel的ItemsControl (为了能够定位卡车)和一个作为TruckViewModel的datatemplate的ItemTemplate。一种非常简单快速的方法。

Answer 3

我建议用一个用户控件来处理所有的绘图。否则你可能会迷失对象的层次结构。汽车、卡车和渡轮上的人说，如果增加另一个项目，也会变得更容易。

如果你的模型是分层的，那么你可以把顶层传递给控件，然后让控件自己排序。

MVVM对于现有的控件工作得很好，但是现有的WPF控件只有在有一个与您需要的控件接近的情况下才能工作，并且经过一些调整就可以工作。我想不出在WPF中有什么标准控件能接近你的需要，所以是时候写一个新的控件了。