WPF MVVM示例講解
在沒(méi)給大家講解wpf mwm示例之前先給大家簡(jiǎn)單說(shuō)下MVVM理論知識(shí)：
WPF技術(shù)的主要特點(diǎn)是數(shù)據(jù)驅(qū)動(dòng)UI,所以在使用WPF技術(shù)開(kāi)發(fā)的過(guò)程中是以數(shù)據(jù)為核心的，WPF提供了數(shù)據(jù)綁定機(jī)制，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，WPF會(huì)自動(dòng)發(fā)出通知去更新UI。
我們使用模式，一般是想達(dá)到高內(nèi)聚低耦合。在WPF開(kāi)發(fā)中，經(jīng)典的編程模式是MVVM，是為WPF量身定做的模式，該模式充分利用了WPF的數(shù)據(jù)綁定機(jī)制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI顯示和邏輯代碼的耦合度，如需要更換界面時(shí)，邏輯代碼修改很少，甚至不用修改。與WinForm開(kāi)發(fā)相比，我們一般在后置代碼中會(huì)使用控件的名字來(lái)操作控件的屬性來(lái)更新UI，而在WPF中通常是通過(guò)數(shù)據(jù)綁定來(lái)更新UI；在響應(yīng)用戶(hù)操作上，WinForm是通過(guò)控件的事件來(lái)處理，而WPF可以使用命令綁定的方式來(lái)處理，耦合度將降低。
首先MVVM設(shè)計(jì)模式的結(jié)構(gòu)
Views: 由Window/Page/UserControl等構(gòu)成，通過(guò)DataBinding與ViewModels建立關(guān)聯(lián)；
ViewModels：由一組命令，可以綁定的屬性，操作邏輯構(gòu)成；因?yàn)閂iew與ViewModel進(jìn)行了解耦，我們可以對(duì)ViewModel進(jìn)行Unit Test；
Models：可以是實(shí)體對(duì)象或者Web服務(wù)；
下面通過(guò)一個(gè)簡(jiǎn)單的例子，來(lái)介紹一些WPF MVVM模式。示例將展示一個(gè)圖片瀏覽器，打開(kāi)圖片，放大/縮小圖片大小。首先項(xiàng)目結(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(用來(lái)實(shí)現(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上，我們可以通過(guò)下面兩種方式綁定：
1. 直接在MainWindow的Code Behind中進(jìn)行綁定：
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
2. 在App.xaml后臺(tái)代碼中綁定(將App.xaml中StartupUri="MainWindow.xaml"刪除掉)：
public App()
{
MainWindow window = new MainWindow();
window.DataContext = new MainViewModel();
window.Show();
}
運(yùn)行效果圖如下：
以上就是針對(duì)WPF MVVM示例講解的全部?jī)?nèi)容，并附有效果圖，看著還不錯(cuò)吧，希望大家能夠喜歡，歡迎提出寶貴意見(jiàn)。
相關(guān)文章
這篇文章主要介紹了C#文件操作的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2014-02-02
最近項(xiàng)目要求實(shí)現(xiàn)不規(guī)則裁剪功能。本來(lái)想用html5的canvas在前端實(shí)現(xiàn)的，但是發(fā)現(xiàn)有點(diǎn)困難，以下為C#端對(duì)圖對(duì)片的處理2014-05-05
詳解C# WebApi 接口測(cè)試工具：WebApiTestClient
這篇文章主要介紹了詳解C# WebApi 接口測(cè)試工具：WebApiTestClient，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
C# Socket網(wǎng)絡(luò)編程實(shí)例
這篇文章主要介紹了C# Socket網(wǎng)絡(luò)編程實(shí)例,分析了Socket網(wǎng)絡(luò)通信的原理與具體應(yīng)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
本篇文章小編要得大家介紹的是C#數(shù)組，數(shù)組是一種數(shù)據(jù)結(jié)構(gòu)，它可以包含同一個(gè)類(lèi)型的多個(gè)元素，如果需要使用同一類(lèi)型的多個(gè)對(duì)象，可以使用數(shù)組和集合,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
Async/Await是C# 5引入的關(guān)鍵字,用以提高用戶(hù)界面響應(yīng)能力和對(duì)Web資源的訪問(wèn)能力,同時(shí)它使異步代碼的編寫(xiě)變得更加容易,下面這篇文章主要給大家介紹了關(guān)于C#中async和await的相關(guān)資料,需要的朋友可以參考下2022-11-11
索引器是一種特殊的類(lèi)成員，它能夠讓對(duì)象以類(lèi)似數(shù)組的方式來(lái)存取，使程序看起來(lái)更為直觀，更容易編寫(xiě)。2014-04-04
unity中實(shí)現(xiàn)Edge瀏覽器鼠標(biāo)手勢(shì)的功能思路詳解
這篇文章主要介紹了unity中實(shí)現(xiàn)Edge瀏覽器鼠標(biāo)手勢(shì)的功能思路詳解,實(shí)現(xiàn)起來(lái)其實(shí)并不復(fù)雜,涉及的技術(shù)點(diǎn)有pc端和移動(dòng)端屏幕拖動(dòng)事件,二維向量的相關(guān)運(yùn)算,手勢(shì)匹配算法,事件系統(tǒng)設(shè)計(jì)模式,需要的朋友可以參考下2023-12-12
這兩個(gè)方法很容易理解，只實(shí)現(xiàn)了最基本的功能，如果需要可以查看源代碼獲取更多信息。2009-07-07
這篇文章主要介紹了c#異常處理示例,需要的朋友可以參考下2014-04-04