在沒(méi)給大家講解wpf mwm示例之前先給大家簡(jiǎn)單說(shuō)下MVVM理論知識:
WPF技術(shù)的主要特點(diǎn)是數據驅動(dòng)UI,所以在使用WPF技術(shù)開(kāi)發(fā)的過(guò)程中是以數據為核心的,WPF提供了數據綁定機制,當數據發(fā)生變化時(shí),WPF會(huì )自動(dòng)發(fā)出通知去更新UI。
我們使用模式,一般是想達到高內聚低耦合。在WPF開(kāi)發(fā)中,經(jīng)典的編程模式是MVVM,是為WPF量身定做的模式,該模式充分利用了WPF的數據綁定機制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI顯示和邏輯代碼的耦合度,如需要更換界面時(shí),邏輯代碼修改很少,甚至不用修改。與WinForm開(kāi)發(fā)相比,我們一般在后置代碼中會(huì )使用控件的名字來(lái)操作控件的屬性來(lái)更新UI,而在WPF中通常是通過(guò)數據綁定來(lái)更新UI;在響應用戶(hù)操作上,WinForm是通過(guò)控件的事件來(lái)處理,而WPF可以使用命令綁定的方式來(lái)處理,耦合度將降低。
首先MVVM設計模式的結構
Views: 由Window/Page/UserControl等構成,通過(guò)DataBinding與ViewModels建立關(guān)聯(lián);
ViewModels:由一組命令,可以綁定的屬性,操作邏輯構成;因為View與ViewModel進(jìn)行了解耦,我們可以對ViewModel進(jìn)行Unit Test;
Models:可以是實(shí)體對象或者Web服務(wù);
下面通過(guò)一個(gè)簡(jiǎn)單的例子,來(lái)介紹一些WPF MVVM模式。首先項目結構:
DelegateCommand.cs
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using WpfApp13.Commands;
namespace WpfApp13.ViewModels{ class MainWindowViewModel:NotificationObject { private double input1;
public double Input1 { get { return input1; } set { input1 = value; this.RaisePropertyChange("Input1"); } }
private double input2;
public double Input2 { get { return input2; } set { input2 = value; this.RaisePropertyChange("Input2"); } }
private double result;
public double Result { get { return result; } set { result = value; this.RaisePropertyChange("Result"); } }
public DelegateCommand AddCommand { get; set; }
public void Add(object parameter) { this.Result = this.Input1 + this.Input2; }
public MainWindowViewModel() { this.AddCommand = new DelegateCommand(); this.AddCommand.ExcuteAction = new Action<object>(this.Add); } }}
MainWindowViewModel.cs
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using WpfApp13.Commands;
namespace WpfApp13.ViewModels{ class MainWindowViewModel:NotificationObject { private double input1;
public double Input1 { get { return input1; } set { input1 = value; this.RaisePropertyChange("Input1"); } }
private double input2;
public double Input2 { get { return input2; } set { input2 = value; this.RaisePropertyChange("Input2"); } }
private double result;
public double Result { get { return result; } set { result = value; this.RaisePropertyChange("Result"); } }
public DelegateCommand AddCommand { get; set; }
public void Add(object parameter) { this.Result = this.Input1 + this.Input2; }
public MainWindowViewModel() { this.AddCommand = new DelegateCommand(); this.AddCommand.ExcuteAction = new Action<object>(this.Add); } }}
NotificationObject.CS
using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Text;using System.Threading.Tasks;
namespace WpfApp13.ViewModels{ class NotificationObject : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChange(string propertyName) { if(this.PropertyChanged!=null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } }}
MainWindow.xaml.CS
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;using WpfApp13.ViewModels;
namespace WpfApp13{ /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new MainWindowViewModel(); }
}
}
MainWindow.xaml
<Window x:Class="WpfApp13.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp13" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <StackPanel> <Slider Name="slider1" MinHeight="25" Value="{Binding Input1}"/> <Slider Name="slider2" MinHeight="25" Value="{Binding Input2}"/> <Slider Name="slider3" MinHeight="25" Value="{Binding Result}"/> <Button Name="addButton" Content="ADD" FontSize="30" MinHeight="40" Command="{Binding AddCommand}"/> </StackPanel> </Grid></Window>
運行效果:
分別拖動(dòng)滑塊slider1和slider2,點(diǎn)擊按鈕后slider3就會(huì )自動(dòng)變化
百度網(wǎng)盤(pán)源碼下載地址:
鏈接:https://pan.baidu.com/s/1AvBncokY8SiW0fd9XqrPRw
提取碼:ttpo
聯(lián)系客服