MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

最新推荐文章于 2022-11-08 21:45:00 发布
最新推荐文章于 2022-11-08 21:45:00 发布
阅读量207 收藏
点赞数
文章标签： 数据库
原文链接：http://www.cnblogs.com/ansen312/p/5913414.html
版权

介绍
背水一战 Windows 10 之 MVVM（Model-View-ViewModel）

  • 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令



示例
1、Model
MVVM/Model/Product.cs

复制代码 
/*
 * Model 层的实体类，如果需要通知则需要实现 INotifyPropertyChanged 接口
 */

using System.ComponentModel;

namespace Windows10.MVVM.Model
{
    public class Product : INotifyPropertyChanged
    {
        public Product()
        {
            ProductId = 0;
            Name = "";
            Category = "";
        }

        private int _productId;
        public int ProductId
        {
            get { return _productId; }
            set
            {
                _productId = value;
                RaisePropertyChanged(nameof(ProductId));
            }
        }

        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                RaisePropertyChanged(nameof(Name));
            }
        }

        private string _category;
        public string Category
        {
            get { return _category; }
            set
            {
                _category = value;
                RaisePropertyChanged(nameof(Category));
            }
        }
        

        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }
}
复制代码

MVVM/Model/ProductDatabase.cs

复制代码 
/*
 * Model 层的数据持久化操作（本地或远程）
 * 
 * 本例只是一个演示
 */

using System;
using System.Collections.Generic;
using System.Linq;

namespace Windows10.MVVM.Model
{
    public class ProductDatabase
    {
        private List<Product> _products = null;

        public List<Product> GetProducts()
        {
            if (_products == null)
            {
                Random random = new Random();

                _products = new List<Product>();

                for (int i = 0; i < 100; i++)
                {
                    _products.Add
                    (
                        new Product
                        {
                            ProductId = i,
                            Name = "Name" + i.ToString().PadLeft(4, '0'),
                            Category = "Category" + (char)random.Next(65, 91)
                        }
                    );
                }
            }

            return _products;
        }

        public List<Product> GetProducts(string name, string category)
        {
            return GetProducts().Where(p => p.Name.Contains(name) && p.Category.Contains(category)).ToList();
        }

        public void Update(Product product)
        {
            var oldProduct = _products.Single(p => p.ProductId == product.ProductId);
            oldProduct = product;
        }

        public Product Add(string name, string category)
        {
            Product product = new Product();
            product.ProductId = _products.Max(p => p.ProductId) + 1;
            product.Name = name;
            product.Category = category;

            _products.Insert(0, product);

            return product;
        }

        public void Delete(Product product)
        {
            _products.Remove(product);
        }
    }
}
复制代码


2、ViewModel
MVVM/ViewModel1/MyCommand.cs

复制代码 
/*
 * 为了方便使用，把 ICommand 再封装一层
 */

using System;
using System.Windows.Input;

namespace Windows10.MVVM.ViewModel1
{
    public class MyCommand : ICommand
    {
        // 由 public void Execute(object parameter) 调用的委托
        public Action<object> MyExecute { get; set; }

        // 由 public bool CanExecute(object parameter) 调用的委托
        public Func<object, bool> MyCanExecute { get; set; }

        public MyCommand(Action<object> execute, Func<object, bool> canExecute)
        {
            this.MyExecute = execute;
            this.MyCanExecute = canExecute;
        }

        // 需要发布此事件的话，则调用 RaiseCanExecuteChanged 方法即可
        public event EventHandler CanExecuteChanged;
        public void RaiseCanExecuteChanged()
        {
            if (CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }

        // 用于决定当前绑定的 Command 能否被执行
        // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
        // 如果返回 false 则对应的 ButtonBase 将变为不可用
        public bool CanExecute(object parameter)
        {
            return this.MyCanExecute == null ? true : this.MyCanExecute(parameter);
        }

        // 用于执行对应的命令，只有在 CanExecute() 返回 true 时才可以被执行
        // parameter 是由 ButtonBase 的 CommandParameter 传递过来的对象
        public void Execute(object parameter)
        {
            this.MyExecute(parameter);
        }
    }
}
复制代码

MVVM/ViewModel1/ProductViewModel.cs

复制代码 
/*
 * ViewModel 层
 *
 * 注：为了方便使用，此例对 ICommand 做了一层封装。如果需要了解比较原始的 MVVM 实现请参见 http://www.cnblogs.com/webabcd/archive/2013/08/29/3288304.html
 */

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Windows10.MVVM.Model;

namespace Windows10.MVVM.ViewModel1
{
    public class ProductViewModel : INotifyPropertyChanged
    {
        // 用于提供 Products 数据
        private ObservableCollection<Product> _products;
        public ObservableCollection<Product> Products
        {
            get { return _products; }
            set
            {
                _products = value;
                RaisePropertyChanged(nameof(Products));
            }
        }

        // 用于“添加”和“查询”的 Product 对象
        private Product _product;
        public Product Product
        {
            get { return _product; }
            set
            {
                _product = value;
                RaisePropertyChanged(nameof(Product));
            }
        }

        // 数据库对象
        private ProductDatabase _context = null;

        public ProductViewModel()
        {
            _context = new ProductDatabase();

            Product = new Product();
            Products = new ObservableCollection<Product>(_context.GetProducts());
        }


        private MyCommand _getProductsCommand;
        public MyCommand GetProductsCommand
        {
            get
            {
                return _getProductsCommand ?? (_getProductsCommand = new MyCommand
                  ((object obj) =>
                  {
                      // 从 Model 层获取数据
                      Products = new ObservableCollection<Product>(_context.GetProducts(Product.Name, Product.Category));
                  },
                  null));
            }
        }

        private MyCommand _addProductCommand;
        public MyCommand AddProductCommand
        {
            get
            {
                return _addProductCommand ?? (_addProductCommand = new MyCommand
                  ((object obj) =>
                  {
                      // 在 Model 层添加一条数据
                      Product newProduct = _context.Add(Product.Name, Product.Category);

                      // 更新 ViewModel 层数据
                      Products.Insert(0, newProduct);
                  },
                  null));
            }
        }

        private MyCommand _updateProductCommand;
        public MyCommand UpdateProductCommand
        {
            get
            {
                return _updateProductCommand ?? (_updateProductCommand = new MyCommand
                  ((object obj) =>
                  {
                      // 通过 CommandParameter 传递过来的数据
                      Product product = obj as Product;

                      // 更新 ViewModel 层数据
                      product.Name = product.Name + "U";
                      product.Category = product.Category + "U";

                      // 更新 Model 层数据
                      _context.Update(product);
                  },
                  // 对应 ICommand 的 CanExecute()，如果返回 false 则对应的 ButtonBase 将变为不可用
                  (object obj) => obj != null));
            }
        }

        private MyCommand _deleteProductCommand;
        public MyCommand DeleteProductCommand
        {
            get
            {
                return _deleteProductCommand ?? (_deleteProductCommand = new MyCommand
                  ((object obj) =>
                  {
                      // 通过 CommandParameter 传递过来的数据
                      Product product = obj as Product;

                      // 更新 Model 层数据
                      _context.Delete(product);

                      // 更新 ViewModel 层数据
                      Products.Remove(product);
                  },
                  // 对应 ICommand 的 CanExecute()，如果返回 false 则对应的 ButtonBase 将变为不可用
                  (object obj) => obj != null));
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }
}
复制代码


3、View
MVVM/View/Demo1_2.xaml

复制代码 
<Page
    x:Class="Windows10.MVVM.View.Demo1_2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.MVVM.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    
    xmlns:vm="using:Windows10.MVVM.ViewModel1">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                View 层
            -->

            <!--
                本例通过 Binding 结合 Command 实现 MVVM（用 x:Bind 结合 Command 实现 MVVM 也是一样的），通过非 ButtonBase 触发命令
            -->

            <StackPanel.DataContext>
                <vm:ProductViewModel />
            </StackPanel.DataContext>

            <ListView Name="listView" ItemsSource="{Binding Products}" Width="300" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" />
                            <TextBlock Text="{Binding Category}" HorizontalAlignment="Left" Margin="10 0 0 0" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <StackPanel Orientation="Horizontal" Margin="0 10 0 0" DataContext="{Binding Product}">
                <TextBlock Text="Name：" VerticalAlignment="Center" />
                <TextBox Name="txtName" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100" />
                <TextBlock Text="Category：" VerticalAlignment="Center" Margin="20 0 0 0" />
                <TextBox Name="txtCategory" Text="{Binding Category, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100" />
            </StackPanel>

            <!--
                需要引用 Microsoft.Xaml.Interactions.dll 和 Microsoft.Xaml.Interactivity.dll
            
                Microsoft.Xaml.Interactions.Core:EventTriggerBehavior
                    EventName - 关联的事件名称
            
                Microsoft.Xaml.Interactions.Core:InvokeCommandAction
                    Command - 指定关联的 ICommand
                    CommandParameter - 传递给 ICommand 的参数
            -->
            <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                <TextBlock Text="查询">
                     <Interactivity:Interaction.Behaviors>
                         <Core:EventTriggerBehavior EventName="Tapped">
                             <Core:InvokeCommandAction Command="{Binding GetProductsCommand}" />
                         </Core:EventTriggerBehavior>
                     </Interactivity:Interaction.Behaviors>
                </TextBlock>

                <TextBlock Text="添加" Margin="10 0 0 0">
                     <Interactivity:Interaction.Behaviors>
                         <Core:EventTriggerBehavior EventName="Tapped">
                             <Core:InvokeCommandAction Command="{Binding AddProductCommand}" />
                         </Core:EventTriggerBehavior>
                     </Interactivity:Interaction.Behaviors>
                </TextBlock>

                <TextBlock Text="更新" Margin="10 0 0 0">
                     <Interactivity:Interaction.Behaviors>
                         <Core:EventTriggerBehavior EventName="Tapped">
                             <Core:InvokeCommandAction Command="{Binding UpdateProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listView}"/>
                         </Core:EventTriggerBehavior>
                     </Interactivity:Interaction.Behaviors>
                </TextBlock>

                <TextBlock Text="删除" Margin="10 0 0 0">
                     <Interactivity:Interaction.Behaviors>
                         <Core:EventTriggerBehavior EventName="Tapped">
                             <Core:InvokeCommandAction Command="{Binding DeleteProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listView}"/>
                         </Core:EventTriggerBehavior>
                     </Interactivity:Interaction.Behaviors>
                </TextBlock>
            </StackPanel>

        </StackPanel>
    </Grid>
</Page>

转载于:https://www.cnblogs.com/ansen312/p/5913414.html

weixin_34417635
关注
《Android编程权威指南》之数据绑定与MVVM（一）
Aerfa789的博客
02-24 436
《Android编程权威指南》第19 章第一篇，这里将会开发一个新应用了。翻译过来叫节拍盒子。此项目将学习使用 Jetpack 架构组件库中的数据绑定（databinding）工具，并用它实现 MVVM 新架构。此外，还会学习使用资源系统（assets system）存储声音文件。 一、为何要用MVVM架构 fragment 和 activity 开始膨胀，逐渐变得难以理解和扩展。添加新功能或修复 bug 需要耗费很长时间。此时，控制器层就需要做功能拆分了。MVVM 架构模型可以帮助我们做拆分。 对于架构模
UWP Binding和x:Bind数据绑定
hwx865的专栏
12-29 2022
前言 {x:bind}是随着UWP被推出而被添加的，可以说是Win10 UWP开发专有扩展。虽然{x:Bind}缺少{Binding}中的一些功能，但它运行时所花费的时间和使用的内存量均比{Binding}要少，且支持更好的调试。 使用Binding绑定 属性 说明 Path 用于指定绑定的数据源的属性 例：Text="{Binding Name}" Mo...
MVVM中轻松实现Command绑定（一）简单绑定
iHuoBaby
02-05 629
1.项目中添加Prism.dll引用 2.创建ViewModel，定义ICommand命令和委托方法，注意DelegateCommand是Prism中的类 public ICommand ButtonCommand{ get{ return new DelegateCommand(new Action(() =>{
MVVM --- Command 绑定
In me the tiger sniffs the rose
06-10 783
（一）简单绑定      网上有很多关于MVVM的Command绑定，我这里介绍一种借助Prism的非常方便的绑定方式。  1.项目中添加Prism.dll引用 2.创建ViewModel，定义ICommand命令和委托方法，注意DelegateCommand是Prism中的类 [csharp] view plaincopy publ
mvvm：剖析vue实现原理，简单实现mvvm
01-31
剖析Vue实现原理-如何实现双向绑定mvvm 将项目改造成基于webpack的实现 使用webpack打包 # npm install webpack webpack-dev-server webpack-merge --save-dev # npm run build ♡babel装载机 安装 # npm install ...
mvvm：剖析vue实现原理，自己动手实现mvvm
02-06
剖析Vue实现原理-如何实现双向绑定mvvm 本文能帮你做什么？ 1，了解vue的双向数据绑定原理以及核心代码模块2，缓解好奇心的同时了解如何实现双向绑定以补充说明原理与实现，此处相关代码主要摘自，并进行简化改造，...
mvvm:通过阅读vue源码来学习如何写一个MVVM框架
03-23
通过阅读vue原始码来学习如何写一个MVVM框架。 为什么？ 1，学习vue的双向数据绑定原理以及核心代码模块2，缓解好奇心的同时了解如何实现vue 提前 监听对象变化 监听片段变化 v-on事件绑定 v模型双向数据绑定 ...
mvvm:一个简单的mvvm实现
04-27
在JavaScript中，MVVM的实现通常需要一个库或框架来提供数据绑定、事件监听和自动更新视图等功能。例如，Vue.js使用指令系统实现数据绑定，当ViewModel中的数据变化时，视图会自动更新。而Knockout.js通过依赖注入和...
mvc-mvp-mvvm:javascript简单实现mvc mvp mvvm
05-24
在JavaScript中，如Vue.js和Knockout.js框架实现了MVVM模式，通过数据双向绑定简化了开发过程。 在提供的"mvc-mvp-mvvm-main"压缩包文件中，可能包含了实现这三种模式的JavaScript代码示例。通过查看这些示例，可以...
android mvvm点击事件绑定ViewModel
weixin_44177244的博客
09-13 2484
@{click} //xml: android:onClick="@{click}" //ViewModel: public void click(View view){ } 不带参数：@{() -> viewModel.click()} //xml: android:onClick="@{() -> viewModel.click()}" //ViewModel: public void click(){ } @{viewModel::click} //xml: android:onCli
Android databinding xml中处理数据与控件绑定
Venus 的博客
11-08 953
xml中加载图片编译时会爆出警告，xml中设置数据有几种情况没有提示，编译时xml中出现错误并不会定位到错误的位置，等一些问题。大家看到这是用布尔类型来判断，但是实际项目中不可能全是这么简单的判断条件，可能需要通过一个int类型或者string类型来判断，加入现在我们的判断规则是，根据年龄来控制按钮的显隐性，年龄大于五十岁的隐藏，小于五十岁的显示，实际项目中也可能给你的不是个路径，而是根据类型加载不同的图片，也可能是本地图片，那么下面看下。app:testState="@{"图片路径"}"/>
MVVM中轻松实现Command绑定 传递Command参数 ConverterParameter
weixin_53370274的博客
05-12 1803
2、可以把converter的接口由ivaluecovneter改为imultivalueconverter，实现多个绑定。1、converterparameter不是依赖属性，所以不能用binding。wpf 绑定Command 传递CommandParameter参数。3、imultivalueconverter例子。
Android MVVM 架构 Data Binding 的使用
Chiclaim
02-20 2万+
项目整体效果： 什么是MVVM , 为什么需要MVVM？MVVM是Model-View-ViewModel的简写. 它是有三个部分组成：Model、View、ViewModel。Model：数据模型层。包含业务逻辑和校验逻辑。View：屏幕上显示的UI界面（layout、views）。ViewModel：View和Model之间的链接桥梁，处理视图逻辑。MVVM架构图如下：MVVM架构通过ViewM
Android从零开始搭建MVVM架构（2）——Databinding之BindingAdapter
一个码农的博客
01-08 3483
在上一篇文章中，我们已经学习了
MVVM中轻松实现Command绑定（二）传递Command参数
热门推荐
林老师的专栏
07-12 4万+
我们如果需要在Command中传递参数，实现也很简单。DelegateCommand还有一个DelegateCommand版本，可以传递一个T类型的参数。 1.View的Button绑定，其中CommandParameter定义了一个“20”的参数 <Win
WPF的MVVM开发模式 与 databinding 和commandbinding
w905332040的博客
03-22 1856
既然讲到MVVM模式，自然第一个问题就是MVVM的含义。MVVM是Model-View-ViewModel的缩写形式，它通常被用于WPF或Silverlight开发。模型(Model)　　Model——可以理解为带有字段，属性的类。视图(View)　　View——可以理解为我们所看到的UI。视图模型(View Model)View Model在View和Model之间，起到连接的作用，并且使得Vi...
【wpf】Command Binding 命令绑定的使用
songhuangong123的博客
08-13 5698
这次讲解的命令绑定，主要解决的问题是，为实现MVVM模式进行铺垫，实现前后台逻辑的解耦。我们知道如果Button直接实现Click事件，那么实现的逻辑必然在Window后台代码中，为了实现MVVM，我要将业务逻辑放在ViewMode里面，这时需要Command Binding。..................
MVVM中轻松实现Command绑定（三）任意事件的Command
thebesttome的专栏
11-22 736
原地址：http://blog.csdn.net/qing2005/article/details/6601475 WPF中不是所有的控件都有Command属性的，如果窗体我需要在ViewModel中处理Loaded事件命令，或者其他事件的命令时，很难都过绑定Command完成，必须要注册依赖属性或事件等，太麻烦了。我喜欢简约、有效的方式，现在我和大家一起分享一下。 场景，我需要处理B
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值