知識星球
之前時間一直在使用Caliburn.Micro這種應用了MVVM樣式的WPF框架做開發，是時候總結一下了。
Caliburn.Micro(https://blog.csdn.net/lzuacm/article/details/78886436)是一個輕量級的WPF框架，簡化了WPF中的不少用法，推薦做WPF開發時優先使用。
真正快速而熟練地掌握一門技術就可以嘗試著用最快的速度去構建一個玩具專案(Toy project)，然後不斷地最佳化、重構之。比如本文將介紹如何使用Caliburn.Micro v3.2開發出一個簡單的計算器，裡面用到了C#中的async非同步技術，Caliburn.Micro中的Conductor等等~
>>>1.在VS中建立WPF專案<<<
>>>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等等)
>>>3.框架搭建
-
刪除專案根目錄下的MainWindow.xaml
-
按下圖調整 App.xaml
刪除陳述句StartupUri=”MainWindow.xmal”。
- 填充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();
}
}
}
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。
>>>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" Width="240">
<StackPanel Background="Beige">
<StackPanel Orientation="Horizontal">
<Label Margin="10"
Target="{Binding ElementName=left}">
Operand _1:
Label><TextBox Margin=“10”
Width=“72”
x:Name=“left”/>
StackPanel>
<StackPanel Orientation=“Horizontal”>
<Label Margin=“10”
Target=“{Binding ElementName=right}”>
Operand _2:
Label>
<TextBox Margin=“10”
Width=“72”
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”
Width=“72”
Text =“{Binding Path=Result, StringFormat={}{0:F4}}” IsReadOnly=“True” />
StackPanel>
StackPanel>
Window>
說明：對運算元Operand _1和Operand _2，按Alt鍵+數字可以選中該處，這是WPF的一個特殊用法。由於計算結果不希望被修改，於是加上了屬性IsReadOnly="True"。
>>>5.設計並系結事件
由於暫時只打算實現+, -, *, /四種操作，於是我們只需建立相應的4個函式即可，由於除數是0這個操作不允許，於是需再加個判斷函式CanDivide。
Caliburn.Micro中系結事件的寫法是:
cal:Message.Attach="[Event E]=[Action A]"
(E是操作，比如Click, MouseDown, KeyDown等等，A是ViewModel中具體的函式。)
向ShellViewModel中加入事件中要做的事，此時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();
}
}
public bool CanDivide(double left, double right)
{
return right != 0;
}
public async void Divide(double left, double right)
{
Thread.Sleep(600);
if (CanDivide(left, right) == true)
Result = left / right;
else MessageBox.Show("Divider cannot be zero.", "Warning", MessageBoxButton.OK, MessageBoxImage.Warning);
}
public async void Plus(double left, double right)
{
Result = left + right;
}
public async void Minus(double left, double right)
{
Result = left - right;
}
public async void Multipy(double left, double right)
{
Result = left * right;
}
}
}此時計算器的功能已基本完成，但我們可以對ViewModel進行適當的調整：
1.建立新的ViewModel – CalculatorViewModel，將原來的ShellViewModel中具體的計算邏輯移入到CalculatorViewModel中；
2.此時讓ShellViewModel繼承Conductor