WPF MVVM示例講解
在沒給大家講解wpf mwm示例之前先給大家簡單說下MVVM理論知識：
WPF技術(shù)的主要特點是數(shù)據(jù)驅(qū)動UI,所以在使用WPF技術(shù)開發(fā)的過程中是以數(shù)據(jù)為核心的，WPF提供了數(shù)據(jù)綁定機制，當數(shù)據(jù)發(fā)生變化時，WPF會自動發(fā)出通知去更新UI。
我們使用模式，一般是想達到高內(nèi)聚低耦合。在WPF開發(fā)中，經(jīng)典的編程模式是MVVM，是為WPF量身定做的模式，該模式充分利用了WPF的數(shù)據(jù)綁定機制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI顯示和邏輯代碼的耦合度，如需要更換界面時，邏輯代碼修改很少，甚至不用修改。與WinForm開發(fā)相比，我們一般在后置代碼中會使用控件的名字來操作控件的屬性來更新UI，而在WPF中通常是通過數(shù)據(jù)綁定來更新UI；在響應(yīng)用戶操作上，WinForm是通過控件的事件來處理，而WPF可以使用命令綁定的方式來處理，耦合度將降低。
首先MVVM設(shè)計模式的結(jié)構(gòu)
Views: 由Window/Page/UserControl等構(gòu)成，通過DataBinding與ViewModels建立關(guān)聯(lián)；
ViewModels：由一組命令，可以綁定的屬性，操作邏輯構(gòu)成；因為View與ViewModel進行了解耦，我們可以對ViewModel進行Unit Test；
Models：可以是實體對象或者Web服務(wù)；
下面通過一個簡單的例子，來介紹一些WPF MVVM模式。示例將展示一個圖片瀏覽器，打開圖片，放大/縮小圖片大小。首先項目結(jié)構(gòu)：
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(用來實現(xiàn)修改通知):
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示例講解的全部內(nèi)容，并附有效果圖，看著還不錯吧，希望大家能夠喜歡，歡迎提出寶貴意見。
相關(guān)文章
這篇文章主要介紹了C#常用自定義函數(shù),包括將數(shù)組轉(zhuǎn)成字符串、DateTime時間格式轉(zhuǎn)換為Unix時間戳格式和生成某個范圍內(nèi)的隨機數(shù),需要的朋友可以參考下2014-09-09
C# 構(gòu)造函數(shù)如何調(diào)用虛方法
這篇文章主要介紹了C# 構(gòu)造函數(shù)如何調(diào)用虛方法，文中講解非常詳細，示例代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細介紹了C#給PDF文件添加水印的相關(guān)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在使用泛型定義類的過程中遇到了不少問題，特記錄如下，需要的朋友可以參考下2013-07-07
這篇文章主要為大家詳細介紹了如何利用C#實現(xiàn)在圖片上繪制文字的效果，文中的示例代碼講解詳細，對我們學習C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
XML文件是一種常用的文件格式，本篇文章主要介紹了C#讀取XML的三種實現(xiàn)方式，主要是XmlDocument、XmlTextReader、Linq to Xml，有興趣的可以了解一下。2017-02-02
這篇文章介紹了C#使用AngleSharp庫解析html文檔的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了如何基于WPF實現(xiàn)簡單的3D導(dǎo)航欄控件效果,文中的示例代碼講解詳細,對我們的學習或工作有一定幫助,需要的小伙伴可以參考一下2024-03-03
這篇文章介紹了C#日志組件log4net的使用方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了C#計算汽車行駛方向的方法,結(jié)合實例形式分析了C#數(shù)值計算的原理與相關(guān)技巧,需要的朋友可以參考下2016-09-09