.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:Class="Rapid.Sketch.Plugin.UI.AddSectionBarDlg"
        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模式确实可以实现界面布局和核心业务逻辑分离，甚至把不同层的功能分给不同水平的程序员来实现。