重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之 绑定
- 通过 MVVM 模式实现数据的添加、删除、修改和查询
示例
1、Model 层
Binding/MVVM/Model/ProductDatabase.cs
/*
* Model 层的数据持久化操作（本地或远程）
*
* 本例只是一个演示
*/ using System;
using System.Collections.Generic;
using System.Linq; namespace XamlDemo.Binding.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 = ; i < ; i++)
{
_products.Add(
new Product
{
ProductId = i,
Name = "Name" + i.ToString().PadLeft(, ''),
Category = "Category" + (char)random.Next(, )
});
}
} 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) + ;
product.Name = name;
product.Category = category; _products.Insert(, product); return product;
} public void Delete(Product product)
{
_products.Remove(product);
}
}
}
Binding/MVVM/Model/Product.cs
/*
* Model 层的实体类，如果需要通知则需要实现 INotifyPropertyChanged 接口
*/ using System.ComponentModel; namespace XamlDemo.Binding.MVVM.Model
{
public class Product : INotifyPropertyChanged
{
public Product()
{
ProductId = ;
Name = "";
Category = "";
} private int _productId;
public int ProductId
{
get { return _productId; }
set
{
_productId = value;
RaisePropertyChanged("ProductId");
}
} private string _name;
public string Name
{
get { return _name; }
set
{
_name = value;
RaisePropertyChanged("Name");
}
} private string _category;
public string Category
{
get { return _category; }
set
{
_category = value;
RaisePropertyChanged("Category");
}
} public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string name)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
}
}
2、ViewModel 层
Binding/MVVM/ViewModel/ProductViewModel.cs
/*
* ViewModel 层
*/ using System.Collections.ObjectModel;
using System.Windows.Input;
using XamlDemo.Binding.MVVM.Model;
using System.Linq;
using System.ComponentModel; namespace XamlDemo.Binding.MVVM.ViewModel
{
public class ProductViewModel
{
// 用于提供 Products 数据
public ObservableCollection<Product> Products { get; set; }
// 用于“添加”和“查询”的 Product 对象
public Product Product { get; set; } private ProductDatabase _context = null; public ProductViewModel()
{
_context = new ProductDatabase(); Product = new Product();
Products = new ObservableCollection<Product>();
} // for 查询
public ICommand GetProductsCommand
{
get { return new GetProductsCommand(this); }
}
public void GetProducts(Product query)
{
// 从 Model 获取数据
var products = _context.GetProducts(query.Name, query.Category); // 更新 ViewModel 中的数据
Products.Clear();
foreach (var product in products)
{
Products.Add(product);
}
} // for 添加
public ICommand AddProductCommand
{
get { return new AddProductCommand(this); }
}
public void AddProduct(Product product)
{
// 更新 Model
var newProduct = _context.Add(product.Name, product.Category); // 更新 ViewModel
Products.Insert(, newProduct);
} // for 更新
public ICommand UpdateProductCommand
{
get { return new UpdateProductCommand(this); }
}
public void UpdateProduct(Product product)
{
// 更新 ViewModel
product.Name = product.Name + "U";
product.Category = product.Category + "U"; // 更新 Model
_context.Update(product);
} // for 删除
public ICommand DeleteProductCommand
{
get { return new DeleteProductCommand(this); }
}
public void DeleteProduct(Product product)
{
// 更新 Model
_context.Delete(product); // 更新 ViewModel
Products.Remove(product);
}
}
}
Binding/MVVM/ViewModel/AddProductCommand.cs
/*
* 添加 Product 数据的 Command
*/ using System;
using System.Windows.Input; namespace XamlDemo.Binding.MVVM.ViewModel
{
public class AddProductCommand : ICommand
{
private ProductViewModel _productViewModel; public AddProductCommand(ProductViewModel productViewModel)
{
_productViewModel = productViewModel;
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
public bool CanExecute(object parameter)
{
return true;
} // 需要发布此事件的话，在 CanExecute() 方法中调用 OnCanExecuteChanged() 方法即可
public event EventHandler CanExecuteChanged;
protected virtual void OnCanExecuteChanged(EventArgs e)
{
if (CanExecuteChanged != null)
CanExecuteChanged(this, e);
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
public void Execute(object parameter)
{
_productViewModel.AddProduct(_productViewModel.Product);
}
}
}
Binding/MVVM/ViewModel/DeleteProductCommand.cs
/*
* 删除 Product 数据的 Command
*/ using System;
using System.Windows.Input;
using XamlDemo.Binding.MVVM.Model; namespace XamlDemo.Binding.MVVM.ViewModel
{
public class DeleteProductCommand : ICommand
{
private ProductViewModel _productViewModel; public DeleteProductCommand(ProductViewModel productViewModel)
{
_productViewModel = productViewModel;
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
// 当 ButtonBase 的 CommandParameter 中的数据发生变化时，会执行此方法
// 如果返回 false 则对应的 ButtonBase 将变为不可用
public bool CanExecute(object parameter)
{
var product = (Product)parameter;
if (product == null)
return false; return true;
} // 需要发布此事件的话，在 CanExecute() 方法中调用 OnCanExecuteChanged() 方法即可
public event EventHandler CanExecuteChanged;
protected virtual void OnCanExecuteChanged(EventArgs e)
{
if (CanExecuteChanged != null)
CanExecuteChanged(this, e);
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
public void Execute(object parameter)
{
var product = (Product)parameter;
_productViewModel.DeleteProduct(product);
}
}
}
Binding/MVVM/ViewModel/UpdateProductCommand.cs
/*
* 更新 Product 数据的 Command
*/ using System;
using System.Windows.Input;
using XamlDemo.Binding.MVVM.Model; namespace XamlDemo.Binding.MVVM.ViewModel
{
public class UpdateProductCommand : ICommand
{
private ProductViewModel _productViewModel; public UpdateProductCommand(ProductViewModel productViewModel)
{
_productViewModel = productViewModel;
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
// 当 ButtonBase 的 CommandParameter 中的数据发生变化时，会执行此方法
// 如果返回 false 则对应的 ButtonBase 将变为不可用
public bool CanExecute(object parameter)
{
var product = (Product)parameter;
if (product == null)
return false; return true;
} // 需要发布此事件的话，在 CanExecute() 方法中调用 OnCanExecuteChanged() 方法即可
public event EventHandler CanExecuteChanged;
protected virtual void OnCanExecuteChanged(EventArgs e)
{
if (CanExecuteChanged != null)
CanExecuteChanged(this, e);
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
public void Execute(object parameter)
{
var product = (Product)parameter;
_productViewModel.UpdateProduct(product);
}
}
}
Binding/MVVM/ViewModel/GetProductsCommand.cs
/*
* 获取 Product 数据的 Command
*/ using System;
using System.Windows.Input; namespace XamlDemo.Binding.MVVM.ViewModel
{
public class GetProductsCommand : ICommand
{
private ProductViewModel _productViewModel; public GetProductsCommand(ProductViewModel productViewModel)
{
_productViewModel = productViewModel;
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
public bool CanExecute(object parameter)
{
return true;
} // 需要发布此事件的话，在 CanExecute() 方法中调用 OnCanExecuteChanged() 方法即可
public event EventHandler CanExecuteChanged;
protected virtual void OnCanExecuteChanged(EventArgs e)
{
if (CanExecuteChanged != null)
CanExecuteChanged(this, e);
} // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
public void Execute(object parameter)
{
_productViewModel.GetProducts(_productViewModel.Product);
}
}
}
3、View 层
Binding/MVVM/Demo.xaml
<Page
x:Class="XamlDemo.Binding.MVVM.Demo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Binding.MVVM"
xmlns:vm="using:XamlDemo.Binding.MVVM.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0"> <!--
View 层
--> <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 FontSize="14.667" Text="{Binding Name}" HorizontalAlignment="Left" />
<TextBlock FontSize="14.667" 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 FontSize="14.667" Text="Name：" VerticalAlignment="Center" />
<TextBox Name="txtName" Text="{Binding Name, Mode=TwoWay}" Width="200" />
<TextBlock FontSize="14.667" Text="Category：" VerticalAlignment="Center" Margin="20 0 0 0" />
<TextBox Name="txtCategory" Text="{Binding Category, Mode=TwoWay}" Width="200" />
</StackPanel> <!--
ButtonBase
Command - 指定关联的命令
CommandParameter - 传递给 Command 的参数
-->
<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> <!--
另外，MVVM Light Toolkit 是目前比较流行的 MVVM 框架，如果需要全 App 纯 MVVM 的话可以考虑
在 http://mvvmlight.codeplex.com/ 下载安装后，手动在安装目录的 Vsix 目录下安装相应的 VS 扩展（其中包括 MVVM Light Toolkit 的项目模板）
-->
OK
[源码下载]