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

来源:https://www.cnblogs.com/enjoy233/archive/2019/03/24/10586651.html
-Advertisement-
Play Games

從0到1：使用Caliburn.Micro(WPF和MVVM)開發簡單的計算器 之前時間一直在使用Caliburn.Micro這種應用了MVVM模式的WPF框架做開發，是時候總結一下了。 Caliburn.Micro(Caliburn.Micro框架概述 https://blog.csdn.net/ ...


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

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

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: 框架搭建

  1. 刪除項目根目錄下的MainWindow.xaml

  2. 按下圖調整App.xaml
    刪除語句StartupUri="MainWindow.xmal"。
    config1

  3. 填充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" 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，這個實際工程中也用得特別多。

Part 6: 功能舉例

Calculator主頁：
Main Page

點擊按鈕“ShowCalculator”即可看到具體的計算器~

乘法舉例：
Multiply

除法舉例：
Divide

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 從零開始的Python學習Episode 23——進程
    恢復內容開始 進程 由於GIL的存在，python中的多線程其實並不是真正的多線程，如果想要充分地使用多核CPU的資源，在python中大部分情況需要使用多進程。Python提供了非常好用的多進程包multiprocessing，只需要定義一個函數，Python會完成其他所有事情。藉助這個包，可以輕 ...
  • C語言數據結構基礎學習筆記——棧和隊列
    之前我們學過了普通的線性表，接下來我們來瞭解一下兩種特殊的線性表——棧和隊列。 棧是只允許在一端進行插入或刪除的線性表。 棧的順序存儲結構也叫作順序棧，對於棧頂指針top，當棧為空棧時，top=-1；當棧為滿棧時，top=MaxSize-1。順序棧的定義為： 順序棧的入棧操作為： 順序棧的出棧操作為 ...
  • Python中的編碼問題，中文亂碼問題
    1、如果不聲明編碼，則中文會報錯，即使是註釋也會報錯。只要寫中文，必須加一句：# -- coding:utf-8 --。原因：答案在PEP-0263裡面有所提及，那就是Emacs等編輯器使用這種方式進行編碼聲明。 2、文檔編碼是一種告訴程式——無論是電腦的操作系統還是Python 代碼——讀取文檔 ...
  • Python3.x標準模塊庫目錄
    文本 string：通用字元串操作 re：正則表達式操作 difflib：差異計算工具 textwrap：文本填充 unicodedata：Unicode字元資料庫 stringprep：互聯網字元串準備工具 readline：GNU按行讀取介面 rlcompleter：GNU按行讀取的實現函數 二 ...
  • SpringBoot 2.0 更優雅的配置註入
    application.properties ...
  • 數組作為方法參數傳遞
    數組作為方法參數傳遞時，傳遞的是數組在記憶體中的地址。因此在方法內部改變數組值也是有效的，會改變實際參數的值。 ...
  • 如果讓你寫一個消息隊列，該如何進行架構設計啊？
    面試題 如果讓你寫一個消息隊列，該如何進行架構設計？說一下你的思路。 面試官心理分析 其實聊到這個問題，一般面試官要考察兩塊： 你有沒有對某一個消息隊列做過較為深入的原理的瞭解，或者從整體瞭解把握住一個消息隊列的架構原理。 看看你的設計能力，給你一個常見的系統，就是消息隊列系統，看看你能不能從全局把 ...
  • [tkinter]為列表框添加滾動條
    為了給列表框配備滾動條，看來很多別人的博客 終於解決了問題 ，現在我總結一下 效果圖 關鍵在標記紅色的兩句，為了讓兩個控制項相互配合，兩個控制項都得設置 lb.config(yscrollcommand=scr.set) 列表框換“視角”後 更新的滾動條狀態scr.config(command=lb.y ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類