使用UWP 設計 MVVM 軟體架構(一)

前言:

什麼是MVVM? 簡單的說他是由 Model, ViewModel, 和View 所構成的軟體架構

1. Model, 指的是我們用來存放資料的類別, 除此之外, 商業邏輯也會被封裝在裡面, 他只負責處理跟資料有關的行為 
2. ViewModel, 作為整個架構的中間層, 負責提供View需要的資料
3. View, 架構中負責呈現介面的元件

會有這個概念, 一開始是為了避免View當中存在太多的商業邏輯使得程式碼變得很難trace 或是維護, 所以我們把關於資料實體的商業邏輯還有資訊都封裝在一個類別後抽出來成為一個Model.

然而這樣的程式碼還是不夠乾淨, 因為View 和  Model 之間的相依性, 會出現當Model一改View就要跟著改得情況, 所以最後我們在View和Model之間多了一層ViewModel的類別, 負責提供或轉換適當的資料給View, 以降低View和Model之間的相依性

以下是個簡單的範例, 說明如何在UWP的專案中設計出MVVM的軟體架構
這個範例是一個顯示電影清單的程式, 基本上有幾個步驟

1. 建立一個新專案
2. 設計Model,  我們會有個Movie類別, 來表示電影的名稱以及價錢
3. 設計ViewModel, 我們會有個 MovieViewModel的類別, 提供適當的 Movie 資料給View使用
4. 設計View, 我們會簡單的加入ListBox來呈現電影清單, 以及一個Button來刪除畫面上的所有電影

第一步：建立專案

選擇C#>Windows Universal>Blank App

第二步：設計Model

• 首先建立Models的資料夾
• 之後在裡面建立一個新類別Movie

• 繼承並實作介面INotifyPropertyChanged, 如下

	using System.ComponentModel;
	namespace SimpleMVVM.Models
	{
	public class Movie:INotifyPropertyChanged
	{
	public event PropertyChangedEventHandler PropertyChanged;
	public void NotifyPropertyChanged(string propertyName)
	{
	PropertyChangedEventHandler handler = PropertyChanged;
	if( handler != null)
	{
	PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
	handler(this, args);
	}
	}
	private string name;
	private string price;
	public string Name
	{
	get => name;
	set
	{
	name = value;
	NotifyPropertyChanged("Name");
	}
	}
	public string Price
	{
	get => price;
	set
	{
	price = value;
	NotifyPropertyChanged("Price");
	}
	}
	}
	}

view raw Movie.cs hosted with ❤ by GitHub

• 建立資料夾Data, 之後再這個資料夾裡面建立一個FakeDatabase的類別

• 這是一個假的資料庫用來提供電影資料給ViewModel, 實際上我們是把資料寫在外部的XML中

	using SimpleMVVM.Models;
	using System;
	using System.Collections.ObjectModel;
	using System.Linq;
	using System.Threading.Tasks;
	using System.Xml.Linq;
	using Windows.Storage;
	namespace SimpleMVVM.Data
	{
	public class FakeDatabase
	{
	private ObservableCollection<Movie> movies;
	public ObservableCollection<Movie> Movies
	{
	get => movies;
	}
	public FakeDatabase()
	{
	this.movies = new ObservableCollection<Movie>();
	}
	private async Task WriteMoviesToFile()
	{
	StorageFolder folder = Windows.Storage.ApplicationData.Current.LocalFolder;
	var item= await folder.TryGetItemAsync("movies.xml");
	StorageFile moviesFile;
	if( item == null)
	{
	moviesFile = await folder.CreateFileAsync("movies.xml");
	}
	else
	{
	moviesFile = await folder.GetFileAsync("movies.xml");
	}
	var xmlDoc = new XElement("Root");
	try
	{
	foreach (var mv in Movies)
	{
	xmlDoc.Add(
	new XElement("Movie",
	new XElement("Name", mv.Name),
	new XElement("Price", mv.Price)));
	}
	}catch(Exception ex)
	{
	System.Diagnostics.Debug.WriteLine(ex.ToString());
	}
	await FileIO.WriteTextAsync(moviesFile, xmlDoc.ToString());
	}
	public async Task LoadMoviesFromFile()
	{
	StorageFolder folder = Windows.Storage.ApplicationData.Current.LocalFolder;
	var item = await folder.TryGetItemAsync("movies.xml");
	if(item != null)
	{
	var moviesFile = item as StorageFile;
	var moviesFileContent = await FileIO.ReadTextAsync(moviesFile);
	var xmlDoc = XElement.Parse(moviesFileContent);
	var xmlMovies = xmlDoc.Descendants("Movie");
	foreach(var xmlMovie in xmlMovies)
	{
	Movie movie = new Movie();
	var name = xmlMovie.Descendants("Name").FirstOrDefault();
	if(name != null)
	{
	movie.Name = name.Value;
	}
	var price = xmlMovie.Descendants("Price").FirstOrDefault();
	if(price != null)
	{
	movie.Price = price.Value;
	}
	movies.Add(movie);
	}
	}
	else
	{
	movies.Add(new Movie
	{
	Name = "Iron Man",
	Price = "100"
	});
	movies.Add(new Movie
	{
	Name = "Thor",
	Price = "50"
	});
	movies.Add(new Movie
	{
	Name = "Gone Girl",
	Price = "10"
	});
	await WriteMoviesToFile();
	}
	}
	public async Task AddMovie(Movie movie)
	{
	if (!Movies.Contains(movie))
	{
	Movies.Add(movie);
	}
	await WriteMoviesToFile();
	}
	public async Task DeleteMovie(Movie movie)
	{
	if (Movies.Contains(movie))
	{
	Movies.Remove(movie);
	}
	await WriteMoviesToFile();
	}
	}
	}

view raw FakeDatabase.cs hosted with ❤ by GitHub

第三步, 建立 ViewModel

• 建立一個ViewModelBase的類別
• 用來作為所有ViewModel的基底並且繼承INotifyPropertyChanged

	using System.ComponentModel;
	namespace SimpleMVVM.ViewModels
	{
	public class ViewModelBase : INotifyPropertyChanged
	{
	public event PropertyChangedEventHandler PropertyChanged;
	public void NotifyPropertyChanged(string propertyName)
	{
	PropertyChangedEventHandler handler = PropertyChanged;
	if( handler != null)
	{
	PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
	handler(this, args);
	}
	}
	}
	}

view raw ViewModelBase.cs hosted with ❤ by GitHub

• 接下來, 我們建立MovieListViewModel負責處理View上的電影清單相關資料的呈現邏輯

	using SimpleMVVM.Common;
	using SimpleMVVM.Data;
	using SimpleMVVM.Models;
	using System;
	using System.Collections.ObjectModel;
	using System.Windows.Input;
	namespace SimpleMVVM.ViewModels
	{
	public class MovieListViewModel : ViewModelBase
	{
	private ObservableCollection<Movie> movies;
	private ICommand deleteAllMoviesCommand;
	private Movie selectedMovie;
	private FakeDatabase dbConext;
	public ObservableCollection<Movie> Movies
	{
	get => movies;
	set
	{
	movies = value;
	NotifyPropertyChanged("Movies");
	}
	}
	public ICommand DeleteAllMoviesCommand { get => deleteAllMoviesCommand; }
	public Movie SelectedMovie
	{
	get => selectedMovie;
	set
	{
	selectedMovie = value;
	NotifyPropertyChanged("SelectedMovie");
	}
	}
	public MovieListViewModel(FakeDatabase fakeDatabase)
	{
	this.dbConext = fakeDatabase;
	movies = dbConext.Movies;
	deleteAllMoviesCommand = new RelayCommand(new Action(deleteAllMovies));
	}
	private async void deleteAllMovies()
	{
	await dbConext.Clear();
	Movies.Clear();
	}
	}
	}

view raw MovieListViewModel.cs hosted with ❤ by GitHub
• 建立ViewModelLocator負責提供所有ViewModel元件的實體並且在這邊把FakeDatabase注入到我們的ViewModel裡面

	using SimpleMVVM.Data;
	using System.Collections.Generic;
	namespace SimpleMVVM.ViewModels
	{
	public class ViewModelLocator
	{
	private Dictionary<string, ViewModelBase> modSet;
	private FakeDatabase dbContext;
	public ViewModelLocator()
	{
	modSet = new Dictionary<string, ViewModelBase>();
	dbContext = new FakeDatabase();
	InitializeDatabase();
	MovieListViewModel movieListViewModel = new MovieListViewModel(dbContext);
	modSet.Add("MovieListViewModel", movieListViewModel);
	}
	public MovieListViewModel MovieListViewModel
	{
	get => (MovieListViewModel)modSet["MovieListViewModel"];
	}
	public async void InitializeDatabase()
	{
	await dbContext.LoadMoviesFromFile();
	}
	}
	}

view raw ViewModelLocator.cs hosted with ❤ by GitHub

第四步, 設計View元件

• 先替MainPage改個比較直覺的名字, 我們在這裡把它改成MovieListView
• 修改App.xmal(註冊ViewModelLocator)

	<Application
	x:Class="SimpleMVVM.App"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SimpleMVVM"
	RequestedTheme="Dark"
	xmlns:vm="using:SimpleMVVM.ViewModels">
	<Application.Resources>
	<ResourceDictionary>
	<vm:ViewModelLocator x:Key="ViewModelLocator"/>
	</ResourceDictionary>
	</Application.Resources>
	</Application>

view raw App.xaml hosted with ❤ by GitHub
• 修改MovieListView, 將DataContext 設為MovieListViewModel, 並加入ListBox, Button等元件

	<Page
	x:Class="SimpleMVVM.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SimpleMVVM"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	DataContext="{Binding Source= {StaticResource ViewModelLocator}, Path=MovieListViewModel}"
	>
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Movie List" Margin="10" />
	<StackPanel Orientation="Vertical" Grid.Row="1">
	<ListBox Margin="10"
	ItemsSource="{Binding Movies, Mode=TwoWay}"
	SelectedItem="{Binding SelectedMovie, Mode=TwoWay}"
	Height="250"
	Width="Auto"
	MaxWidth="450"
	HorizontalAlignment="Left"
	ScrollViewer.VerticalScrollBarVisibility="Auto"
	>
	<ListBox.ItemTemplate>
	<DataTemplate>
	<StackPanel Orientation="Vertical">
	<TextBlock Text="{Binding Name, Mode=TwoWay}"/>
	<TextBlock Text="{Binding Price, Mode=TwoWay}"/>
	</StackPanel>
	</DataTemplate>
	</ListBox.ItemTemplate>
	</ListBox>
	<Button Margin="10" Command="{Binding DeleteAllMoviesCommand}" Content="Clear all"/>
	</StackPanel>
	</Grid>
	</Page>

view raw MovieListView.xaml hosted with ❤ by GitHub

完成以上的步驟後, 基本上MVVM的架構就出來了　　

DEMO.

使用UWP 設計 MVVM 軟體架構(二) 處理View頁面的轉換