【WPF on .NET Core 3.0】 Stylet示範項目 - 簡易圖書管理系統(4) - 圖書清單界面

在前三章中我們完成了登入視窗, 并掌握了使用Conductor來切換視窗, 但這些其實都是在為我們的系統打基礎.

而本章中我們就要開始開發系統的核心功能, 即圖書管理功能了.

通過本章, 我們會接觸到以下知識點:

使用Stylet内置IoC
使用ViewModel First解耦UI

讓我們開始吧!

關于UI

有朋友說我們的系統界面有點簡陋, 有點辜負WPF的美名. 其實UI并不是本系列文章主要關注的内容. 但是既然有朋友指出來, 那麼這裡就稍微美化一下UI, 這樣看起來也賞心悅目一些.

WPF的UI庫有很多, 這裡我們使用一個很有名的開源UI庫: Material Design In XAML.

WPF使用UI庫是很簡單的, 這裡就不做過多說明了, 朋友們可直接看代碼. 使用後本章最終效果如下:

【WPF on .NET Core 3.0】 Stylet示範項目 - 簡易圖書管理系統(4) - 圖書清單界面

Book Model

MVVM中第一個M即為Model的意思, 接下來我們就為圖書建立Model類, 做為圖書資訊的模型.

在工程中建立一個名為"Models"的檔案夾,并在該檔案夾下建立 Book 類和 BookType 枚舉,分别代表圖書類和圖書類型枚舉:

【WPF on .NET Core 3.0】 Stylet示範項目 - 簡易圖書管理系統(4) - 圖書清單界面

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 實作類

【WPF on .NET Core 3.0】 Stylet示範項目 - 簡易圖書管理系統(4) - 圖書清單界面

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之間的解耦.

最後運作程式, 确認運作正常.

本章的任務就完成了. 在本章中, 我們建立了一個圖書元件, 并使用ViewModel First來驅動各個UI部分.下一章中我們會講解Master-Detail這種經典的資料表現形式. 希望朋友們能多多留言, 交流心得. 源碼托管在GITHUB上.

Happy Coding~

【WPF on .NET Core 3.0】 Stylet示範項目 - 簡易圖書管理系統(4) - 圖書清單界面

關于UI

Book Model

Book服務

Book項目

Book清單

繼續閱讀

Redux三部曲之曲一《還闊以》

領域模組化實作思考

推薦一些前端移動裝置常用的架構！

UI設計師/前端開發工程師招聘

如何減少UI設計師産品與前端工程師的溝通成本

項目管理那些事兒

pmbok學習筆記（1）

wecenter二次開發系列（三）——多個wc架構同域網站共享cookie

下載下傳APP顯示伺服器檢索資訊出錯 ”RPC:S-7:AEC-0“等

RCP應用程式開發之四——應用程式窗體生成過程1

SSM架構（二）------------表現層的SpringMVC

阿裡巴巴分布式服務架構 Dubbo 團隊成員梁飛專訪

[轉]如何成長為一名全棧工程師全棧工程師

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

android 主線程的相關問題

WPF開發帶水印的輸入框