在沒給大家講解wpf mwm示例之前先給大家簡單說下MVVM理論知識：
WPF技術的主要特點是數據驅動UI,所以在使用WPF技術開發的過程中是以數據為核心的，WPF提供了數據綁定機制，當數據發生變化時，WPF會自動發出通知去更新UI。
我們使用模式，一般是想達到高內聚低耦合。在WPF開發中，經典的編程模式是MVVM，是為WPF量身定做的模式，該模式充分利用了WPF的數據綁定機制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI顯示和邏輯代碼的耦合度，如需要更換界面時，邏輯代碼修改很少，甚至不用修改。與WinForm開發相比，我們一般在后置代碼中會使用控件的名字來操作控件的屬性來更新UI，而在WPF中通常是通過數據綁定來更新UI；在響應用戶操作上，WinForm是通過控件的事件來處理，而WPF可以使用命令綁定的方式來處理，耦合度將降低。
首先MVVM設計模式的結構
Views: 由Window/Page/UserControl等構成，通過DataBinding與ViewModels建立關聯；
ViewModels：由一組命令，可以綁定的屬性，操作邏輯構成；因為View與ViewModel進行了解耦，我們可以對ViewModel進行Unit Test；
Models：可以是實體對象或者Web服務；
下面通過一個簡單的例子，來介紹一些WPF MVVM模式。示例將展示一個圖片瀏覽器，打開圖片，放大/縮小圖片大小。首先項目結構：
UI:
<Grid> <DockPanel> <Menu DockPanel.Dock="Top"> <Menu> <MenuItem Header="_Open" Command="{Binding OpenFileCommand}"/> </Menu> <Menu> <MenuItem Header="_ZoomIn" Command="{Binding ZoomCommand}" CommandParameter="ZoomIn"/> </Menu> <Menu> <MenuItem Header="_ZoomOut" Command="{Binding ZoomCommand}" CommandParameter="ZoomOut"/> </Menu> <Menu> <MenuItem Header="_Normal" Command="{Binding ZoomCommand}" CommandParameter="Normal"/> </Menu> </Menu> <ScrollViewer> <Image Source="{Binding ImagePath}" Stretch="None"> <Image.LayoutTransform> <ScaleTransform ScaleX="{Binding Zoom}" ScaleY="{Binding Zoom}"/> </Image.LayoutTransform> </Image> </ScrollViewer> </DockPanel> </Grid>ViewModelBase(用來實現修改通知):
public class ViewModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propName) { if(PropertyChanged!=null) { PropertyChanged(this, new PropertyChangedEventArgs(propName)); } } }OpenFileCommand:
public class OpenFileCommand : ICommand { private MainViewModel _data; public OpenFileCommand(MainViewModel data) { _data = data; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; } public void Execute(object parameter) { OpenFileDialog dialog = new OpenFileDialog() { Filter = "Image Files|*.jpg;*.png;*.bmp;*.gif" }; if(dialog.ShowDialog().GetValueOrDefault()) { _data.ImagePath = dialog.FileName; } }ZoomCommand:
public enum ZoomType { ZoomIn = 0, ZoomOut = 1, Normal = 2 } public class ZoomCommand : ICommand { private MainViewModel _data; public ZoomCommand(MainViewModel data) { _data = data; } public event EventHandler CanExecuteChanged { add { CommandManager.RequerySuggested += value; } remove { CommandManager.RequerySuggested -= value; } } public bool CanExecute(object parameter) { return _data.ImagePath != null; } public void Execute(object parameter) { ZoomType type = (ZoomType)Enum.Parse(typeof(ZoomType), (string)parameter, true); switch(type) { case ZoomType.Normal: _data.Zoom = 1; break; case ZoomType.ZoomIn: _data.Zoom *= 1.2; break; case ZoomType.ZoomOut: _data.Zoom /= 1.2; break; } } }MainViewModel:
public class MainViewModel : ViewModelBase { private string _imagePath; public string ImagePath { get { return _imagePath; } set { if (_imagePath != value) { _imagePath = value; OnPropertyChanged("ImagePath"); } } } private double _zoom = 1.0; public double Zoom { get { return _zoom; } set { if(_zoom != value) { _zoom = value; OnPropertyChanged("Zoom"); } } } private ICommand _openFileCommand; public ICommand OpenFileCommand { get { return _openFileCommand; } } private ZoomCommand _zoomCommand; public ZoomCommand ZoomCommand { get { return _zoomCommand; } } public MainViewModel() { _openFileCommand = new OpenFileCommand(this); _zoomCommand = new ZoomCommand(this); } }下一步我們要做的是將MainViewModel綁定到MainWindow上，我們可以通過下面兩種方式綁定：
1. 直接在MainWindow的Code Behind中進行綁定：
public MainWindow() { InitializeComponent(); DataContext = new MainViewModel(); }2. 在App.xaml后臺代碼中綁定(將App.xaml中StartupUri="MainWindow.xaml"刪除掉)：
public App() { MainWindow window = new MainWindow(); window.DataContext = new MainViewModel(); window.Show(); }運行效果圖如下：
以上就是針對WPF MVVM示例講解的全部內容，并附有效果圖，看著還不錯吧，希望大家能夠喜歡，歡迎提出寶貴意見。
新聞熱點
疑難解答
