![v2-20f9d9804928ab0474d717824e5b328c_1440w.jpg?source=172ae18b](http://img-01.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-20f9d9804928ab0474d717824e5b328c_1440w.jpg?source=172ae18b)
从0到1:使用Caliburn.Micro(WPF和MVVM)开发简单的计算器
这段时间一直在使用Caliburn.Micro这种应用了MVVM模式的WPF框架做开发,是时候总结一下了。
真正快速而熟练地掌握一门技术就可以尝试着用最快的速度去构建一个玩具项目(toy project),然后不断地优化、重构之。比如本文将介绍如何使用Caliburn.Micro v3.2开发出一个简单的计算器,里面用到了C#中的async异步技术,Caliburn.Micro中的Conductor等等~
Step 1: 在VS中创建WPF项目
![v2-1fb2dad3678d899784f27ecdcdd90474_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-1fb2dad3678d899784f27ecdcdd90474_b.jpg)
Step 2: 使用NuGet包管理工具为当前项目安装Caliburn.Micro
对于Caliburn.Micro 1.x和2.x版,只能使用.dll,需手动给项目加Reference。而3.0以后的版本可使用NuGet包管理工具来管理,安装和卸载既方便又彻底,推荐使用。
![v2-225f23614dbca3af9b5ea0015aead65e_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-225f23614dbca3af9b5ea0015aead65e_b.jpg)
Step 3: 框架搭建
- 删除项目根目录下的MainWindow.xaml
- 按下图调整App.xaml
删除语句StartupUri="MainWindow.xmal"。
![v2-7b87f3a3f3b1166d9e4334f92cc9760e_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-7b87f3a3f3b1166d9e4334f92cc9760e_b.jpg)
3.填充Application.Resources
<Application.Resources>
4. 创建Bootstrapper类,顾名思义Bootstrapper为启动的意思,Bootstrapper类即为ViewModel执行的入口。
然后让其继承自BootstrapperBase类,并加上构造函数,另外再重写函数OnStartup即可。
using
5. 在项目目录下新建Models, ViewModels, Views这3个文件夹
在ViewModel文件夹中添加ShellViewModel.cs,并创建Left, Right和Result这3个属性。
需要注意的是 ShellViewModel.cs需要继承类 Screen 和 INotifyPropertyChanged (用于感知并同步所绑定属性的变化),ShellViewModel具体代码为:
using
说明: 最开始布局xaml时,设计位置时采用的是左(operand 1), 中(operand 2), 右(result),于是属性值使用了Left, Right和Result,如果想修改属性名,建议改为FirstOperand, SecondOperand和Result。
Step 4: 设计XAML并绑定属性
在Views文件夹中创建Window,命名为ShellView.xaml,在Views文件夹下创建子文件夹Images,用于存放+,-,*,/这4种操作对应的小图标,其具体代码如下:
<Window
说明:对操作数Operand _1和Operand _2,按Alt键+数字可以选中该处,这是WPF的一个特殊用法。由于计算结果不希望被修改,于是加上了属性IsReadOnly="True"。
Step 5: 设计并绑定事件
由于暂时只打算实现+, -, *, /四种操作,于是我们只需创建相应的4个函数即可,由于除数是0这个操作不允许,于是需再加个判断函数CanDivide。
Caliburn.Micro中绑定事件的写法是:
cal:Message.Attach="[Event E]=[Action A]" (E是操作,比如Click, MouseDown, KeyDown等等,A是ViewModel中具体的函数。)
向ShellViewModel中加入事件中要做的事,此时ShellViewModel为:
using
此时计算器的功能已基本完成,但我们可以对ViewModel进行适当的调整:
1.创建新的ViewModel - CalculatorViewModel,将原来的ShellViewModel中具体的计算逻辑移入到CalculatorViewModel中;
2.此时让ShellViewModel继承Conductor<Object>,于是ShellViewModel拥有了管理Screen实例的功能(ViewModel中使用ActivateItem函数,而View中使用X:Name="ActivateItem"标签),其具体代码为:
using
此时,CalculatorViewModel的具体代码为:
using
3 . 对于View,只需把CalculatorViewModel对应的CalculatorView作为ContentControl控件嵌入ShellView即可。此时ShellView的代码调整为:
<Window
另外提一点,向ViewModel A中嵌入ViewModel B,一般来说需要做的操作是:
在A的view中使用ContentControl,绑定B的ViewModel只需使用语句cal:View.Model="{Binding BViewModel}"即可,而B的view是UserControl就可以啦。
此时CalculatorView是一个UserControl,其代码为:
<UserControl
好啦,就酱,由于本例中逻辑并不复杂,Model暂时用不上,对于复杂一点的项目,Model主要负责数据的读取,如文件操作、数据库操作、service调用等,以后有机会举例具体来说。
如果需要持久化(persistent),则还需给给每对M-VM(Model和ViewModel)加入State,这个实际工程中也用得特别多。
Step 6: 功能举例
Calculator主页:
![v2-fea4d7c7cc8687f578c6d006ad3ecc69_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-fea4d7c7cc8687f578c6d006ad3ecc69_b.jpg)
点击按钮“ShowCalculator”即可看到具体的计算器~
乘法举例:
![v2-67faaafb13bd27b15b8de0aa5e3c3abf_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-67faaafb13bd27b15b8de0aa5e3c3abf_b.jpg)
除法举例:
![v2-7e6341527b30c235da946c75272f4927_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=7186591c-142e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-7e6341527b30c235da946c75272f4927_b.jpg)
最后附上代码:
CaliburnMicro-Calculator: A simple Calculator using Caliburn.Micro
https://github.com/yanglr/CaliburnMicro-Calculator,
欢迎fork和star,如有改进意见欢迎提交pull request~
本文原载于CSDN专栏- Caliburn.Micro深入研究系列,https://blog.csdn.net/lzuacm/article/details/80559517。
原创不易,你的支持和认可将让我写出更好的内容,更多.干.货 可关|注|公|号「大白技术控」,持续输出优质文章~