背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令...

最新推荐文章于 2024-11-01 12:20:35 发布
最新推荐文章于 2024-11-01 12:20:35 发布
阅读量69 收藏
点赞数
文章标签： 数据库
原文链接：https://yq.aliyun.com/articles/259517
版权
原文: 背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令

[源码下载]


背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令



作者：webabcd


介绍
背水一战 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.xaml

<Page
    x:Class="Windows10.MVVM.View.Demo1"
    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: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}" Width="100" />
                <TextBlock Text="Category：" VerticalAlignment="Center" Margin="20 0 0 0" />
                <TextBox Name="txtCategory" Text="{Binding Category, Mode=TwoWay}" Width="100" />
            </StackPanel>

            <!--
                ButtonBase
                    Command - 指定关联的 ICommand
                    CommandParameter - 传递给 ICommand 的参数
            -->
            <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                <Button Name="btnSearch" Content="查询" Command="{Binding GetProductsCommand}" Margin="10 0 0 0" />
                <Button Name="btnAdd" Content="添加" Command="{Binding AddProductCommand}" Margin="10 0 0 0" />
                <Button Name="btnUpdate" Content="更新" Command="{Binding UpdateProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listView}" Margin="10 0 0 0" />
                <Button Name="btnDelete" Content="删除" Command="{Binding DeleteProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listView}" Margin="10 0 0 0" />
            </StackPanel>

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



OK
[源码下载]

weixin_34148340
关注
WPF中DataGrid控件内Button的Command和CommandParameter的绑定
jumtre的专栏
03-14 2万+
场景：视频上传功能，上传列表使用DataGrid控件，视频有不同的状态对应不同的操作，DataGrid中最后一列为操作列，里面是Button控件。希望点击Button后执行对应的操作，但是设置Button的 Command="{Binding VideoOperationCommand}"后触发不了操作。 XAML代码如下：
qt-mvvm：大型Qt C ++应用程序的模型视图ViewModel框架
02-13
根据命令模式撤消/重做。 查看模型以显示Qt小部件中的部分应用程序模型。 取决于Qt。 基于科学绘图。 根据模型内容自动生成窗口小部件。 物业编辑。 Qt的树木和桌子的灵活布局。要求C ++-17 CMake的3.14 Qt 5.12...
MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令
weixin_33897722的博客
09-27 202
介绍背水一战 Windows 10 之 MVVM（Model-View-ViewModel） 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令 示例1、ModelMVVM/Model/Product.cs /* * Model 层的实体类，如果需要通知则需要实现 INotifyPropertyChanged 接口...
CommandParameter与数据绑定
weixin_30947043的博客
05-18 738
场景一： 在DataGrid中的Button单击触发时，经常需要通过CommandParameter传些当前选中行的信息，甚至是将该行所有信息作为CommandParameter，传到事件处理的代码里，我们知道传一个属性的时候，写成CommandParameter={Binding id}就可以了，比如： <sdk:DataGridTemplate...
背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令...
weixin_33696822的博客
09-21 79
原文:背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令 [源码下载] 背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令 作者：...
MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令
weixin_34417635的博客
09-27 207
介绍背水一战 Windows 10 之 MVVM（Model-View-ViewModel） 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令 示例1、ModelMVVM/Model/Product.cs /* * Model 层的实体类，如果需要通知则需要实现 INotifyPropertyChang...
解析Caliburn.Micro（四）
lnc2003的专栏
02-10 1610
前言 　　Caliburn.Micro这个系列也写了好几篇了，作为一个第三方的应用框架，关于细节的详尽介绍并不是第一位的，能快而准确的把握它的整体思路才是最重要的。Caliburn.Micro框架中包含了很多功能，有前面介绍过的Action，Convention，Coroutine（协同），EventAggregator（弱事件）等等。其中很多功能都是锦上添花之作，比如EventAggreg
binding-reactive-mvvm-accordion-xamarin：如何在Xamarin.Forms手风琴（SfAccordion）中使用Reactive MVVM绑定ItemSource
02-05
binding-reactive-mvvm-accordion-xamarin：如何在Xamarin.Forms手风琴（SfAccordion）中使用Reactive MVVM绑定ItemSource-源码
mvc-mvp-mvvm:javascript简单实现mvc mvp mvvm
05-24
在提供的"mvc-mvp-mvvm-main"压缩包文件中，可能包含了实现这三种模式的JavaScript代码示例。通过查看这些示例，可以更深入地理解每种模式的工作原理和它们在实际项目中的应用。学习和实践这些模式有助于提升...
xamarin-treeview-checkbox-in-mvvm:此示例演示将CheckBox与Xamarin.Forms TreeView一起使用
04-13
总结起来，“xamarin-treeview-checkbox-in-mvvm”示例展示了如何在Xamarin.Forms的TreeView中结合使用复选框，以及如何在MVVM模式下处理这种交互。通过这种方式，开发者可以创建更加动态和用户友好的界面，让用户...
vue1.x-source-code:vue1.x自己实现，主要实现了MVVM-vue source code
03-24
在这个项目"vue1.x-source-code"中，我们有机会亲自实现一个简化的MVVM模式，从而更好地学习Vue的核心机制。 MVVM（Model-View-ViewModel）是一种设计模式，它在Web开发中被广泛应用，尤其是前端框架如AngularJS和...
oceanbase V4.2.2社区版集群离线部署
最新发布
king_harry的专栏
11-01 670
版本，选择是上传文件，包含oceanbase-ce、oceanbase-ce-libs、oceanbase-ce-utils。关闭时展示，为 OBProxy 集群的访问地址，仅用于生成租户的连接串，不影响实际使用，需要自主配置负载均衡，如果是 VIP 地址，还需要您自主申请并绑定到 OBProxy Server。集群配置选项卡—更多配置—更改系统内存保留选项，默认是30G，如果测试机内存只有16G，则需要调小，本测试调整为2G，这样ocp-server安装不会失败。自定义待管理的集群的名称。
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1362
项目功能：商品分类,商品信息,用户。
JAVA 插入 JSON 对象到 PostgreSQL
qq_52143611的博客
10-30 837
在现代软件开发中，由于 JSON 数据的轻量和通用性，处理 JSON 数据已经变得无处不在。PostgreSQL凭借其对 JSON 的强大支持，为存储和查询 JSON 数据提供了出色的平台。为了将JSON数据保存到PostgreSQL数据库中，我们可以将JSON数据转换为PostgreSQL的JSONB类型数据，然后将其存储在数据库中。在Java中，我们可以使用JDBC或者基于ORM框架的方式来实现这一功能。
第2章 Android App开发基础
L念安dd的博客
10-29 1082
本章介绍基于Android系统的App开发常识，包括以下几个方面：App开发与其他软件开发有什么不一 样，App工程是怎样的组织结构又是怎样配置的，App开发的前后端分离设计是如何运作实现的，App的活动页面是如何创建又是如何跳转的。
JAVA中的MVC三层架构
楠寻寻的博客
10-30 1002
MVC（Model-View-Controller）是一种软件设计模式，用于将应用程序分为主要的部分：模型（Model）、视图（View）和控制器（Controller）。这种架构有助于提高代码的可维护性和可扩展性。Spring框架通过@Controller@Service和注解清晰地划分了MVC三层架构的各个层次，使得开发人员能够更高效地构建和维护复杂的Web应用。POJO类：用于表示业务实体，通常包含属性和相关的getter/setter方法。DAO类：用于封装对数据库的操作，提供数据访问的接口。
实现Vue.js的MVVM：v-model与{{}}指令解析
通过以上步骤，我们可以创建一个基础的MVVM实现，使得数据的变化能够实时反映到视图上，同时也支持用户通过`v-model`指令双向绑定表单数据，以及通过`{{}}`插值表达式显示数据。这样的机制极大地提高了开发效率，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值