从0到1:使用Caliburn.Micro(WPF和MVVM)开发简单的计算器

Caliburn.Micro(Caliburn.Micro框架概述 - https://blog.csdn.net/lzuacm/article/details/78886436) 是一个轻量级的WPF框架,简化了WPF中的不少用法,推荐做WPF开发时优先使用。

真正快速而熟练地掌握一门技术就可以尝试着用最快的速度去构建一个玩具项目(Toy project),然后不断地优化、重构之。比如本文将介绍如何使用Caliburn.Micro v3.2开发出一个简单的计算器,里面用到了C#中的async异步技术,Caliburn.Micro中的Conductor等等~

Step 1: 在VS中创建WPF项目

create_project

Step 2: 使用NuGet包管理工具为当前项目安装Caliburn.Micro
对于Caliburn.Micro 1.x和2.x版,只能使用.dll,需手动给项目加Reference。而3.0以后的版本可使用NuGet包管理工具来管理,安装和卸载既方便又彻底,推荐使用。(ps: NuGet之于Visual Studio(C++, C#等), 犹pip之于Python, npm之于node, maven之于Java, gem之于Ruby等等)

Install CM

Step 3: 框架搭建

删除项目根目录下的MainWindow.xaml

按下图调整App.xaml
删除语句StartupUri="MainWindow.xmal"。

config1

填充Application.Resources

<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary> <local:Bootstrapper x:Key="bootstrapper"/> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>

   4 . 创建Bootstrapper类
然后让其继承自BootstrapperBase类,并加上构造函数,另外再重写函数OnStartup即可。

using System.Windows; using Caliburn.Micro; using CaliburnMicro_Calculator.ViewModels; namespace CaliburnMicro_Calculator { public class Bootstrapper : BootstrapperBase { public Bootstrapper() { Initialize(); } protected override void OnStartup(object obj, StartupEventArgs e) { DisplayRootViewFor<ShellViewModel>(); } } }

   5 . 在项目目录下新建Models, ViewModels, Views这3个文件夹
在ViewModel文件夹中添加ShellViewModel.cs,并创建Left, Right和Result这3个属性。

需要注意的是 ShellViewModel.cs需要继承类 Screen 和 INotifyPropertyChanged (用于感知并同步所绑定属性的变化),ShellViewModel具体代码为:

using System.ComponentModel; using System.Threading; using System.Windows; using System.Windows.Controls; using Caliburn.Micro; namespace CaliburnMicro_Calculator.ViewModels { public class ShellViewModel : Screen, INotifyPropertyChanged { private double _left; private double _right; private double _result; public double Left { get { return _left; } set { _left = value; NotifyOfPropertyChange(); } } public double Right { get { return _right; } set { _right = value; NotifyOfPropertyChange(); } } public double Result { get { return _result; } set { _result = value; NotifyOfPropertyChange(); } } }

说明: 最开始布局xaml时,设计位置时采用的是左(operand 1), 中(operand 2), 右(result),于是属性值使用了Left, Right和Result。

Step 4: 设计XAML并绑定属性
在Views文件夹中创建Window,命名为ShellView.xaml,在Views文件夹下创建子文件夹Images,用于存放+,-,*,/这4种操作对应的小图标,其具体代码如下:

<Window x:Class="CaliburnMicro_Calculator.Views.ShellView" 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:CaliburnMicro_Calculator.Views" xmlns:cal="http://www.caliburnproject.org" mc:Ignorable="d" Title="Calculator" SizeToContent="Height"> <StackPanel Background="Beige"> <StackPanel Orientation="Horizontal"> <Label Margin="10" Target="{Binding ElementName=left}"> Operand _1: </Label> <TextBox Margin="10" x:Name="left"/> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Margin="10" Target="{Binding ElementName=right}"> Operand _2: </Label> <TextBox Margin="10" x:Name="right"/> </StackPanel> <StackPanel Orientation="Horizontal"> <Button Margin="10" x:Name="btnPlus" cal:Message.Attach="[Event Click]=[Action Plus(left.Text, right.Text):result.Text]"> <Image Source="Images/op1.ICO"/> </Button> <Button Margin="10" x:Name="btnMinus" cal:Message.Attach="[Event Click]=[Action Minus(left.Text, right.Text):result.Text]"> <Image Source="Images/op2.ICO"/> </Button> <Button Margin="10" x:Name="btnMultiply" cal:Message.Attach="[Event Click]=[Action Multipy(left.Text, right.Text):result.Text]"> <Image Source="Images/op3.ICO"/> </Button> <Button Margin="10" x:Name="btnDivide" IsEnabled="{Binding Path=CanDivide}" cal:Message.Attach="[Event Click]=[Action Divide(left.Text, right.Text):result.Text]"> <Image Source="Images/op4.ICO"/> </Button> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Margin="10"> Answer: </Label> <TextBox Margin="10" Text ="{Binding Path=Result, StringFormat={}{0:F4}}" IsReadOnly="True" /> </StackPanel> </StackPanel> </Window>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyxsg.html