首页 > 其他分享 >MAUI学习之始--数据绑定,命令绑定 MVVM

MAUI学习之始--数据绑定,命令绑定 MVVM

时间:2023-08-28 14:46:54浏览次数:38  
标签:文件 MVVM -- xaml 绑定 System MainPageViewModel cs using

MVVM

  MVVM(model-view-view-model)模型

  之前在刚开始学Xamarin的时候,都是把页面的的表示文件(.xaml)和页面中的命令写在一起。一开始只有一两个页面还好,因为每个页面之间的联系都不是特别多,我们还能看得过来。修改的时候也还好,就想改哪里点哪里。

  但是奥!但是!当我们页面变得特别多。然后呢,有几个常用的功能吧,就好多个页面都在用,我就不停的重复写,写啊写啊写.......巨麻烦。所以大佬们为了让各个代码之间的耦合性不是那么强,就发明了MVVM。(嗯~ o(* ̄▽ ̄*)o 我觉得应该是这样的吧,我也不知道想出MVVM的大佬咋想的,反正我是这么觉得的,哈哈哈哈哈哈)

(哦!刚才说的松耦合,我的理解就是让各个代码之间没那么大的联系,就是我没了你,我还能活=。=。然后代码之间模块化,还有就是比如说我要改一下命令,不用去页面里改了,就直接去 ViewModel 中改就行了,这样就防止我们哪改错了,导致页面都没法显示了。而且也不用吭哧吭哧的在那找了)

  简单说一下MVVM的大概流程

  首先我们在xaml文件中建立一个组件,就比如一个标签吧(<Label>),正常我们就是直接在Text属性后面放上我们要显示的东西了。这样虽然简单,但是它不能变啊=。=。所以我们就在Text后面放个变量,就叫它 a 吧。然后呢,我们要在xaml文件对应的 .xaml.cs 文件中建立xaml文件与负责后台处理功能的文件(就是ViewModel文件夹中的cs文件)的联系。最后在ViewModel中写要处理的内容。

  下面是具体的步骤

  首先吧,我们建立俩文件夹,一个叫Views,一个叫ViewModels。这两文件夹的作用,Views是为了放页面文件(xmal),ViewModels是为了放负责后台处理功能的文件。然后把MainPage.xaml放到Views中,就直接拖就行。

  下面就是项目生成的时候自带的MainPage.xaml文件,我把其中没用的都给删除了。其中{Binding a}就是数据绑定的语句,"Binding"是固有的,"a"是我们定义的变量名,外边用{}给括上。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp111.MainPage">

    <StackLayout>
        <Label Text="{Binding a}"/>
    </StackLayout>

</ContentPage>

  然后我们就该去在它对应的MainPage.xaml.cs文件中创建与ViewModel文件的连接了。哦对了,我们还要在ViewModels文件夹中建立一个MainPageViewModel.cs的ViewModel文件哈,差点忘了 =。= 

 

   其中MainPage.xaml.cs文件是系统自动生成的奥!

  接下来就在MainPage.xaml.cs文件中创建与ViewModel文件的连接,然后别忘了第一句那个,using一下ViewModels文件夹,要不程序找不到就MainPageViewModel =。=

using MauiApp111.ViewModels;
namespace MauiApp111;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel(); // 这一句就是连接用的,然后别忘了上面要using一下ViewModels文件夹
    }
}

  最后就是在MainPageViewModel.cs中创建要绑定的数据了

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiApp111.ViewModels
{
    class MainPageViewModel : BindableObject
    {
        private string _a { get ; set; } // 这是变量
        public string a  // 这是属性,一般都不直接定义变量,都设置个属性给这个变量,然后去定义这个属性,为了保证数据安全
        {
            get => _a; // lambda函数,相当于 return _a;
       // 这里的判断是为了确保不无限循环的给属性 a 赋值,当变量 _a 不等于新传入的值的时候,再把这个值传递给属性 a 。 set { if (value != _a) { _a = value; OnPropertyChanged(nameof(a)); } } } public MainPageViewModel() { a = "Hello World!"; } } }

  这是最后的输出结果,如果其中Home是自带的,如果觉得它看着难受,就去AppShell.xaml中,把Title = "Home"删掉就行

 

接下来是命令绑定了

  和数据绑定特别像,同样的在MainPage.xaml文件中创建一个按钮,然后把它的命令写在MainPageViewModel.cs中

  首先写个按钮,我们还是接着上面的写奥

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp111.MainPage">

    <StackLayout>
        <Label Text="{Binding a}"/>
        <Button Text="点我啊!"
                Command="{Binding ButtonCommand}"/>
    </StackLayout>

</ContentPage>

  然后在MainPageViewModel.cs中增加命令语句

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MauiApp111.ViewModels
{
    class MainPageViewModel : BindableObject
    {
        private string _a { get ; set; } // 这是变量
        public string a  // 这是属性,一般都不直接定义变量,都设置个属性给这个变量,然后去定义这个属性,为了保证数据安全
        {
            get => _a;
            set
            {
                if (value != _a)
                {
                    _a = value;
                    OnPropertyChanged(nameof(a));
                }
            }
        }
        // 这是新增加的命令
        public ICommand ButtonCommand { get; set; }

        public MainPageViewModel()
        {
            a = "Hello World!";
            ButtonCommand = new Command(ChangeA); // 在构造函数中声明一下这个命令,changeA是点击这个按钮时,实行的函数
        }

        private void ChangeA()
        {
            a = "我变了!";
        }
    }
}

   这是完事了的样子

 点击一下“点我啊!”按钮之后,标签显示的属性a就会变成"我变了!"

  当然,我这只是数据绑定最最最最最最最最基本的用法,连接的时候用的还是

BindingContext = new MainPageViewModel();

  还有更高级的用法,比如依赖注入啥的。

  欲知后事如何,且听下回分解。嘎嘎嘎

  

标签:文件,MVVM,--,xaml,绑定,System,MainPageViewModel,cs,using
From: https://www.cnblogs.com/hjl1395589355/p/17662081.html

相关文章

  • MQTT服务器的搭建与MQTT客户端的使用
    一、MQTT服务器(emqx)搭建1、下载MQTTBroker官方下载地址:emqx-5.0.4-windows-amd64.tar.gz。百度网盘地址emqx-windows-4.3.10.zip:链接:https://pan.baidu.com/s/1XaPkWTI_AtYmWVuMD8d5HQ?pwd=n99m提取码:n99m其他版本选择:https://www.emqx.io/downloads?os=Windows。 2.不用......
  • 商用密码测评方案编制
    商用密码测评方案 商用密码测评方案编制是指对商用密码应用系统进行评估的过程中,制定详细的测评计划和方案,以确保评估的准确性和有效性。以下是商用密码测评方案编制的一些关键步骤和要点:1、确定测评目标和范围:明确测评的目的和任务,确定测评的范围和重点,选定需要......
  • Js操作Select大全(取值、设置选中等等)
    Js操作Select大全(取值、设置选中等等) jquery操作select(取值,设置选中)每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。比如<selectclass="selector"></select>1、设置value为pxx的项选中$(".selector").val("pxx");2、设置text为pxx的项选中$......
  • 实用指令_实操作_进程管理
    进程管理基本介绍在linux中,每个执行的程序(代码)都称为一个进程。每一个进程都分配一个id号每一个进程,都会对应一个父进程,而这个父进程可以复制多个子进程,例如www服务器每个进程都可能以两种方式存在的。前台与后台,所谓前台进程就是用户目前的屏幕上可操作的。后台进程则是实......
  • Ubuntu网络图标消失问题
    虚拟机使用Ubuntu时经常会遇到网络图标无故消失的问题。简直找疯了,ping又ping不通,换网卡驱动也不行...一、考虑是NetworkManager运行异常导致,操作如下:sudoserviceNetworkManagerstopsudorm-f/var/lib/NetworkManager/NetworkManager.statesudoserviceNetworkManager......
  • android多模块 安卓模块是什么意思
    模块化在进入组件化之前,我们先说一下模块化。一个功能分为一个模块,例如登录模块,支付模块,广告模块。传统的开发模式中一个模块就是一个Module(也有不同模块放在不同包里面的情况)。模块在功能上对代码进行了划分,但是在开发上任然存在问题。例如 当需要debug某一个模块的时候此......
  • .net core Api获取所有Action以及注释内容
    有个项目需要获取项目内所有Action,并在凌晨定时任务跑完所有接口检查是否有接口报错,写了如下方法:///<summary>///获取Action注释///</summary>///<paramname="root"></param>///<paramname="method">方法</para......
  • Adobe Audition 2023(au2023)Mac+win中文永久使用版
    AdobeAudition2023是音频编辑软件AdobeAudition的最新版本,也是目前市场上最强大的音频编辑软件之一。它不仅拥有强大的音频编辑功能,还具备自动音频处理功能和高质量音频重建技术,为用户带来更为丰富的音频处理体验。→→↓↓载AdobeAudition2023 强大的音频处理功能在Ado......
  • 为WPF按钮添加UAC盾牌图标
    在上一篇文章中,介绍了如何获取系统Shell的图标。在C#中调用SHGetStockIconInfo即可获取获取图标 定义SHGetStockIconInfo函数用到的数据结构1publicenumSHSTOCKICONID:uint2{3///<summary>Documentofatypewithnoassociatedapplicatio......
  • arm用户态寄存器
    常用的arm用户态寄存器如上表所示,有r0~r15这16个寄存器r0~r3:通常在函数传参时使用(从左到右的顺序,大于4个参数时使用栈来传递)和返回值(r0通常被用作返回值)。在函数内部r0-r3也可以用来存储局部变量。r4~r8,r10,r11:通常用来保存局部变量。r11通常用来作为(FP)栈基地址(下面会对这些......