MVVM学习笔记

MVVM学习笔记

1、MVVM的简介

 MVVM模式是Model-View-ViewModel模式的简称，也就是由模型（Model）、视图（View）、视图模型（ViewModel），其目的是为了实现将业务和界面分开，降低耦合度。

2、示例（绑定TextBox和Combox控件）

总体结构：

 

View层代码：

        <Label Content="购买数："
               Style="{StaticResource LabStyle}"
               Grid.Row="3"
               Grid.Column="0" />
        <TextBox Grid.Row="3"
                 Grid.Column="1"
                 Style="{StaticResource TextBoxStyle}"
                 Text="{Binding BuyTextBox,UpdateSourceTrigger=PropertyChanged}">
        </TextBox>

 <ComboBox Grid.Row="0"
                  Grid.Column="1"
                  Style="{StaticResource ComboxStyle}">
            <ComboBoxItem Content="西瓜" />
        </ComboBox>
        <ComboBox Grid.Row="1"
                  Grid.Column="1"
                  Style="{StaticResource ComboxStyle}"
                  ItemsSource="{Binding Prices}"
                  SelectedItem="{Binding SelectPrice, UpdateSourceTrigger=PropertyChanged}">
        </ComboBox>

 

ViewModel层代码

   /// <summary>
        /// 设置购买量属性
        /// </summary>
        public int BuyTextBox
        {
            get { return m_buyNum; }
            set
            {
                m_buyNum = value;
                //计算金额
                m_money = m_selectPrice*m_buyNum;
                if (m_buyNum > m_surplus)
                {
                    MessageBox.Show("购买数量大于剩余数量，请重新输入购买数量！");
                    m_buyNum = 0;
                    m_money = 0;
                }
                OnPropertyChange<CalculateFruitVm>(vm => vm.BuyTextBox);
            }
        }

 

    /// <summary>
        /// 设置价格属性
        /// </summary>
        public ObservableCollection<int> Prices
        {
            get { return m_prices; }
            set
            {
                m_prices = value;
                OnPropertyChange<CalculateFruitVm>(vm => vm.Prices);
            }
        }

 

 /// <summary>
        /// 设置选择价格属性
        /// </summary>
        public int SelectPrice
        {
            get { return m_selectPrice; }
            set
            {
                m_selectPrice = value;
                m_money = m_selectPrice*m_buyNum;
                OnPropertyChange<CalculateFruitVm>(vm => vm.SelectPrice);
            }
        }

 

  /// <summary>
        /// 构造函数CalculateFruitVm
        /// </summary>
        public CalculateFruitVm()
        {
            m_prices.Add(4);
            m_selectPrice = 4;
            m_prices.Add(5);
        }

 

注意：这里是在构造函数CalculateFruitVm中设置价格并选择价格，因价格是combox控件，除了需要设置价格属性外，还需要设置价格选择属性。

Button按钮

View层代码

            <Button Content="返回"
                    Grid.Column="2"
                    Style="{StaticResource ButtonStyle}"
                    HorizontalAlignment="Left"
                    Command="{Binding CancleCommand}"></Button>

 

ViewModel层代码

        /// <summary>
        /// CancleCommand命令
        /// </summary>
        public ICommand CancleCommand
        {
            get { return m_cancelCommand; }
        }

 

        /// <summary>
        /// 构造函数CalculateFruitVm
        /// </summary>
        public CalculateFruitVm()
        {
            m_cancelCommand = ICommandFactory.CreateCommand(CancelCmdExecute, CanCancelCmdExecute);
        }

 

        /// <summary>
        /// 声明CancelEvent事件
        /// </summary>
        public event EventHandler<EventArgs> CancelEvent;
        /// <summary>
        /// CanCancelCmdExecute事件
        /// </summary>
        /// <param name="arg"></param>
        /// <returns></returns>
        private bool CanCancelCmdExecute(object arg)
        {
            return true;
        }

 

        /// <summary>
        /// CancelCmdExecute事件
        /// </summary>
        /// <param name="obj"></param>
        private void CancelCmdExecute(object obj)
        {
            if (CancelEvent != null)
            {
                CancelEvent(this, EventArgs.Empty);
            }
        }

 

.xaml.cs代码

  public CalculateFruit()
        {
            InitializeComponent();
            CalculateFruitVm calculateFruitVm = new CalculateFruitVm();
            DataContext = calculateFruitVm;
            calculateFruitVm.CancelEvent += calculateFruitVm_CancelEvent;
        }

 

        /// <summary>
        /// 点击返回按钮，返回主界面
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void calculateFruitVm_CancelEvent(object sender, EventArgs e)
        {
            MainWindow mainWindow = new MainWindow();
            mainWindow.Show();
            this.Hide();
        }

 

Button按钮需要在View层用command绑定事件，ViewModel中创建命令、构造函数、声明事件，最后在.xaml.cs中加载ViewModel，并实现界面跳转、关闭等操作。

3、总结

 MVVM 中更好的实现了面向对象中的继承和封装，所有的命令都继承自ICommand接口，将所有的命令用ViewModel层去实现。

当界面之间需要互相传值时，需要在VM中传递界面需要的值，实例化需要传到哪个界面的VM，示例如下：

隐藏事件

   private void HideCmdExecute(object obj)
        {
            if (m_buyNum > 0 && m_selectPrice > 0)
            {
                if (HideEvent != null)
                {
                    //计算剩余量
                    m_surplus -= m_buyNum;
                    //计算售卖总量
                    CalculateNum += m_buyNum;
                    //计算售卖总金额
                    CalculateMoney += m_money;
                    //new出ResultCalculateVm并赋值
                    ResultCalculateVm resultCalculateVm = new ResultCalculateVm();
                    resultCalculateVm.SalesNumberTextBox = CalculateNum;
                    resultCalculateVm.TotalMoney = CalculateMoney;
                    resultCalculateVm.TotalSurplus = m_surplus;
                    HideEvent(this, new FruitEventArgs {ResultCalculateVm = resultCalculateVm});
                }
            }           
        }