C# WPF MVVM 实战 – 4 - 善用 IValueConverter

时间:2022-05-27 08:04:46

IValueConverter,做 WPF 的都应该接触过,把值换成 Visibility 、Margin 等等是最常见的例子,也有很多很好的博文解释过用法。本文只是解释一下,MVVM 中一些情景。

我遇到过一个用例,做些简单的数据可视化。要求把 enum 换成图片。

MVVM 模式下,是通过 ViewModel 把业务类 Model 暴露给 View,用绑定完成 ViewModel 和 View 的连接。这样的话,Model 内的 enum 直接绑到 View 时候,视图显示了 enum 值 ToString() 的结果。

用个真实例子说明。为代码更简单,以下没有用任何其他第三方控件或类库。

看看 Model 是怎样的:

using System.ComponentModel;

namespace Lepton_Practical_MVVM_4 {

public class MyModel : INotifyPropertyChanged {

#region Domain Properties private long _ID;
///<summary>/// DB Key
///</summary>public virtual long ID {
get {
return _ID;
}
set {
_ID
= value;
if (PropertyChanged !=null)
PropertyChanged(
this, new PropertyChangedEventArgs("ID"));
}
}

private MyStatusEnum _Status;
///<summary>/// Document Status
///</summary>public virtual MyStatusEnum Status {
get {
return _Status;
}
set {
_Status
= value;
if (PropertyChanged !=null)
PropertyChanged(
this, new PropertyChangedEventArgs("Status"));
}
}

private string _DocNo;
///<summary>/// Document number
///</summary>public virtual string DocNo {
get {
return _DocNo;
}
set {
_DocNo
= value;
if (PropertyChanged !=null)
PropertyChanged(
this, new PropertyChangedEventArgs("DocNo"));
}
}


#endregion

     #region INotifyPropertyChanged Members

     public virtual event PropertyChangedEventHandler PropertyChanged;
#endregion
}
}

MyStatusEnum:

namespace Lepton_Practical_MVVM_4 {
public enum MyStatusEnum {
OK
=0,
Cancel
=1,
Delete
=2
}
}

这个业务类,将使用 ORM, NHibernate 做 persistence,这个样子加上 XXX.hbm.xml 映射能直接调用 session.Save() 来储存的了。enum 会自动储存为 int。数据层不写出来了。使用其他 ORM 也大同小异。

但直接绑定后,这样子不太 User-Friendly,也不够华丽。

C# WPF MVVM 实战 – 4 - 善用 IValueConverter

这用例是做可视化,把状态换成图片。

要绑定图片,绑定的话,最直观的想法,改 Model。Model 内有图片Source 属性,好像就什么都解决了。

 

using System.ComponentModel;
using System.Windows.Media;
using System;
using System.Windows.Media.Imaging;

namespace Lepton_Practical_MVVM_4 {

publicclass MyModel : INotifyPropertyChanged {

#region Domain Properties private long _ID;
///<summary>/// DB Key
///</summary>

     public virtual long ID { get {
return _ID;
}
set {
_ID
= value;
if (PropertyChanged !=null)
PropertyChanged(
this, new PropertyChangedEventArgs("ID"));
}
}

private MyStatusEnum _Status;
///<summary>
     /// Status
///</summary>
     public virtual MyStatusEnum Status {
get {
return _Status;
}
set {
_Status
= value;
if (PropertyChanged !=null)
PropertyChanged(
this, new PropertyChangedEventArgs("Status"));
}
}

private string _DocNo;
///<summary>
     /// Document Number
///</summary>
    
public virtual string DocNo {
get {
return _DocNo;
}
set {
_DocNo
= value;
if (PropertyChanged !=null)
PropertyChanged(
this, new PropertyChangedEventArgs("DocNo"));
}
}


#endregion
     public virtual ImageSource StatusImage { get {
switch (Status) {
case MyStatusEnum.OK:
return new BitmapImage(new Uri("pack://application:,,,/Img/Check.png"));
case MyStatusEnum.Cancel:
return new BitmapImage(new Uri("pack://application:,,,/Img/Cancel.png"));
case MyStatusEnum.Delete:
return new BitmapImage(new Uri("pack://application:,,,/Img/Delete.png"));
default:
throw new InvalidEnumArgumentException("MyStatusEnum out of expected range");
}
}
}

#region INotifyPropertyChanged Members
     public virtual event PropertyChangedEventHandler PropertyChanged;
#endregion
}
}

XAML:

 

<Window x:Class="Lepton_Practical_MVVM_4.MainWindow"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
Title
="Lepton Practical MVVM 4 IConverter"
Height
="350" Width="525"><Grid><ListView ItemsSource="{Binding Path=MyItems}"><ListView.View><GridView><GridViewColumn DisplayMemberBinding="{Binding Path=Status}" Header="状态" Width="50"/><GridViewColumn DisplayMemberBinding="{Binding Path=DocNo}" Header="单号" Width="100"/><GridViewColumn Header="图片"><GridViewColumn.CellTemplate><DataTemplate><Image Source="{Binding Path=StatusImage}" Width="20" Height="20"/></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn></GridView></ListView.View></ListView></Grid></Window>

 

效果:

C# WPF MVVM 实战 – 4 - 善用 IValueConverter

StatusImage 这个字段,不需要映射不用保存到数据库,貌似没问题。

但一旦运行时 Status 值变化,问题就出来了。

运行时,MyStatusEnum 值如果动态改,你会发现,状态栏的值会变,图片却不变。问题原因很明显,值变化发生在 Status,由它发出 PropertyChanged 通知,通知 Status 变了,不是 StatusImage变。点击这里下载这版本的代码

然后又想办法,或许在 Status 变动时同时发Status 和 StatusImage 两个变化通知?又或许 PropertyChanged(null) 全部刷新?这不是某某方式能不能做到的问题,开发嘛,再乱再差代码,有时候也能做到用例要求。

以上是真实项目中我见过的修改过程,这做法当然被推翻,原因如下:

  1. Model 层为了 View 层的显示,添加了代码
    Model 类,为显示方式而改动(添加了一个不做映射的只读属性),是设计上的错误。图片选择的代码也在 Model 内(见 StatusImage 属性 get 内的 switch),也是设计错误。
  2. 图片与 Model 捆绑了在一起
    如果改图片,需要改 Model 属性的 switch 内的 URI。万一,我要保留这图片这显示方式在这视图,但在另一个界面显示另一张图,比如我有另外一个视图需要把 Delete 和 Cancel 显示为同一张图,判断就不是那么简单。可能需要用到视图的引用,或者格外加参数、属性等等来判断显示哪个。

正确做法,是用 IValueConverter 做转换,IValueConverter 是显示层(View)的。需要不同逻辑的话,每个界面用自己的 Converter,逻辑独立,图片只跟 View 捆绑,ViewModel 和 Model 不需理会。

IValueConverter 写法很简单,在其他博文已经多次介绍。这里不重复了。用它的时候,绑定的是业务数据的字段,当它变化,图片自然会更新了。点击这里下载使用了 IValueConverter 的完整代码

使用 MVVM 模式,一旦牵涉到改 Model 或 ViewModel,请三思。只为显示的话,几乎可以马上肯定,不该做在 Model 和 ViewModel。反过来,业务逻辑出现在 View 也是不正确。破坏了设计,自然享受不了良好设计的优势。

我在这群里,欢迎加入交流:
C# WPF MVVM 实战 – 4 - 善用 IValueConverter开发板玩家群 578649319
C# WPF MVVM 实战 – 4 - 善用 IValueConverter硬件创客 (10105555)