WPF——初识MVVM(二)

说明：该案例与前一个案例的来源一样，同样讲述的是MVVM，算是MVVM的进阶吧。在该案例中，涉及到数据访问，Prism等更为复杂的问题。首先来看界面设计，我在作者的基础上稍微做了改动，大致如下：

 

1.首先还是来一个解决方案的截图：

2.实现步骤

2.1）从OO的角度来说，首先是完成基类的书写，该案例主要有两个对象，是Dish类（菜品类）和Restaurant（餐馆类），实现起来都较为简单，具体如下：

 public class Restaurant
    {
        /// <summary>
        /// 餐馆名称
        /// </summary>
        public string Name
        {
            get;
            set;
        }

        /// <summary>
        /// 餐馆地址
        /// </summary>
        public string Address
        {
            get;
            set;
        }

        /// <summary>
        /// 订餐电话
        /// </summary>
        public string PhoneNumber
        {
            get;
            set;
        }
    }

 

/// <summary>
    ///菜品类
    /// </summary>
    class Dish
    {
        //1.Data Property
        /// <summary>
        /// 菜品名称
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 菜品类别
        /// </summary>
        public string Category { get; set; }
        /// <summary>
        /// 菜品评论
        /// </summary>
        public string Comment { get; set; }
        /// <summary>
        /// 菜品评分
        /// </summary>
        public double Score { get; set; }
    }

2.2)接口的定义和实现

无论是从技术上还是从团队的角度来谈，使用接口的好处是显而易见的。这里做个简单的架设，该项目中的数据源是xml，如果涉及到不同的数据源就可以用不同的方法来实现接口来获取数据。

首先定义接口IDataService和IOrderService：

interface IDataService
    {
       List<Dish> GetAllDishes();
    }

 

 interface IOrderService
    {
        void PlaceOrder(List<string> dishes);
    }

接口的实现：

 class XmlDataService :IDataService
    {
        public List<Dish> GetAllDishes()
        {
            List<Dish> dishList = new List<Dish>();
            //System.IO.Path.Combine将两个字符串组合成一个路径（http://msdn.microsoft.com/zh-cn/library/z8te35sa(v=vs.80).aspx）
            string xmlFileName = System.IO.Path.Combine(Environment.CurrentDirectory, @"Data\Data.xml");
            //XDocument.Load(string uri)
            XDocument xDoc = XDocument.Load(xmlFileName);
            //按文档顺序返回此文档或元素的经过筛选的子代元素集合。集合中只包括具有匹配 XName 的元素。
            //XName即Data.xml中的 <Dish></Dish>节点
            var dishes = xDoc.Descendants("Dish");
            //IEnumerable 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 = double.Parse(d.Element("Score").Value);
                dishList.Add(dish);
            }
            return dishList;
        }
        
    }

 

 class MockOrderService :IOrderService
    {
        public void PlaceOrder(List<string> dishes)
        {
            System.IO.File.WriteAllLines(@"C:\order.txt", dishes.ToArray());
        }
    }

说明：该XmlDataService的作用是从xml文件中读取数据，MockOrderService则是简单的将订单信息存储在本地磁盘。

2.3)主要的业务逻辑实现

这里涉及到了Prism，Prism已经为我们实现了INotifyPropertyChanged和ICommand接口，我们只需添加引用集，添加命名空间和使相关类继承NotificationObject。

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

class DishMenuItemViewModel : NotificationObject
    {
        public Dish Dish { get; set; }//（有一个关系）

        private bool isSelected;

        public bool IsSelected
        {
            get { return isSelected; }
            set
            {
                isSelected = value;
                this.RaisePropertyChanged("IsSelected");
            }
        }

    }

 

在引用了Microsoft.Practices.Prism.ViewModel命名空间，并继承NotificationObject后就可以使用RasisePropertyChanged()方法了，NotificationObject实际上派生自INotifyPropertyChanged。

 

 

using Microsoft.Practices.Prism.ViewModel;
using Microsoft.Practices.Prism.Commands;
using MVVMDemo2.Services;
using System.Windows;

namespace MVVMDemo2.ViewModels
{
    class MainWindowViewModel : NotificationObject
    {
        #region 定义命令属性和数据属性
        //Command property
        public DelegateCommand PlaceOrderCommand { get; set; }
        public DelegateCommand SelectMenuItemCommand { get; set; }

        //Data Property
        /// <summary>
        /// 选择个数
        /// </summary>
        private int count;

        public int Count
        {
            get { return count; }
            set
            {
                count = value;
                //若不继承NotificationObject，这里将会报错
                this.RaisePropertyChanged("Count");
            }
        }

        /// <summary>
        /// 餐馆信息
        /// </summary>
        private Restaurant restaurant;

        public Restaurant Restaurant
        {
            get { return restaurant; }
            set
            {
                restaurant = value;
                this.RaisePropertyChanged("Restaurant");
            }
        }

        /// <summary>
        /// 餐馆菜品
        /// </summary>
        private List<DishMenuItemViewModel> dishMenu;

        public List<DishMenuItemViewModel> DishMenu
        {
            get { return dishMenu; }
            set
            {
                dishMenu = value;
                this.RaisePropertyChanged("DishMenu");
            }
        }
        #endregion


        public MainWindowViewModel()
        {
            this.LoadRestaurant();
            this.LoadDishMenu();

            this.PlaceOrderCommand = new DelegateCommand(new Action(this.PlaceOrderCommandExecute));
            this.SelectMenuItemCommand = new DelegateCommand(new Action(this.SelectMenuItemExecute));

        }

        /// <summary>
        /// 加载餐馆信息
        /// </summary>
        private void LoadRestaurant()
        {
            this.Restaurant = new Restaurant();

            this.Restaurant.Name = "乔治伊诺";
            this.Restaurant.Address = "小花园立交桥西口233号";
            this.Restaurant.PhoneNumber = "0932313520";

        }

        /// <summary>
        /// 加载菜品信息
        /// </summary>
        private void LoadDishMenu()
        {
            IDataService ds = new XmlDataService();
            var dishes = ds.GetAllDishes();
            this.DishMenu = new List<DishMenuItemViewModel>();
            foreach (var dish in dishes)
            {
                DishMenuItemViewModel item = new DishMenuItemViewModel();
                item.Dish = dish;
                this.DishMenu.Add(item );
                   
            }

        }

        /// <summary>
        /// 执行订餐操作
        /// </summary>
        private void PlaceOrderCommandExecute()
        {
            var selectedDishes = this.DishMenu.Where(i => i.IsSelected == true).Select(i => i.Dish.Name).ToList();
           
            IOrderService orderService = new MockOrderService();
            orderService.PlaceOrder(selectedDishes);
            //var unSelected = this.DishMenu.Where(i => i.IsSelected == false).Select(i => i.Dish.Name).ToList();
            // orderService.PlaceOrder(unSelected);
            MessageBox.Show("订餐成功！");
        }

        /// <summary>
        /// 执行操作
        /// </summary>
        private void SelectMenuItemExecute()
        {
            this.Count = this.DishMenu.Count(i=>i.IsSelected==true);
        }

    }
}

说明：添加了 Microsoft.Practices.Prism.Commands命名空间，就可以使用DelegateCommand，如上代码所示。其继承层次结构为：DelegateCommand>DelegateCommandBae>ICommand, IActiveAware。

 

最后通过在CS中添加 this.DataContext = new MainWindowViewModel();并在XAML代码中进行绑定即可：

 

<Window x:Class="MVVMDemo2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="{Binding Restaruant.Name,StringFormat=\{0\}-在线订餐}"  Height="600" Width="1000" WindowStartupLocation="CenterScreen">
    <Border BorderThickness="10" Name="borderWrap" Background="Orange" BorderBrush="GreenYellow" CornerRadius="10">
        <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="6" Background="Yellow">
            <Grid x:Name="Root" Margin="4">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border BorderBrush="Orange" BorderThickness="2" CornerRadius="6" Padding="4">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Effect>
                                <DropShadowEffect Color="LightGray" />
                            </StackPanel.Effect>
                            <TextBlock Text="欢迎光临-" FontSize="60" FontFamily="KaiTi" />
                            <TextBlock Text="{Binding Restaurant.Name}" FontSize="60" FontFamily="LiShu" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="餐厅地址：" FontSize="24" FontFamily="LiShu" />
                            <TextBlock Text="{Binding Restaurant.Address}" FontSize="24" FontFamily="LiShu" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="订餐电话：" FontSize="24" FontFamily="LiShu" />
                            <TextBlock Text="{Binding Restaurant.PhoneNumber}" FontSize="24" FontFamily="LiShu" />
                        </StackPanel>
                    </StackPanel>
                </Border>
                <DataGrid AutoGenerateColumns="False" GridLinesVisibility="None" CanUserDeleteRows="False"
                    CanUserAddRows="False" Margin="0,4" Grid.Row="1" FontSize="16" ItemsSource="{Binding DishMenu}">
                    <DataGrid.Columns>
                        <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 Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="2">
                    <TextBlock Text="共计" VerticalAlignment="Center" />
                    <TextBox IsReadOnly="True" TextAlignment="Center" Width="120" Text="{Binding Count}" Margin="4,0" />
                    <Button Content="我要订餐" Height="24" Width="120" Command="{Binding PlaceOrderCommand}" />
                </StackPanel>
            </Grid>
        </Border>
    </Border>
</Window>

Form:深入浅出WPF　MVVM入门与提高（刘铁锰　wpfgeek@live.com）