wpf 采用MVVM框架简易计算器

最新推荐文章于 2024-05-15 16:13:48 发布

Makayla94

最新推荐文章于 2024-05-15 16:13:48 发布

阅读量1.4k

点赞数 5

分类专栏： WPF 文章标签： wpf c# mvvm devexpress

本文链接：https://blog.csdn.net/weixin_41625668/article/details/122027532

版权

WPF 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

wpf 采用MVVM框架简易计算器

前言
一、准备工作
二、设计界面
三、核心算法
四、数据绑定

项目的下载链接
https://download.csdn.net/download/weixin_41625668/66862348

前言

提示：本项目主要采用WPF MVVM框架，控件采用的是Devexpress

一、准备工作

首先创建一个工程项目

直接选用Devexpress模板，VS会帮大家自动引用一些DEV常见的库

在这里插入图片描述

选择MVVM应用，这样VS会帮我们创建好view，viewmodel
在这里插入图片描述
为了大家更好的体会MVVM，在项目下面，与view和viewmodel平级，建立model文件夹

二、设计界面

在Views—MainView.xaml，可以看到VS自动帮我们已经写好的MainView的Data层，也就是ViewModels—MainViewModel

<UserControl 
    x:Class="Calculator.Views.MainView"
    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:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:ViewModels="clr-namespace:Calculator.ViewModels"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.DataContext>
        <ViewModels:MainViewModel/>
    </UserControl.DataContext>
    <Grid>
    </Grid>
</UserControl>

现在我们就可以根据自己的喜好，设计UI了

我直接仿照win10自带计算机的UI，首先先定义8行，4列


    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>

设计器中的效果
在这里插入图片描述

将Button和TextEdit控件按照相应顺序添加到相应位置，改变一下控件背景色

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock Name="TextShow" Grid.Row="0" Grid.ColumnSpan="4" Background="LightYellow"/>
        <TextBlock Name="Text" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="4"  Background="LightYellow"/>

        <Button Name="Number1" Grid.Column="0" Grid.Row="7" Content="1" FontSize="20"/>
        <Button Name="Number2" Grid.Column="1" Grid.Row="7" Content="2" FontSize="20"/>
        <Button Name="Number3" Grid.Column="2" Grid.Row="7" Content="3" FontSize="20"/>
        <Button Name="Number4" Grid.Column="0" Grid.Row="6" Content="4" FontSize="20"/>
        <Button Name="Number5" Grid.Column="1" Grid.Row="6" Content="5" FontSize="20"/>
        <Button Name="Number6" Grid.Column="2" Grid.Row="6" Content="6" FontSize="20"/>
        <Button Name="Number7" Grid.Column="0" Grid.Row="5" Content="7" FontSize="20"/>
        <Button Name="Number8" Grid.Column="1" Grid.Row="5" Content="8" FontSize="20"/>
        <Button Name="Number9" Grid.Column="2" Grid.Row="5" Content="9" FontSize="20"/>
        <Button Name="Invert" Grid.Column="0" Grid.Row="8" Content="+/-" FontSize="20"/>
        <Button Name="Number0" Grid.Column="1" Grid.Row="8" Content="0" FontSize="20"/>
        <Button Name="Point" Grid.Column="2" Grid.Row="8" Content="." FontSize="20"/>
        <Button Name="Equal" Grid.Column="3" Grid.Row="8" Content="=" FontSize="20" Background="Orange"/>
        <Button Name="Plus" Grid.Column="3" Grid.Row="7" Content="+" FontSize="20" Background="LightGray"/>
        <Button Name="Minus" Grid.Column="3" Grid.Row="6" Content="-" FontSize="20" Background="LightGray"/>
        <Button Name="Multiply" Grid.Column="3" Grid.Row="5" Content="×" FontSize="20" Background="LightGray"/>
        <Button Name="Divide" Grid.Column="3" Grid.Row="4" Content="÷" FontSize="20" Background="LightGray"/>
        <Button Name="Derivative" Grid.Column="0" Grid.Row="4" Content="1/x" FontSize="20" Background="LightGray"/>
        <Button Name="Square" Grid.Column="1" Grid.Row="4" Content="x²" FontSize="20" Background="LightGray"/>
        <Button Name="Sqrt" Grid.Column="2" Grid.Row="4" Content="√x" FontSize="20" Background="LightGray"/>
        <Button Name="Percent" Grid.Column="0" Grid.Row="3" Content="%" FontSize="20" Background="LightGray"/>
        <Button Name="CE" Grid.Column="1" Grid.Row="3" Content="CE" FontSize="20" Background="LightGray"/>
        <Button Name="C" Grid.Column="2" Grid.Row="3" Content="C" FontSize="20" Background="LightGray"/>
        <Button Name="Redo" Grid.Column="3" Grid.Row="3" Content="☜" FontSize="20" Background="LightGray"/>

    </Grid>

运行效果
在这里插入图片描述
到目前位置，UI就完成，如果大家觉得UI不是很美观的话，可以自己进行美工。

三、核心算法

接下里的任务就是运用C#语法写核心算法了，计算器包括加减乘除运算，以及稍微复杂一点的求倒、平方、开平方

虽然算法很简单，我还是自己封装了一下，创建了一个double的扩展类，写了相应的扩展方法，不过大家也可以写为静态类方法，看大家的习惯


    /// <summary>
    /// double扩展类
    /// </summary>
    public static class DoubleExtension
    {
        public static double Plus(this double x1, double x2)
        {
            return x1 + x2;
        }

        public static double Minus(this double x1, double x2)
        {
            return x1 - x2;
        }

        public static double Multiply(this double x1, double x2)
        {
            return x1 * x2;
        }

        public static double Divide(this double x1, double x2)
        {
            return x1 / x2;
        }

        public static double Derivative(this double x)
        {
            return 1 / x;
        }

        public static double Square(this double x)
        {
            return x * x;
        }

        public static double Sqrt(this double x)
        {
            return Math.Sqrt(x);
        }
    }

四、数据绑定

WPF MVVM最关键的思想——Binding，也就是绑定。

绑定显示的结果和表达式文本框，也就是图中的“0”和“520”

在这里插入图片描述
ViewModel中继承ViewModelBase，ViewModelBase继承INotifyPropertyChanged接口，具有通知界面更新数据的能力。

在ViewModel中创建相应的依赖属性（Dependency Property）Answer和Expression，依赖属性可以通过binding从数据源获得值。


   public class MainViewModel : ViewModelBase
   {
       public MainViewModel()
       {
           Answer="0";
           Expression = "520";
       }
       public string Answer
       {
           get => GetValue<string>();
           set => SetValue(value);
       }
       public string Expression
       {
           get => GetValue<string>();
           set => SetValue(value);
       }
   }

Xaml中修改显示效果，并且绑定依赖属性


 <TextBlock Name="TextShow" 
            Grid.Row="0" Grid.ColumnSpan="4" 
            Background="LightYellow"
            Foreground="DarkGray" FontSize="20" 
            TextAlignment="Right" 
            Text="{Binding Expression}" />
<TextBlock Name="Text" 
           Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" 
           Grid.ColumnSpan="4"  Background="LightYellow"
           FontSize="60" TextAlignment="Right" 
           Text="{Binding Answer}"/>

数字Button实现，以数字1为例，其他类似


public MainViewModel()
{
    //初始化DelegateCommand
    OneActionCommand = new DelegateCommand(OneAction);
}

public DelegateCommand OneActionCommand { get; set; }

 public bool IsNum { get; set; }

private void OneAction()
{
    if (IsNum)
    {
         Number = Number is "0" ? "1" : Number + "1";
    }
    else
    {
         Number = "1";
     }

     IsNum = true;

 }

Xaml绑定Command


<Button Name="Number1" Grid.Column="0" Grid.Row="7" Content="1" FontSize="20" Command="{Binding OneActionCommand}"/>

其他button按钮的command binding方法类似，有一些算法逻辑和wpf的binding没有什么关系，这里就不在一一列举，我把项目放在百度云链接，大家可以根据需求下载。

下载链接

Makayla94

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
4
评论
wpf 采用MVVM框架简易计算器

本项目主要采用WPF MVVM框架，控件采用的是Devexpress
复制链接

扫一扫

专栏目录

wpf 采用MVVM框架 简易计算器

wpf 采用MVVM框架 简易计算器

前言

一、准备工作

二、设计界面

三、核心算法

四、数据绑定

wpf 采用MVVM框架简易计算器

wpf 采用MVVM框架简易计算器