在前三章中我們完成了登錄窗口, 並掌握了使用Conductor來切換窗口, 但這些其實都是在為我們的系統打基礎.
而本章中我們就要開始開發系統的核心功能, 即圖書管理功能了.
通過本章, 我們會接觸到以下知識點:
- 使用Stylet內置IoC
- 使用ViewModel First解耦UI
讓我們開始吧!
關於UI
有朋友說我們的系統界面有點簡陋, 有點辜負WPF的美名. 其實UI並不是本系列文章主要關注的內容. 但是既然有朋友指出來, 那么這里就稍微美化一下UI, 這樣看起來也賞心悅目一些.
WPF的UI庫有很多, 這里我們使用一個很有名的開源UI庫: Material Design In XAML.
WPF使用UI庫是很簡單的, 這里就不做過多說明了, 朋友們可直接看代碼. 使用后本章最終效果如下:
Book Model
MVVM中第一個M即為Model的意思, 接下來我們就為圖書創建Model類, 做為圖書信息的模型.
-
在工程中創建一個名為"Models"的文件夾,並在該文件夾下創建
Book類和BookType枚舉,分別代表圖書類和圖書類型枚舉:
-
Book類內容如下:/// <summary> /// 圖書 /// </summary> public class Book { /// <summary> /// 書名 /// </summary> public string Name { get; set; } /// <summary> /// 類型 /// </summary> public BookType Type { get; set; } /// <summary> /// 出版年月 /// </summary> public DateTime PublishDate { get; set; } /// <summary> /// 價格 /// </summary> public float Price { get; set; } /// <summary> /// 封面URL /// </summary> public string CoverUrl { get; set; } public Book(string name, BookType type, DateTime publishDate, float price, string coverUrl) { Name = name; Type = type; PublishDate = publishDate; Price = price; CoverUrl = coverUrl; } } -
BookType內容如下:public enum BookType { /// <summary> /// 未定義 /// </summary> Undefined, /// <summary> /// 傳記 /// </summary> Biography, /// <summary> /// 奇幻 /// </summary> Fantastic, /// <summary> /// 恐怖 /// </summary> Horror, /// <summary> /// 科幻 /// </summary> ScienceFiction, /// <summary> /// 懸疑 /// </summary> Mystery, /// <summary> /// 編程 /// </summary> Programming, }兩個文件內容都很簡單, 無需做過多解釋.
Book服務
雖然我們的簡易系統並不使用數據庫, 但是我們仍然需要將圖書信息的獲取抽象為一個單獨的服務, 這樣將來如果要實現從數據庫(或其它位置, 如網絡)獲取圖書信息, 只需要提供相關實現即可.
-
創建一個名為"Services"的文件夾, 並創建
IBookService接口和BookService實現類
-
IBookService接口定義如下:public interface IBookService { IEnumerable<Book> GetAllBooks(); }現在只需要有一個方法:
GetAllBooks- 獲取所有圖書 -
BookService類實現如下:public class BookService : IBookService { private readonly List<Book> _bookStore; public BookService() { _bookStore = new List<Book> { new Book("阿米爾·汗：我行我素", BookType.Biography, DateTime.Parse("2017-6"), 52.8f, "https://img1.doubanio.com/view/subject/l/public/s29467958.jpg"), new Book("三體：“地球往事”三部曲之一", BookType.ScienceFiction, DateTime.Parse("2008-1"), 23f, "https://img1.doubanio.com/view/subject/l/public/s2768378.jpg"), new Book("三體Ⅱ：黑暗森林", BookType.ScienceFiction, DateTime.Parse("2008-5"), 32f, "https://img3.doubanio.com/view/subject/l/public/s3078482.jpg"), new Book("三體Ⅲ：死神永生", BookType.ScienceFiction, DateTime.Parse("2010-11"), 32f, "https://img9.doubanio.com/view/subject/l/public/s26012674.jpg"), new Book("肖申克的救贖", BookType.Mystery, DateTime.Parse("2006-7"), 26.9f, "https://img9.doubanio.com/view/subject/l/public/s4007145.jpg"), }; } public IEnumerable<Book> GetAllBooks() { return _bookStore; } }- 在構造方法中, 創建一個List用來存儲Book信息, 並使用代碼初始化圖書信息. 實際應用中, 這里一般是從數據庫中取得數據.
- GetAllBooks中直接返回list
-
在
Bootstrapper類中的ConfigureIoC方法中, 注冊服務:protected override void ConfigureIoC(IStyletIoCBuilder builder) { // Configure the IoC container in here builder.Bind<IBookService>().To<BookService>(); }這樣我們就可以將
IBookService注入到需要使用的類中了.
Book項目
MVVM中, 我們可將界面拆解成一個個的小組件, 然后將它們組合在一起形成一個復雜的界面. 這樣的好處有很多:
- 不同的開發者可負責不同的組件, 便於開發
- 每個組件有自己View和ViewModel, 便於測試
- 組件可以復用, 提高開發效率
- 組件可替換, 便於擴展維護
總之, 就是將UI的部分進行解耦, 達到分而治之的目的.
在未接觸MVMM之前, 也許我會將圖書顯示的UI代碼直接放在IndexView中, 而學習了MVVM之后, 我們就會很自然的想到將每個圖書項目的顯示做成一個組件, 然后在IndexView中將所有圖書組合成一個列表來顯示.
所以, 接下來看一下是如何創建圖書項目的.
-
在"Pages\Books"文件夾下, 創建"BookItems"文件夾, 並創建一個
BookItemViewModel:public class BookItemViewModel : Screen { public Book Book { get; } public BookItemViewModel(Book book) { Book = book; } }- 該ViewModel非常簡單, 通過構造方法接收一個Book model, 然后通過只讀屬性將Book暴露出來.
-
在同一文件夾內, 創建
BookItemView:<UserControl ... d:DataContext="{d:DesignInstance bookItems:BookItemViewModel}" > <materialDesign:Card Background="WhiteSmoke"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Image Margin="0 10 0 0" Source="{Binding Book.CoverUrl}" Height="150" Stretch="Uniform" /> <DockPanel Grid.Row="1"> <TextBlock Margin="0 10 0 0" DockPanel.Dock="Top" FontWeight="Bold" Text="{Binding Book.Name}" HorizontalAlignment="Center"></TextBlock> <TextBlock Text="{Binding Book.Price, StringFormat='￥{0}'}" Margin="0 20 10 10" Foreground="Red" FontWeight="Bold" VerticalAlignment="Bottom" HorizontalAlignment="Right"></TextBlock> </DockPanel> </Grid> </materialDesign:Card> </UserControl>- 使用UserControl做為圖書組件
- 與Login類似, 使用d:DataContext指定
BookItemViewModel為設計時實例, 為XAML提供智能提示 - 使用MaterialDesign提供的Card控件來做為圖書項目UI的容器
- 然后分別顯示了圖書的封面, 書名和價格. 這里未用到Stylet的功能, 都是使用了WPF基本的綁定語法
實際開發中, 可充分利用第一章中講解的Hot Reload功能, 在運行時調整XAML.
完成后的工程結構是這樣的:
Book列表
有了圖書項目組件, 我們就可以來填充圖書列表了.
我們使用ListView來顯示圖書信息, WPF中的ListView是一個非常靈活的控件, 配合WPF強大的模板特性, 在展現集合數據時, 幾乎可以實現任何效果.
-
改造
IndexViewModel如下:public class IndexViewModel : Screen { private readonly IBookService _bookService; public ObservableCollection<BookItemViewModel> BookItems { get; set; } = new ObservableCollection<BookItemViewModel>(); public IndexViewModel(IBookService bookService) { _bookService = bookService; } protected override void OnViewLoaded() { var viewModels = _bookService.GetAllBooks() .Select(book => new BookItemViewModel(book)) ; BookItems = new ObservableCollection<BookItemViewModel>(viewModels); } }- 為圖書項目創建一個
ObservableCollection類型的屬性, 名為BookItems. 使用ObservableCollection可以在圖書增加或減少時自動發送通知 - 在構造方法中, 注入
IBookService, 並存儲為成員變量 - 在
OnViewLoaded方法中, 調用IBookService.GetAllBooks然后轉換成圖書列表ViewModel
- 為圖書項目創建一個
-
改造
IndexView如下:<UserControl ... > <ListView ItemsSource="{Binding BookItems}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <ListView.ItemsPanel> <ItemsPanelTemplate> <WrapPanel/> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.ItemTemplate> <DataTemplate> <ContentControl s:View.Model="{Binding}"></ContentControl> </DataTemplate> </ListView.ItemTemplate> </ListView> </UserControl>- 將ListView的ItemSource綁定到
IndexViewModel中BookItems - 使用
ContentControl做為ListView.ItemTemplate的數據模板- 同
ShellView中的寫法類似, 使用Stylet提供的s:View.Model為ContentControl綁定一個ViewModel(這里即是BookItemViewModel), Stylet會自動為該ContentControl加載View(即BookItemView)
- 同
可以看到, IndexView並不知道BookItemView的存在, 一切都是由后面的ViewModel關聯在一起的, 這樣我們就實現了View之間的解耦.
- 將ListView的ItemSource綁定到
最后運行程序, 確認運行正常.
本章的任務就完成了. 在本章中, 我們創建了一個圖書組件, 並使用ViewModel First來驅動各個UI部分.下一章中我們會講解Master-Detail這種經典的數據表現形式. 希望朋友們能多多留言, 交流心得. 源碼托管在GITHUB上.
Happy Coding~