MVVM learning notes and mvvm Learning

MVVM learning notes and mvvm Learning
MVVM Study Notes1,Introduction to MVVM

The MVVM mode is short for the Model-View-ViewModel mode, that is, the Model, View, and View Model ), the purpose is to separate the business and interface and reduce the coupling degree.

2, Example (BIND TextBox and Combox controls)

Overall structure:

 

View Layer Code:

<Label Content = "quantity bought:" 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 = "watermelon"/> </ComboBox> <ComboBox Grid. row = "1" Grid. column = "1" Style = "{StaticResource ComboxStyle}" ItemsSource = "{Binding Prices}" SelectedItem = "{Binding SelectPrice, UpdateSourceTrigger = PropertyChanged}"> </ComboBox>View Code

 

ViewModel Layer Code

/// <Summary> /// set the purchase quantity attribute /// </summary> public int BuyTextBox {get {return m_buyNum;} set {m_buyNum = value; // calculated amount m_money = m_selectPrice * m_buyNum; if (m_buyNum> m_surplus) {MessageBox. show ("the purchased quantity is greater than the remaining quantity. Please enter the purchased quantity again! "); M_buyNum = 0; m_money = 0;} OnPropertyChange <CalculateFruitVm> (vm => vm. BuyTextBox );}}View Code

 

/// <Summary> /// set price attributes /// </summary> public ObservableCollection <int> Prices {get {return m_prices;} set {m_prices = value; onPropertyChange <CalculateFruitVm> (vm => vm. prices );}}View Code

 

/// <Summary> /// set the selected price attribute /// </summary> public int SelectPrice {get {return m_selectPrice;} set {m_selectPrice = value; m_money = m_selectPrice * m_buyNum; OnPropertyChange <CalculateFruitVm> (vm => vm. selectPrice );}}View Code

 

/// <Summary> /// constructor CalculateFruitVm // </summary> public CalculateFruitVm () {m_prices.Add (4); m_selectPrice = 4; m_prices.Add (5 );}View Code

 

Note: In the constructor CalculateFruitVm, set the price and select the price. because the price is a combox control, you must set the price attribute.

Button

View-Layer Code

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

 

ViewModel Layer Code

/// <Summary> /// CancleCommand // </summary> public ICommand CancleCommand {get {return m_cancelCommand ;}}View Code

 

/// <Summary >/// constructor CalculateFruitVm // </summary> public CalculateFruitVm () {m_cancelCommand = ICommandFactory. CreateCommand (CancelCmdExecute, cancancancelcmdexecute );}View Code

 

/// <Summary> /// declare the CancelEvent event // </summary> public event EventHandler <EventArgs> CancelEvent; /// <summary> /// cancancancelcmdexecute event // </summary> /// <param name = "arg"> </param> /// <returns> </returns> private bool cancancancelcmdexecute (object arg) {return true ;}View Code

 

/// <Summary> // CancelCmdExecute event // </summary> /// <param name = "obj"> </param> private void CancelCmdExecute (object obj) {if (CancelEvent! = Null) {CancelEvent (this, EventArgs. Empty );}}View Code

 

. Xaml. cs code

Public CalculateFruit () {InitializeComponent (); CalculateFruitVm calculateFruitVm = new CalculateFruitVm (); DataContext = compute; calculateFruitVm. CancelEvent + = compute ;}View Code

 

/// <Summary> /// click the return button, return to the main interface /// </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 ();}View Code

 

The Button needs to bind the event with command in the View layer, create commands, constructors, and declare events in the ViewModel, and finally in. xaml. load ViewModel in cs and perform operations such as page Jump and close.

3, Summary

In MVVM, object-oriented inheritance and encapsulation are better implemented. All commands are inherited from the ICommand interface and all commands are implemented at the ViewModel layer.

When the interface needs to pass values to each other, you need to pass the values required by the interface in the VM, and instantiate the VM on which the interface needs to be passed. The example is as follows:

Hide events

Private void HideCmdExecute (object obj) {if (m_buyNum> 0 & m_selectPrice> 0) {if (HideEvent! = Null) {// calculate the remaining amount m_surplus-= m_buyNum; // calculate the total sales amount CalculateNum + = m_buyNum; // calculate the total sales amount CalculateMoney + = m_money; // new outputs ResultCalculateVm and assigns ResultCalculateVm resultCalculateVm = new ResultCalculateVm (); resultCalculateVm. salesNumberTextBox = CalculateNum; resultCalculateVm. totalMoney = CalculateMoney; resultCalculateVm. totalSurplus = m_surplus; HideEvent (this, new FruitEventArgs {ResultCalculateVm = resultCalculateVm });}}}View Code