從0到1：使用Caliburn.Micro(WPF和MVVM)開發簡單的計算器

時間  2019-11-16
標籤 使用 caliburn.micro caliburn micro wpf mvvm 開發 簡單 計算器 简体版
原文   原文鏈接

從0到1：使用Caliburn.Micro(WPF和MVVM)開發簡單的計算器

這段時間一直在使用Caliburn.Micro這種應用了MVVM模式的WPF框架作開發，是時候總結一下了。node

Caliburn.Micro(Caliburn.Micro框架概述 - https://blog.csdn.net/lzuacm/... 是一個輕量級的WPF框架，簡化了WPF中的很多用法，推薦作WPF開發時優先使用。git

真正快速而熟練地掌握一門技術就能夠嘗試着用最快的速度去構建一個玩具項目(Toy project)，而後不斷地優化、重構之。好比本文將介紹如何使用Caliburn.Micro v3.2開發出一個簡單的計算器，裏面用到了C#中的async異步技術，Caliburn.Micro中的Conductor等等~github

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等等)express

Install CM

Step 3: 框架搭建npm

  1. 刪除項目根目錄下的MainWindow.xaml
  2. 按下圖調整App.xaml

刪除語句StartupUri="MainWindow.xmal"。
config1bootstrap

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

   4 . 建立Bootstrapper類
而後讓其繼承自BootstrapperBase類，並加上構造函數，另外再重寫函數OnStartup便可。app

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" 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"。

Step 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<Object>，因而ShellViewModel擁有了管理Screen實例的功能(ViewModel中使用ActivateItem函數，而View中使用X:Name="ActivateItem"標籤)，其具體代碼爲:

using System.ComponentModel;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using Caliburn.Micro;

namespace CaliburnMicro_Calculator.ViewModels
{
    public class ShellViewModel : Conductor<object>
    {
        public ShellViewModel()
        {
        }
        public void ShowCalculator()
        {
            ActivateItem(new CalculatorViewModel());
        }
    }
}

此時，CalculatorViewModel的具體代碼爲：

using System.ComponentModel;
using System.Threading;
using System.Windows;
using Caliburn.Micro;

namespace CaliburnMicro_Calculator.ViewModels
{
    public class CalculatorViewModel: 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 CalculatorViewModel()
        {
        }

        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;
        }
    }
}

  3 . 對於View，只需把CalculatorViewModel對應的CalculatorView做爲ContentControl控件嵌入ShellView便可。此時ShellView的代碼調整爲:

<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">

    <Grid MinHeight="200">
        <Button Content="Show Calculator" x:Name="ShowCalculator" Grid.Row="0"></Button>
        <ContentControl x:Name="ActiveItem"></ContentControl>        
    </Grid>
</Window>

另外提一點，向ViewModel A中嵌入ViewModel B，通常來講須要作的操做是：
在A的view中使用ContentControl，綁定B的ViewModel只需使用語句cal:View.Model="{Binding BViewModel}"便可，而B的view是UserControl就能夠啦。

此時CalculatorView是一個UserControl，其代碼爲:

<UserControl x:Class="CaliburnMicro_Calculator.Views.CalculatorView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:CaliburnMicro_Calculator.Views"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             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" HorizontalAlignment="Center">
            <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}, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" />
        </StackPanel>
    </StackPanel>
</UserControl>

好啦，就醬，因爲本例中邏輯並不複雜，Model暫時用不上，對於複雜一點的項目，Model主要負責數據的讀取，如文件操做、數據庫操做、service調用等，之後有機會舉例具體來講。

若是須要持久化(persistent)，則還需給給每對M-VM(Model和ViewModel)加入State，這個實際工程中也用得特別多。

Step 6: 功能舉例
Calculator主頁：
Main Page

點擊按鈕「ShowCalculator」便可看到具體的計算器~

乘法舉例：
Multiply

除法舉例：
Divide

最後附上代碼：
CaliburnMicro-Calculator: A simple Calculator using Caliburn.Micro
https://github.com/yanglr/Cal...，歡迎fork和star，若有改進意見歡迎提交pull request~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程