Silverlight MVVM混淆:基于状态更新图像

我正在开发一个Silverlight应用程序,我试图坚持MVVM主体,但是我遇到了一些问题,根据ViewModel中属性的状态更改了图像的来源。 出于所有意图和目的,您可以将我正在实现的function视为音频应用的播放/暂停按钮。 当处于“播放”模式时,ViewModel中的IsActive为true,并且应显示按钮上的“Pause.png”图像。 暂停时,ViewModel中的IsActive为false,按钮上显示“Play.png”。 当然,当鼠标hover在按钮上时,还有两个额外的图像可以处理。

我以为我可以使用样式触发器 ,但显然它们在Silverlight中不受支持。 我一直在审查一个论坛post,其中有一个类似于我的问题,建议使用VisualStateManager 。 虽然这可能有助于更改hover/正常状态的图像,但缺少(或者我不理解)的部分是通过视图模型设置状态的方式。 该post似乎仅适用于事件而不是视图模型的属性。 话虽如此,我也没有成功完成正常/hover的影响。

下面是我的Silverlight 4 XAML。 还应该注意我正在使用MVVM Light。

                                     

使用视图模型确定的状态更新按钮上的图像的正确方法是什么?

一种简单的方法是将VM上的IsActive和IsNotActive布尔属性绑定到Button内容中的两个Image控件上的Visibility。

当然,您必须使用BooleanToVisiblityConverter。

第二个想法:你可以将IsActive绑定到按钮上的IsEnabled并使Style显示正确的图像。 不确定您在Silverlight中提到的限制是否可能会阻止此操作。

我们有一些自定义转换器将布尔值(和其他类型)更改为特定图像。 这样我们就可以将视图/模型尽可能分开。

转换器很容易编写,网上有很多例子。

所以它在xaml中就像这样:

  

通过同事的建议,因为我已经在使用MVVM Light ,所以我能够利用EventToCommand在视图模型中处理鼠标输入和鼠标离开事件,而不是依靠内置的VisualStateManager来处理这些事件。 我还将Button更改为ToggleButton。 这允许我利用已检查和未检查的状态来处理是否显示播放或暂停按钮。 由于状态是由视图模型控制的,因此我可以通过将ToggleButton的Visibility属性绑定到检查状态的视图模型上的属性来确定要显示的图像。 我更新的XAML如下所示: