背水一戰 Windows 10 (23) - MVVM: 通過 Binding 或 x:Bind 結合 Command 實現，通過 ButtonBase 觸發命令

来源:http://www.cnblogs.com/webabcd/archive/2016/07/14/5669074.html
-Advertisement-
Play Games

背水一戰 Windows 10 之 MVVM（Model-View-ViewModel）: 通過 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
[源碼下載]


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

-Advertisement-
Play Games
更多相關文章
  • 怎樣操作WebAPI介面(顯示數據)
    就在去年Insus.NET已經寫好的一個WebAPI項目，並且發佈在IIS中。參考《創建與使用Web API》http://www.cnblogs.com/insus/p/5019088.html 從上面的鏈接可以查看到那篇實例。今天Insus.NET就另開一個ASP.NET MVC項目，去操作這個 ...
  • Prism6下的MEF：第一個Hello World
    最近看書比較多，正好對過去幾年的軟體開發做個總結。寫這個的初衷只是為了簡單的做一些記錄。 前言 複雜的應用程式總是面臨很多的頁面之間的數據交互，怎樣創建松耦合的程式一直是多數工程師所思考的問題。諸如依賴註入，PubSub模式，MVVM等概念，都致力於幫助我們創建更加松耦合易於維護的程式，也有不少框架 ...
  • 模擬Visual Studio中的完全匹配查找
    模擬Visual Studio中的完全匹配查找 轉載請註明出處：http://www.cnblogs.com/jzblogs/p/5670397.html ...
  • .net筆記
    1，document.getElementById getElementById是通過Id來設置/返回HTML標簽的屬性及調用其事件與方法。用這個方法基本上可以控制頁面所有標簽，條件很簡單，就是給每個標簽分配一個ID號。返回具有指定ID屬性值的第一個對象的一個引用。 語法： var inTag = ...
  • 簡單的網站搭建
    第一步：購買功能變數名稱、伺服器、DNS解析這裡我們是在準備做一個網站的原材料，這三樣缺一不可。目前來說，可以租用的虛擬伺服器的商家很多，像亞馬遜、騰訊、阿裡等，當然，你也可以去找國外的一些免費的伺服器來用。實際一點來說，亞馬遜的伺服器你在成功註冊後有一年的試用期，這個倒是挺不錯的，不過他需要國外的一個信用... ...
  • 【轉】asp.net(c#)加密解密演算法之sha1、md5、des、aes實現源碼詳解
    原文地址：http://docode.top/Article/Detail/10003 目錄： 1、.Net(C#)平臺下Des加密解密源代碼 2、.Net(C#)平臺下Aes加密解密源代碼 3、.Net(C#)平臺下Sha1加密解密源代碼 4、.Net(C#)平臺下MD5加密解密源代碼 5、總結 ...
  • asp.net webapi 自托管插件式服務
    webapi問世已久，稀里糊塗的人哪它都當mvc來使，畢竟已mvc使用級別的經驗就可以應對webapi。 webapi和mvc在asp.net5時代合體了，這告訴我們，其實 它倆還是有區別的，要不現在也不會取兩個名字，但是由於本人歸納總結能力較差，各種不同也無法一一列出了。 在webapi中 Hel ...
  • ASP.NET MVC 瞭解FileResult的本質
    FileResult是一個基於文件的ActionResult，利用FileResult我們可以很容易地將從某個物理文件的內容響應給客戶端。ASP.NET MVC定義了三個具體的FileResult，分別是FileContentResult、FilePathResult和FileStreamResul ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類