【WPF on .NET Core 3.0】 Stylet演示專案 - 簡易圖書管理系統(3) - 使用Conductor切換頁面
前兩章中, 我們已經實現了這個圖書管理系統的登入視窗, 並實施了完善的單元測試. 該是時候回過頭來關注我們的主視窗了.
一個功能豐富的系統一般會有多個頁面, 我們圖書管理系統雖然是"簡易"的, 但是同樣也有多個頁面. 所以這一章中, 我們來學習如何使用Stylet的Conductor來管理頁面的切換.
事實上, 第一章使用的
IWindowManager.ShowDialog
彈出的登入視窗也可視為一個頁面. 但是據我的個人經驗, 我更推薦將所有頁面放在一個視窗中, 這樣更方便實施MVVM. 這章過後,你可嘗試使用Conductor來顯示登入頁面.
Conductor翻譯過來是指揮的意思, 在Stylet中Conductor就是用來指揮各個ViewModel的, 因為一般在MVVM中ViewModel代表一個頁面, 所以Conductor通過管理ViewModel來實現頁面的狀態的管理. Stylet內建了多種Conductor, 適用於不同的使用場景, 這裡做一個簡要的介紹:
Conductor | 使用場景 |
---|---|
Conductor<T> |
最簡單的Conductor, 只管理一個頁面 |
Conductor<T>.Collection.OneActive |
管理多個頁面, 但只顯示其中的一個. 最典型場景如一個TabControl控制元件 |
Conductor<T>.Collection.AllActive |
管理多個頁面, 並且全部顯示. 典型場景如一個ItemControl控制元件 |
Conductor<T>.StackNavigation |
管理多個頁面, 只顯示其中一個, 但保留了之前顯示頁面的歷史可用於回退. 典型場景如一個嚮導頁面, 允許使用者通過"上一步", "下一步"切換 |
更多關於Conductor的資訊, 可參見Stylet的官方WIKI: Screens and Conductors
在本章中, 我們想要顯示兩個頁面: "首頁"和"圖書"頁面, 因為在同一時間只會顯示其中一個, 所以使用Conductor<T>
就可以了. 下面就開始我們的CODING工作:
增加首頁
在Page資料夾中新建一個名為"Home"的資料夾, 並新建一個C#類: HomeViewModel
和一個UserControl: HomeView
, 用來顯示我們系統的首頁.
將
HomeViewModel
的基類設定為Screen
:public class HomeViewModel : Screen { }
因為Home中沒有任何邏輯, 所以不需要任何其他程式碼.
在
HomeView
的XAML中增加以下XAML程式碼:<UserControl x:Class="StyletBookStore.Pages.Home.HomeView" ... > <Grid> <TextBlock FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"> 歡迎使用簡易圖書管理系統 </TextBlock> </Grid> </UserControl>
改造Shell
將
ShellViewModel
的基類改為Conductor<Screen>
:public class ShellViewModel : Conductor<Screen> { ... }
這樣
ShellViewModel
就變成了一個可管理單一頁面的Conductor了, 而且每個頁面都需要是Screen
的子類.因為我們將所有顯示部分放在各自的頁面中, 所以將
ShellView
中<Window>...</Window>
中的XAML完全刪除, 並替換為以下程式碼.<Window x:Class="StyletBookStore.Pages.ShellView" ... Title="簡易圖書管理系統"> <ContentControl s:View.Model="{Binding ActiveItem}"/> </Window>
- 將
Title
設定為我們的系統名字: "簡易圖書管理系統" 增加一個
ContentControl
用來顯示頁面內容.s:View.Model
是Stylet提供的附加屬性, 用來為View繫結ModelActiveItem
是Conductor<T>
的一個屬性, 就是該Conductor的當前的頁面. 因為ShellViewModel
繼承了Conductor<T>
, 所以在ShellView
中可以繫結該屬性.
- 將
顯示首頁
如果你現在啟動程式, 會發現程式可以正常啟動, 但是Shell中不會顯示任何內容. 這是因為我們未給ShellViewModel
這個Conductor設定ActiveItem.
在ShellViewModel
的OnViewLoaded
方法的開始位置, 增加以下程式碼, 用來在程式啟動時就顯示首頁.
protected override void OnViewLoaded()
{
// 顯示首頁
var homeViewModel = _container.Get<HomeViewModel>();
ActivateItem(homeViewModel);
// 顯示登入視窗
...
}
ActivateItem
方法是Condocutor<T>
中提供的方法.用一個新的ViewModel例項替換當前的ActiveItem
,啟用新的頁面並關閉舊的. 我們使用該方法即可實現頁面的切換.
再次啟動程式, 確認首頁已經能正常顯示了:
顯示圖書頁面
Page資料夾中新建一個名為"Books"的資料夾, 並新建一個C#類:
IndexViewModel
和一個UserControl:IndexView
, 用來顯示圖書列表頁面:要點如下:
IndexViewModel
的基類設定為Screen
IndexView
中增加一個TextBlock
用來(暫時)標識這是圖書頁面:<TextBlock Text="IndexView"/>
同樣, 在
ShellViewModel
的OnViewLoaded
方法的末尾位置, 增加以下程式碼, 用來在登入成功後, 切換到圖書頁面:
protected override void OnViewLoaded()
{
// 顯示首頁
var homeViewModel = _container.Get<HomeViewModel>();
ActivateItem(homeViewModel);
// 顯示登入視窗
...
// 顯示圖書
var indexViewModel = _container.Get<IndexViewModel>();
ActivateItem(indexViewModel);
}
再次使用ActivateItem
方法, 將圖書的ViewModel切換進來. 再次啟動程式, 確認當登入成功後, 主視窗的頁面會切換到圖書頁面.(目前只顯示一個IndeView, 我們會在下一章完善該頁面的功能)
本篇到此為止, 希望朋友們能多多留言, 鼓勵我能繼承寫下去. 原始碼託管在GITHUB上.
Happy Codi