使用Prism提供的类实现WPF MVVM点餐Demo

最新推荐文章于 2023-12-06 17:13:22 发布
最新推荐文章于 2023-12-06 17:13:22 发布
阅读量221 收藏
点赞数
文章标签： 游戏 shell ui

由于公司开发的技术需求，近期在学习MVVM模式开发WPF应用程序。进过一段时间的学习，感受到：学习MVVM模式，最好的方法就是用MVVM做几个Demo，因为编程里面的东西还是原来的WPF的相关知识。最近学习的资料来源大多为CodePlex、CodeProject和MSDN，以及博客园MS的MVP刘铁锰的一些资料。

前面几篇博文DebugLZQ写了，如何来写MVVM，以及Prism框架的安装等等。

本篇在前面的基础上，通过一个相对复杂一点的Demo，来学习Prism中的一些类的使用。

首先来介绍下今天这个Demo要实现的功能,今天开启的系统是XP，所以下面各位看到的将是XP风格的界面。:

·界面上方TextBlock显示餐馆的信息（粉红色字），该信息保存在一个ViewModel的一个餐馆的属性中。

·DataGrid显示菜品信息，从一个模拟的Service中读出；并在最后添加一个CheckBox Binding一个命令用来选择菜品

·下面的TextBox显示选中了几个菜，Button则Binding一个Command实现点菜(象征性的存入本地磁盘)

下面来实现它:

//---------------------

最终的项目的文件结构如下：

前面说过，可以直接饮用Prism，只引入相关的程序集也可以（虽然是一回事），这次我们就这么干！

1.新建一个WpfPrism的WPF项目，添加Prism dll引用，(使用NotificationObject、DelegateCommand)如下：

 2.在项目中添加一个Data文件夹，放入Data.XML文件，文件如下：

View Code 
<?xml version="1.0" encoding="utf-8"?>
<Dishes>
    <Dish>
        <Name>土豆泥底披萨</Name>
        <Category>披萨</Category>
        <Comment>本店特色</Comment>
        <Score>4.5</Score>
    </Dish>
    <Dish>
        <Name>烤囊底披萨</Name>
        <Category>披萨</Category>
        <Comment>本店特色</Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>水果披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>4</Score>
    </Dish>
    <Dish>
        <Name>牛肉披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>培根披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>4.5</Score>
    </Dish>
    <Dish>
        <Name>什锦披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>4.5</Score>
    </Dish>
    <Dish>
        <Name>金枪鱼披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>海鲜披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>川香披萨</Name>
        <Category>披萨</Category>
        <Comment></Comment>
        <Score>4.5</Score>
    </Dish>
    <Dish>
        <Name>黑椒鸡腿扒</Name>
        <Category>特色主食</Category>
        <Comment>本店特色</Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>肉酱意面</Name>
        <Category>特色主食</Category>
        <Comment>本店特色</Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>寂寞小章鱼</Name>
        <Category>风味小吃</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>照烧鸡软骨</Name>
        <Category>风味小吃</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>芝士青贝</Name>
        <Category>风味小吃</Category>
        <Comment></Comment>
        <Score>4.5</Score>
    </Dish>
    <Dish>
        <Name>奥尔良烤翅</Name>
        <Category>风味小吃</Category>
        <Comment>秒杀KFC</Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>双酱煎泥肠</Name>
        <Category>风味小吃</Category>
        <Comment></Comment>
        <Score>4</Score>
    </Dish>
    <Dish>
        <Name>香酥鱿鱼圈</Name>
        <Category>风味小吃</Category>
        <Comment>本店特色</Comment>
        <Score>4.5</Score>
    </Dish>
    <Dish>
        <Name>黄金蝴蝶虾</Name>
        <Category>风味小吃</Category>
        <Comment>本店特色</Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>金枪鱼沙拉</Name>
        <Category>沙拉</Category>
        <Comment>本店特色</Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>日式素沙拉</Name>
        <Category>沙拉</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>冰糖洛神</Name>
        <Category>饮料</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>玫瑰特饮</Name>
        <Category>饮料</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>清新芦荟</Name>
        <Category>饮料</Category>
        <Comment></Comment>
        <Score>5</Score>
    </Dish>
    <Dish>
        <Name>薄荷汽水</Name>
        <Category>饮料</Category>
        <Comment>本店特色</Comment>
        <Score>5</Score>
    </Dish>
</Dishes>

3.在项目中添加Model文件夹。添加两个Model Dish和Restaurant，分别如下：

View Code 
namespace WpfPrism.Models
{
    class Dish
    {
        public string Name { get; set; }

        public string Category { get; set; }

        public string  Comment { get; set; }

        public string  Score { get; set; }
    }
}
View Code 
namespace WpfPrism.Models
{
    class Restaurant
    {
        public string Name { get; set; }

        public string Address { get; set; }

        public string  PhoneNumber { get; set; }
    }
}

4.在项目中添加Services文件夹，其中IDataService、XMLDataService用来定义和实现：获取菜品信息功能。IOrderService和MockOrderService用来定义和实现：点菜功能。之所以使用接口，是为了定义和实现相分离！
其代码依次如下：

View Code 
using System.Collections.Generic;
using WpfPrism.Models;

namespace WpfPrism.Services
{
    interface IDataService
    {
        List<Dish> GetAllDishes();
    }
}
View Code 
using System;
using System.Collections.Generic;
using WpfPrism.Models;
using System.IO;
using System.Xml.Linq;


namespace WpfPrism.Services
{
    class XMLDataService:IDataService//接口：定义和实现相分离
    {
        #region IDataService 成员

        public List<Models.Dish> GetAllDishes()
        {
            List<Dish> dishList = new List<Dish>();

            string xmlFile = Path.Combine(Environment.CurrentDirectory, @"Data/Data.xml");

            XDocument xDoc = XDocument.Load(xmlFile);
            var dishes = xDoc.Descendants("Dish");
            foreach (var d in dishes)
            {
                Dish dish = new Dish();
                dish.Name = d.Element("Name").Value;
                dish.Category = d.Element("Category").Value;
                dish.Comment = d.Element("Comment").Value;
                dish.Score = d.Element("Score").Value;
                dishList.Add(dish);
            }

            return dishList;
        }

        #endregion
    }
}
View Code 
using System.Collections.Generic;

namespace WpfPrism.Services
{
    interface IOrderService
    {
        void PlaceOrder(List<string> dishes);
    }
}
View Code 
using System.Collections.Generic;
using System.IO;

namespace WpfPrism.Services
{
    class MockOrderService:IOrderService//接口：实现定义和实现相分离
    {
        #region IOrderService 成员

        public void PlaceOrder(List<string> dishes)
        {
            File.WriteAllLines(@"D:/order.txt", dishes.ToArray());
        }

        #endregion
    }
}

5.在项目中添加一个ViewModels文件夹，并添加两个Model：DishMenuItemViewModel和MianWindowViewModel。

稍微解释一下：MianWindowViewModel中的一个属性是List<MianWindowViewModel>类型的。两者代码分别如下：

using Microsoft.Practices.Prism.ViewModel;
using WpfPrism.Models;

namespace WpfPrism.ViewModels
{
    class DishMenuItemViewModel:NotificationObject
    {
        public Dish Dish { get; set; }

        private bool isSelected;
        public bool IsSelected//这个地方刚开始写错了，废了太大的劲才找出来(注意拼写！)
        {
            get { return isSelected; }
            set 
            {
                isSelected = value;
                RaisePropertyChanged("IsSelected");
            }
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Practices.Prism.ViewModel;
using WpfPrism.Models;
using WpfPrism.Services;
using Microsoft.Practices.Prism.Commands;
using System.Windows;

namespace WpfPrism.ViewModels
{
    class MianWindowViewModel:NotificationObject
    {
        private Restaurant restaurant;
        public Restaurant Restaurant
        {
            get { return restaurant; }
            set
            {
                restaurant = value;
                RaisePropertyChanged("Restaurant");
            }
        }

        //外加的一个属性，点菜的数量
        private int count;
        public int Count
        {
            get { return count; }
            set
            {
                count = value;
                RaisePropertyChanged("Count");
            }
        }

        private List<DishMenuItemViewModel> dishMenu;
        public List<DishMenuItemViewModel> DishMenu
        {
            get { return dishMenu; }
            set
            {
                dishMenu = value;
                RaisePropertyChanged("DishMenu");
            }
        }

        public MianWindowViewModel()
        {
            LoadRestuarant();//赋值Restaurant属性
            LoadDishMenu();//赋值DishMenu属性

            //初始化两个命令属性
            PlaceOrderCommand = new DelegateCommand(new Action(PlaceOrderCommandExecute));
            SelectMenuItemCommand = new DelegateCommand(new Action(SelectMenuItemCommandExecute));
        }

        private void LoadRestuarant()
        {
            Restaurant = new Restaurant() {Name="百年苏韵", Address="江苏大学", PhoneNumber="0511-12345678"};           
        }

        private void LoadDishMenu()
        {
            DishMenu = new List<DishMenuItemViewModel>();

            IDataService ds = new XMLDataService();
            var dishes = ds.GetAllDishes();
            foreach (var d in dishes)
            {
                DishMenuItemViewModel item = new DishMenuItemViewModel() {  Dish=d};
                DishMenu.Add(item);
            }
        }

        //两个命令属性
        public DelegateCommand PlaceOrderCommand { get; set; }
        public DelegateCommand SelectMenuItemCommand { get; set; }

        private void PlaceOrderCommandExecute()
        {
            //获取点菜单
            var selectedDishes = dishMenu.Where(d => d.IsSelected == true).Select(d => d.Dish.Name).ToList();

            //仅保存到本地磁盘--可以写一些有意义的代码
            IOrderService orderService = new MockOrderService();
            orderService.PlaceOrder(selectedDishes );

            MessageBox.Show("订餐成功！");
        }

        private void SelectMenuItemCommandExecute()
        {
            Count = DishMenu.Count(n=>n.IsSelected==true);
        }
        
    }
}

注意NotificationObject是ViewModel的基类。

最后，为View添加Binding：

<Window x:Class="WpfPrism.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="590">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <!-- 餐馆信息-->
        <StackPanel Grid.Row="0">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="欢迎光临-" FontSize="40"/>
                <TextBlock Text="{Binding Restaurant.Name}" FontSize="40"  Foreground="HotPink" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="地址：" FontSize="40"/>
                <TextBlock Text="{Binding Restaurant.Address}" FontSize="40" Foreground="HotPink" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="电话：" FontSize="40"/>
                <TextBlock Text="{Binding Restaurant.PhoneNumber}" FontSize="40" Foreground="HotPink" />
            </StackPanel>
        </StackPanel>
        <!--菜品信息,选菜-->
        <DataGrid Grid.Row="1" ItemsSource="{Binding DishMenu}" AutoGenerateColumns="False" GridLinesVisibility="All" CanUserDeleteRows="False" CanUserAddRows="False" >
            <DataGrid.Columns>
                <!-- 这4个来自(ViewModel )Dish属性，UI上一次读出，不会变-->
                <DataGridTextColumn Header="菜名"  Binding="{Binding Dish.Name}" Width="120"/>
                <DataGridTextColumn Header="种类"  Binding="{Binding Dish.Category}" Width="120"/>
                <DataGridTextColumn Header="点评"  Binding="{Binding Dish.Comment}" Width="120"/>
                <DataGridTextColumn Header="推荐指数"  Binding="{Binding Dish.Score}" Width="120"/>
                <!--注意这个属性-->
                <DataGridTemplateColumn Header="选中" SortMemberPath="IsSelected" Width="120">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate >
                            <CheckBox IsChecked="{Binding Path=IsSelected,UpdateSourceTrigger=PropertyChanged}"
                                      VerticalAlignment="Center" HorizontalAlignment="Center" 
                                      Command="{Binding Path=DataContext.SelectMenuItemCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGrid}}}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        <!--所点菜品个数,点菜-->
        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" >
            <TextBlock Text="点了几个菜？" TextAlignment="Center"  />
            <TextBox IsReadOnly="True" Text="{Binding Count}" Width="120" TextAlignment="Center" />
            <Button Content="点菜" Command="{Binding PlaceOrderCommand}"/>
        </StackPanel>
    </Grid>
</Window>
using System.Windows;
using WpfPrism.ViewModels;

namespace WpfPrism
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new MianWindowViewModel();
        }
    }
}

程序运行如下：

可以在D盘找到如下的txt文件：

也请参考CodeProject：WPF Master Details MVVM Application

说明：本文使用Prism框架中的几个类，来简化MVVM的编写。并未所见标准Prism的Bootstrapper、Shell、Region、Module、Unity/MEF...

关于Prism框架的知识，请关注DebugLZQ后续博文：

Prism框架-Hello Prism Using Unity

Hello Prism Using MEF

没什么高端的知识，老鸟绕过轻拍~

希望对你有帮助~

 

weixin_33859665
关注
prism项目搭建 wpf_MVVM（使用Prism框架）开发WPF
weixin_39588252的博客
12-21 875
【MVVM】目的是为了分离视图(View)和模型(Model)的耦合——解耦1、View负责前端展示，与ViewModel进行数据和命令的交互。(双向的数据属性传递，单向的命令属性传递View→ViewModel)2、ViewModel，负责前端视图业务级别的逻辑结构组织，并将其反馈给前端。3、Model，主要负责数据实体的结构处理，与ViewModel进行交互。其实我个人认为，数据和业务交互这一...
[WPF]MVVM Demo
12-07
Demo本身没有什么功能，只是包括一些UI上的逻辑，意在展示MVVM的开发方式和MVVMDemo.SysFramwork.MVVM下核心代码。
WPF-MVVM-Demo
weixin_30653023的博客
07-08 185
MVVM The model-view-viewmodel is a typically WPF pattern. It consists of a view that gets all the user input and forwards it to the viewmodel, typically by using commands. The view actively...
一个WPF MVVMdemo
06-02
一个自己写的简单的MVVMdemo，没有使用任何依赖注入框架，完全解耦View和ViewModel
WPF MVVM+Prism+MaterialDesign+Sqlite，实现永久性本地存储笔记本
06-14
WPF实现持久化笔记本，MVVM模式，依赖注入
刘铁猛wpf MVVM教程所实现的demo和项目
02-27
【标题】：“刘铁猛wpf MVVM教程所实现的demo和项目”是基于Windows Presentation Foundation（WPF）框架，采用Model-View-ViewModel（MVVM）设计模式的一个教学实践项目。刘铁猛，可能是一位知名的IT教育专家，通过...
WPF Prism MVVM【动态添加控件并可用鼠标、拖动、缩放、旋转】
08-09
主要采用了Prism.DryIoc的MVVM方式，用到控件和方法：ItemsControl（控件模板）、Thumb（可拖动控件）、Adorner（装饰器）、CommandParameter的多参数传递、GetChildObjectByUid（通过UID查找某类型的子控件）
WPF MVVM Demo 订餐系统源代码
03-19
MVVM（Model-View-ViewModel）模式是一种在WPF中广泛使用的软件设计模式，它促进了业务逻辑与用户界面的解耦，提高了代码的可测试性和可维护性。 **1. Model（模型）** 模型层是应用的核心，包含了业务逻辑和数据...
WPF的MvvM简单DEMO
03-17
WPF的MvvM简单DEMO，使用了DependencyProperty实现显示同步处理。
WPF_MVVM_Demo.rar
03-11
本代码是WPF MVVM模式原理下实现的一个小程序，通过这个小程序可以很好的理解MVVM在WPF中的运用原理；
MVVM Demo for WPF
03-19
Introduction Having helped alot of people on the MSDN Forum in the WPF section, I tend to see alot of people who fail to exploit the benefits of DataBinding in WPF, and not enough people are aware of the benefits of the MVVM pattern, which will be the main purpose of this lesson. To learn how to setup a basic MVVM pattern for an application. What is MVVM ? MVVM stands for : •Model •View •ViewModel Model - The model is an object model. In this case a class called Employee. View - The view is the UI ( User Interface ), which creates a visualization of the objects in the ViewModel, in this case MainWindow.xaml ViewModel - The ViewModel will be the layer in this application that handles all the logic and the Employee objects, this is the layer that the View will DataBind to.
WPF MvvM ERPDemo
05-11
demo用了mvvmlight框架 各种绑定，以及一个UI框架，spring.net框架。自己搭的三层框架，实现接口编程。完全满足自己的系统的需要
WPF的MVVM模式完整示例（登录窗口）
05-16
这个Demo是WPF的MVVM模式的一个登录窗口的完整实例，包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
使用Prism实现的WPF MVVM点餐Demo
weixin_34408624的博客
03-08 117
说明：本文出处：http://www.cnblogs.com/DebugLZQ/archive/2012/12/17/2821772.html ·界面上方TextBlock显示餐馆的信息（粉红色字），该信息保存在一个ViewModel的一个餐馆的属性中。 ·DataGrid显示菜品信息，从一个模拟的Service中读出；并在最后添加一个CheckBox Binding一个命令用来选择菜品 ...
WpfApp MVVM 基本Demo真实可用VS2015,VS2017
08-28
真实可用的WpfApp MVVM 基本Demo,已经做了属性绑定,一看就懂,VS2015,VS2017
WPF中实现最简单的MVVM模式（Model View ViewModel）
最新发布
abc1564984930的博客
12-06 9436
示例 说明 WPF的MVVM的实现过程，数据驱动
WPF的MVVM设计模式（从登录到增删改查Demo）
qq_43121342的博客
08-11 1594
WPF的MVVM设计模式（从登录到增删改查）
Prism框架在WPF中实践MVVM模式源码解析
通过以上内容的展开，本资源提供了一套全面的Prism框架在WPF项目中应用MVVM模式的示例源码。这套资源对于希望学习或提高.NET开发技能，特别是对WPF应用程序的构建和Prism框架的使用感兴趣的开发者来说，是非常有价值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值