.NET6:开发基于WPF的摩登三维工业软件(8)-MVVM

基于WPF开发界面的一个很大优势是可以方便地基于MVVM设计模式开发应用。本文从应用的角度基于MVVM实现参数化管材的创建界面。

1 MVVM

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。网上有若干对MVVM的介绍，本文在此不做过多的赘述，本文将从具体的是应用案例让大家来体会MVVM的优势，即实现UI部分的代码与核心业务逻辑、数据模型分离，达到高耦合低内聚的软件架构目标。

来自网上的截图

2 界面设计

我们希望打开一个对话框，在其中可以显示管材模型；修改管材的参数能够实时看到管材形状的变化。如下图所示：

其中管子的外径由管子的内径加上管子壁厚，不需要用户输入。
当然也可以实现用户修改外径，减掉管壁来得到内径。这个可以根据业务需要来调整。

3 程序设计

基于MVVM设计模式，我们实现这样的类设计：

其中：

• AddSectionBarDlg

基于XAML实现的UI布局相关代码，即View层；

• SectionBarVM

实现ViewModel层，即View和Model的桥梁，业务逻辑检查，比如半径不能小于0，壁厚不能小于0等。

• ShapeElement

基于AnyCAD的数据存储类ShapeElement实现Model层。

4 程序实现

我们采用自底向上的实现顺序，逐步实现Model、ViewModel和View。

4.1 Model实现

由于是基于AnyCAD内置的组件，可以直接略过。

ShapeElement 可以用来保存TopoShape对象外，可以保存用户自定义的参数。比如管材的长度、内径、厚度等。重点关注以下方法：

//设置参数void SetParameter (String name, ParameterValue val);//查找参数ParameterValue 	FindParameter (String name);

4.2 ViewModel实现

4.2.1 更新界面的能力

SectionBarVM从INotifyPropertyChanged继承，获得PropertyChanged的能力，即通知View层说：
“嗨，兄弟，该更新界面啦！"

//SectionBarVM.cs    public class SectionBarVM : INotifyPropertyChanged    {        public event PropertyChangedEventHandler? PropertyChanged;        public void OnPropertyChanged(string e)        {            if (PropertyChanged != null)                PropertyChanged(this, new PropertyChangedEventArgs(e));        }        ...    }

4.2.2 更新数据能力

基于属性机制实现。当外部更新，会调用属性set方法的时候，对数据进行合法检查。
若符合要求，更新Model，并调用OnPropertyChanged发起通知。

//SectionBarVM.cs        private ShapeElement mModel;        public SectionBarVM(ShapeElement model)        {            mModel = model;        }        public static string NAME = "Name";        public string Name {            get { return mModel.GetName(); }            set {                 if(value != "")                {                    mModel.SetName(value);                     OnPropertyChanged(NAME);                }                else                {                    throw new ArgumentException("名称不能为空。");                }            }        }

尺寸参数属性实现：

//SectionBarVM.cs        public static string INNER_RADIUS = "InnerRadius";        public static string THICKNESS = "Thickness";        public static string LENGTH = "Length";        public static string OUTTER_RADIUS = "OutterRadius";         public double InnerRadius {             get { return ParameterCast.Cast(mModel.FindParameter(INNER_RADIUS), 100.0); }            set {                if (value > 0)                {                    mModel.SetParameter(INNER_RADIUS, ParameterCreator.Create(value));                    OnPropertyChanged(INNER_RADIUS);                    OnPropertyChanged(OUTTER_RADIUS);                }                else                {                    throw new ArgumentException("半径太小。");                }            }         }        public double Thickness {             get { return ParameterCast.Cast(mModel.FindParameter(THICKNESS), 5.0);  }            set {                 if (value > 0)                {                    mModel.SetParameter(THICKNESS, ParameterCreator.Create(value));                    OnPropertyChanged(THICKNESS);                    OnPropertyChanged(OUTTER_RADIUS);                }                else                {                    throw new ArgumentException("厚度太小。");                }            }         }        public double OutterRadius        {            get { return InnerRadius + Thickness; }        }        public double Length {             get { return ParameterCast.Cast(mModel.FindParameter(LENGTH), 1000.0);  }            set {                 if (value > 0)                {                    mModel.SetParameter(LENGTH, ParameterCreator.Create(value));                    OnPropertyChanged(LENGTH);                }                else                {                    throw new ArgumentException("长度太小。");                }            }         }

这里需要注意的是OutterRadius的实现。由于OutterRadius依赖了InnerRadius和Thickness属性，当被依赖的属性修改后，也需要触发依赖属性的消息。否则界面OutterRadius的值不会再更新。

4.3 View实现

4.3.1 界面布局

增加一个窗口AddSectionBarDlg.xaml，按照设计要求进行布局。

• 数据双向绑定

Path="InnerRadius"将会跟SectionBarVM的InnerRadius绑定。当UI修改的时候会调用InnerRadius set; 当界面初始化和数据更新的时候，UI会调用InnerRadius get。

    <TextBox Width="150">        <Binding Path="InnerRadius">            <Binding.ValidationRules>                <ExceptionValidationRule/>            </Binding.ValidationRules>        </Binding>    </TextBox>

• 数据单向绑定

Mode="OneWay" 表示UI只会从ViewModel获取数据。

    <TextBox Width="150" IsEnabled="False">        <Binding Path="OutterRadius" Mode="OneWay">        </Binding>    </TextBox>

XAML完整代码：

//AddSectionBarDlg.xaml<Window x:        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:local="clr-namespace:Rapid.Sketch.Plugin.UI"        xmlns:anycad="clr-namespace:AnyCAD.WPF;assembly=AnyCAD.WPF.NET6"        mc:Ignorable="d"        Title="创建型材" Height="450" Width="650" ResizeMode="NoResize" Icon="/Rapid.Common.Res;component/Image/SectionBar.png">    <Grid Margin="7">        <Grid.ColumnDefinitions>            <ColumnDefinition Width="400"></ColumnDefinition>            <ColumnDefinition Width="Auto"></ColumnDefinition>        </Grid.ColumnDefinitions>                <anycad:RenderControl Name="mView3d"  Grid.Column="0" ViewerReady="MView3d_ViewerReady"/>        <Grid Grid.Column="1" Margin="7">            <Grid.RowDefinitions>                <RowDefinition Height="360"></RowDefinition>                <RowDefinition Height="28"></RowDefinition>            </Grid.RowDefinitions>                   <StackPanel Grid.Row="0">                <StackPanel Orientation="Horizontal">                    <Label Width="60" Content="名称："></Label>                    <TextBox Width="150">                        <Binding Path="Name">                        </Binding>                    </TextBox>                </StackPanel>                <StackPanel Orientation="Horizontal" Margin="0,7,0,0">                    <Label Width="60" Content="内径："></Label>                    <TextBox Width="150">                        <Binding Path="InnerRadius">                            <Binding.ValidationRules>                                <ExceptionValidationRule/>                            </Binding.ValidationRules>                        </Binding>                    </TextBox>                </StackPanel>                <StackPanel Orientation="Horizontal" Margin="0,7,0,0">                    <Label Width="60" Content="厚度："></Label>                    <TextBox Width="150">                        <Binding Path="Thickness">                            <Binding.ValidationRules>                                <ExceptionValidationRule/>                            </Binding.ValidationRules>                        </Binding>                    </TextBox>                </StackPanel>                <StackPanel Orientation="Horizontal" Margin="0,7,0,0">                    <Label Width="60" Content="外径："></Label>                    <TextBox Width="150" IsEnabled="False">                        <Binding Path="OutterRadius" Mode="OneWay">                        </Binding>                    </TextBox>                </StackPanel>                                <StackPanel Orientation="Horizontal" Margin="0,7,0,0">                    <Label Width="60" Content="长度："></Label>                    <TextBox Width="150">                        <Binding Path="Length">                            <Binding.ValidationRules>                                <ExceptionValidationRule/>                            </Binding.ValidationRules>                        </Binding>                    </TextBox>                </StackPanel>            </StackPanel>            <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right" Margin="0,0,0,7">                <Button Content="取消" Width="60" Margin="7,0,7,0"></Button>                <Button Content="确定" Width="60" Margin="7,0,7,0"></Button>            </StackPanel>        </Grid>    </Grid></Window>

4.3.2 View与ViewModel绑定

把ViewModel对象设置给Window的DataContext属性，即可实现UI与ViewModel的关联。

另外我们希望更改数据后也能更新三维窗口，在这里我们先用比较笨的办法实现，即硬编码实现参数与三维模型的联动。详见SbVM_PropertyChanged方法的实现。

    /// <summary>    /// AddSectionBarDlg.xaml 的交互逻辑    /// </summary>    public partial class AddSectionBarDlg : Window    {        SectionBarVM m_Bar;        public AddSectionBarDlg(SectionBarVM sbVM)        {            InitializeComponent();            this.Owner = App.Current.MainWindow;            this.DataContext = sbVM;            sbVM.PropertyChanged += SbVM_PropertyChanged;            m_Bar = sbVM;        }        private void SbVM_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)        {           if(e.PropertyName == SectionBarVM.THICKNESS ||                e.PropertyName == SectionBarVM.INNER_RADIUS ||                e.PropertyName == SectionBarVM.LENGTH)            {                mView3d.View3D.ClearAll();                var shape = m_Bar.CreateShape();                mView3d.ShowShape(shape, ColorTable.LightGrey);                mView3d.View3D.ZoomAll(1.6f);            }        }        private void MView3d_ViewerReady()        {            mView3d.View3D.SetBackgroundColor(30.0f / 255, 30.0f / 255, 30.0f / 255, 0);            var shape = m_Bar.CreateShape();            mView3d.ShowShape(shape, ColorTable.LightGrey);            mView3d.View3D.ZoomAll(1.6f);        }    }

5 功能集成

暂时在草图项目中增加一个按钮，可以调用对话框：

    <Fluent:RibbonGroupBox Header="型材" IsLauncherVisible="False" Margin="7,0,0,0">        <Fluent:Button Header="管材" Icon="/Rapid.Common.Res;component/Image/SectionBar.png" Size="Large" Command="{x:Static local:SketchRibbonTab.ExecuteCommand}"                                   CommandParameter="pipeTube" Margin="0,0,7,0"/>    </Fluent:RibbonGroupBox>

    case "pipeTube":        {            //临时创建一个对象            var se = new ShapeElement();            se.SetName("管子");            var dlg = new AddSectionBarDlg(new SectionBarVM(se));            dlg.ShowDialog();        }

运行效果：

6 总结

从实现代码的结构来看，使用MVVM设计模式确实可以让代码层次更清楚，界面类不再臃肿不堪。Microsoft设计XAML之初的一个目标是希望做UI布局的UX与写代码逻辑的开发能够分工协作，甚至为此开发了独立的设计工具Blend给UX使用，以让开发能够直接重用UX实现的XAML……
虽然现实并没有想象的那么美好，但基于MVVM模式确实可以实现界面布局和核心业务逻辑分离，甚至把不同层的功能分给不同水平的程序员来实现。