2020年9月21日 星期一

Entity Framework Core - 建立練習使用的 Contoso University 資料庫

 

Entity Framework Core - 建立練習使用的 Contoso University 資料庫

今年將會撰寫許多關於 Entity Framework Core 的設計與使用說明文章,不過,當想要實際進行演練這些 Entity Framework Core 的用法,還是需要有個範例資料庫,並且該資料庫內最好已經具備了許多測試資料;在這裡,將會準備 Contoso University 資料庫 這個範例資料庫,因此,接下來就來說明如何安裝這個練習用的資料庫到讀者的開發電腦上。

使用 VS2019 匯入資料庫

  • 開啟 [Visual Studio 2019]

  • 選擇對話窗右下方的 [不使用程式碼繼續(W)] 連結

  • 點選 Visual Studio 2019 功能表的 [檢視] > [SQL Server 物件總管] 選項

    SQL Server 物件總管

  • 在 [SQL Server 物件總管] 視窗內,展開 [SQL Server] 節點,便會 [(localdb)\MSSQLLocalDB] 這個資料庫服務

  • 滑鼠右擊剛剛看到的 localdb 節點,選擇 [新增查詢] 功能表選項

  • 此時,將會顯示一個 [SQLQuery1.sql] 視窗

  • 請使用瀏覽器打開這個連結 Contoso University 資料庫,接這些內容複製到系統的剪貼簿內

  • 切換到 [SQLQuery1.sql] 視窗內,把這些內容貼到該視窗內

  • 點選該視窗標籤下方的綠色三角形,執行這些 SQL 敘述

    這個 Contoso University 資料庫 SQL 敘述,將會先把原先的 School 資料庫刪除掉 (可以從上圖的第 9~11 行看到這些 SQL 敘述) ,接著,將會建立 School 資料庫建立起來,並且建立相關資料表與產生測試資料紀錄到資料庫內。

    若執行完成之後,可以滑鼠右擊 [SQL Server 物件總管] 內的 localdb 節點,選擇 [重新整理]

確認練習用的資料庫已經建立完成

  • 請在 [SQL Server 物件總管] 視窗內的 [(localdb)\MSSQLLocalDB] > [資料庫] 節點內,找到 [School] 資料庫節點

  • 展開這個 [School] 節點,便可以看到最新產生的練習用資料庫了

2020年5月12日 星期二

WPF Prism 4 - 使用 Prism 開發框架來製作一個具有 WPF 導航檢視功能教學說明程式

WPF Prism 4 - 使用 Prism 開發框架來製作一個具有 WPF 導航檢視功能教學說明程式

在這篇文章,將會使用 Prism 來開發出具有導航檢視功能的 WPF 應用程式。
首先,當應用程式啟動之後,將會使用 RequestNavigate 方法,切換到 MyView 這個檢視畫面上,如同下圖。
WPF Prism
當點選 [導航下頁] 按鈕之後,將會切換到 View1 這個檢視畫面上,如同下圖。
WPF Prism
在 View1 檢視內,當點選 [導航下頁] 按鈕之後,將會切換到 View2 這個檢視畫面上,如同下圖;而當點選 [導航上頁] 按鈕之後,將會切換到 MyView 頁面。
WPF Prism
這個說明專案的原始碼位於 WPFPrismViewNavigation

準備工作

  • 首先,先要安裝 [Prism Template Pack] 到 Visual Studio 2019 內
  • 打開 Prism Template Pack 擴充功能網站
  • 下載並且安裝這個擴充功能

建立 WPF for Prism 的專案

  • 打開 Visual Studio 2019
  • 點選右下方的 [建立新的專案] 按鈕
  • [建立新專案] 對話窗將會顯示在螢幕上
  • 從[建立新專案] 對話窗的中間區域,找到 [Prism Blank App (WPF)] 這個專案樣板選項,並且選擇這個項目
    若沒有看到這個選項,則表示你的 Visual Studio 2019 開發環境中,還沒有安裝 Prism Template Pack 擴充功能
  • 點選右下角的 [下一步] 按鈕
  • 現在 [設定新的專案] 對話窗將會出現
  • 請在這個對話窗內,輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]
    在這裡請輸入 [專案名稱] 為 WPFPrismViewNavigation
  • 在最下方的 [架構] 部分,建議選取最新的 [.NET Framework 4.8]
  • 完成後,請點選 [建立] 按鈕
  • 當出現 [PRISM PROJECT WIZARD] 對話窗的時候
  • 請在 [Select Container] 選擇容器這個欄位之下拉選單,選擇你要使用的 DI 相依性注入容器,我個人習慣使用 Unity 這個 Ioc 容器
  • 之後,點選 [CREATE PROJECT] 這個按鈕
稍微等會一段時間,具有 Prism 開發框架的 WPF 專案將會建立起來

加入 WPF 套件

  • 滑鼠右擊剛剛建立的專案節點
  • 選擇 [管理 NuGet 套件]
  • 找到 [Prism.Wpf] 這個套件,並且安裝起來

設定第一個要顯示的 View 檢視

在剛剛建立的專案中,加入三個 View 與 ViewModel

  • 滑鼠右擊剛剛建立的專案,選擇 [加入] > [新增資料夾],建立 Views & ViewModels 這兩個資料夾
  • 滑鼠右擊 [Views] 資料夾
  • 選擇 [加入] > [新增項目]
  • 此時,[新增項目] 對話窗將顯示出來
  • 請在該對話窗的左方,展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
  • 在中間區域選擇 [Prism UserControl (WPF)] 選項
  • 在下方名稱欄位輸入 MyView
  • 最後點選 [新增] 按鈕
此時,將會看到該專案的 [Views] 資料夾內新產生了一個 [MyView.xaml] 這個檔案,另外,在 [ViewModel] 資料夾內也產生了一個 [MyViewViewModel] 這個類別檔案。
打開 [MyView.xaml] 檔案,填入底下 XAML 標記宣告
<UserControl x:Class="WPFPrismViewNavigation.Views.MyView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid Background="LightGray">
        <StackPanel
            Orientation="Vertical">
            <TextBlock Text="MyView"
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   FontSize="48" Foreground="White"/>
            <TextBlock Text="{Binding Message}"
                       HorizontalAlignment="Center" VerticalAlignment="Center"
                       FontSize="30"
                       Foreground="Green"/>
            <Button 
                HorizontalAlignment="Center"
                Command="{Binding GoNextCommand}">導航到下頁</Button>
        </StackPanel>
    </Grid>
</UserControl>
在這個檢視內,將會宣告一個按鈕並且有個 Command 命令屬性
  • 請要修正該檢視會搭配的 ViewModel 類別,請打開 [ViewModels] 資料夾下的 MyViewViewModel.cs 檔案
  • 使用底下 C# 程式碼進行替換
public class MyViewModel : BindableBase , INavigationAware
{
    private string message;
    private readonly IRegionManager regionManager;
 
    public string Message
    {
        get { return message; }
        set { SetProperty(ref message, value); }
    }
    public DelegateCommand GoNextCommand { get; set; }
    public int Counter { get; set; }
    public MyViewModel(IRegionManager regionManager)
    {
        this.regionManager = regionManager;
        GoNextCommand = new DelegateCommand(() =>
        {
            regionManager.RequestNavigate("ContentRegion", nameof(View1));
        });
    }
 
    public bool IsNavigationTarget(NavigationContext navigationContext)
    {
        return true;
    }
 
    public void OnNavigatedFrom(NavigationContext navigationContext)
    {
    }
 
    public async void OnNavigatedTo(NavigationContext navigationContext)
    {
        await Task.Yield();
        Message = navigationContext.NavigationService.Journal.CanGoBack == false ? "尚未開始導航 "+ Counter++ : "可以回上一頁";
        //regionManager.Regions["ContentRegion"].NavigationService.Journal.Clear();
    }
}
在此 ViewModel 類別內,將會設計這個按鈕的命令觸發委派方法,因此,當使用者點選這個按鈕的時候,將會使用 regionManager.RequestNavigate("ContentRegion", nameof(View1)); 敘述,切換到 View1 檢視內。
另外,這個 ViewModel 也有實作出 INavigationAware 這個介面,因此,將會需要實作出三個方法,分別會於頁面切換過程中,會被觸發執行的。
接下來,繼續產生一個 View1 檢視
  • 首先,滑鼠右擊 [Views] 資料夾
  • 選擇 [加入] > [新增項目]
  • 此時,[新增項目] 對話窗將顯示出來
  • 請在該對話窗的左方,展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
  • 在中間區域選擇 [Prism UserControl (WPF)] 選項
  • 在下方名稱欄位輸入 View1
  • 最後點選 [新增] 按鈕
此時,將會看到該專案的 [Views] 資料夾內新產生了一個 [View1.xaml] 這個檔案,另外,在 [ViewModel] 資料夾內也產生了一個 [View1ViewModel] 這個類別檔案。
打開 [View1.xaml] 檔案,填入底下 XAML 標記宣告
<UserControl x:Class="WPFPrismViewNavigation.Views.View1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid Background="LightBlue">
        <StackPanel
            Orientation="Vertical">
            <TextBlock Text="View1"
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   FontSize="48" Foreground="White"/>
            <TextBlock Text="{Binding Message}"
                       HorizontalAlignment="Center" VerticalAlignment="Center"
                       FontSize="30"
                       Foreground="Green"/>
            <StackPanel
                Orientation="Horizontal"
                HorizontalAlignment="Center">
                <Button 
                    HorizontalAlignment="Center"
                    Command="{Binding GoPrevCommand}">導航到上頁</Button>
                <Button 
                    HorizontalAlignment="Center"
                    Command="{Binding GoNextCommand}">導航到下頁</Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>
在這個檢視內,將會宣告一個按鈕並且有個 Command 命令屬性
  • 請要修正該檢視會搭配的 ViewModel 類別,請打開 [ViewModels] 資料夾下的 View1ViewModel.cs 檔案
  • 使用底下 C# 程式碼進行替換
public class View1ViewModel : BindableBase, INavigationAware
{
    private string message;
    private readonly IRegionManager regionManager;
    private readonly IRegionNavigationService regionNavigationService;
 
    public string Message
    {
        get { return message; }
        set { SetProperty(ref message, value); }
    }
    public int Counter { get; set; }
    public DelegateCommand GoNextCommand { get; set; }
    public DelegateCommand GoPrevCommand { get; set; }
    public View1ViewModel(IRegionManager regionManager, IRegionNavigationService regionNavigationService)
    {
        this.regionManager = regionManager;
        this.regionNavigationService = regionNavigationService;
        GoNextCommand = new DelegateCommand(() =>
        {
            regionManager.RequestNavigate("ContentRegion", nameof(View2));
        });
        GoPrevCommand = new DelegateCommand(() =>
        {
            regionManager.Regions["ContentRegion"].NavigationService.Journal.GoBack();
        });
    }
 
    public bool IsNavigationTarget(NavigationContext navigationContext)
    {
        return true;
    }
 
    public void OnNavigatedFrom(NavigationContext navigationContext)
    {
    }
 
    public async void OnNavigatedTo(NavigationContext navigationContext)
    {
        await Task.Yield();
        Message = navigationContext.NavigationService.Journal.CanGoBack == false ? "尚未開始導航 ": "可以回上一頁 " + Counter++;
    }
}
在此 ViewModel 類別內,將會設計兩個按鈕的命令觸發委派方法,因此,當使用者點選 [GoNextCommand] 這個按鈕的時候,將會使用 regionManager.RequestNavigate("ContentRegion", nameof(View2)); 敘述,切換到 View2 檢視內,當使用者點選 [GoPrevCommand] 這個按鈕的時候,將會使用 regionManager.Regions["ContentRegion"].NavigationService.Journal.GoBack(); 敘述,回到上一頁檢視,也就是 MyView 檢視內。
另外,這個 ViewModel 也有實作出 INavigationAware 這個介面,因此,將會需要實作出三個方法,分別會於頁面切換過程中,會被觸發執行的。
最後,產生一個 View2 檢視
  • 首先,滑鼠右擊 [Views] 資料夾
  • 選擇 [加入] > [新增項目]
  • 此時,[新增項目] 對話窗將顯示出來
  • 請在該對話窗的左方,展開節點到 [已安裝] > [Visual C#] > [Prism] > [WPF]
  • 在中間區域選擇 [Prism UserControl (WPF)] 選項
  • 在下方名稱欄位輸入 View2
  • 最後點選 [新增] 按鈕
此時,將會看到該專案的 [Views] 資料夾內新產生了一個 [View2.xaml] 這個檔案,另外,在 [ViewModel] 資料夾內也產生了一個 [View2ViewModel] 這個類別檔案。
打開 [View2.xaml] 檔案,填入底下 XAML 標記宣告
<UserControl x:Class="WPFPrismViewNavigation.Views.View2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid Background="LightPink">
        <StackPanel
            Orientation="Vertical">
            <TextBlock Text="View2"
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   FontSize="48" Foreground="White"/>
            <TextBlock Text="{Binding Message}"
                       HorizontalAlignment="Center" VerticalAlignment="Center"
                       FontSize="30"
                       Foreground="Green"/>
            <StackPanel
                Orientation="Horizontal"
                HorizontalAlignment="Center">
                <Button 
                    HorizontalAlignment="Center"
                    Command="{Binding GoPrevCommand}">導航到上頁</Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>
在這個檢視內,將會宣告一個按鈕並且有個 Command 命令屬性
  • 請要修正該檢視會搭配的 ViewModel 類別,請打開 [ViewModels] 資料夾下的 View2ViewModel.cs 檔案
  • 使用底下 C# 程式碼進行替換
public class View2ViewModel : BindableBase, INavigationAware
{
    private string message;
    private readonly IRegionManager regionManager;
 
    public string Message
    {
        get { return message; }
        set { SetProperty(ref message, value); }
    }
    public int Counter { get; set; }
    public DelegateCommand GoPrevCommand { get; set; }
    public View2ViewModel(IRegionManager regionManager)
    {
        this.regionManager = regionManager;
        GoPrevCommand = new DelegateCommand(() =>
        {
            regionManager.Regions["ContentRegion"].NavigationService.Journal.GoBack();
        });
    }
 
    public bool IsNavigationTarget(NavigationContext navigationContext)
    {
        return true;
    }
 
    public void OnNavigatedFrom(NavigationContext navigationContext)
    {
    }
 
    public async void OnNavigatedTo(NavigationContext navigationContext)
    {
        await Task.Yield();
        Message = navigationContext.NavigationService.Journal.CanGoBack == false ? "尚未開始導航 " + this.GetHashCode() : "可以回上一頁 " + Counter++;
    }
}
在此 ViewModel 類別內,將會設計這個按鈕的命令觸發委派方法,因此,當使用者點選這個按鈕的時候,將會使用 regionManager.Regions["ContentRegion"].NavigationService.Journal.GoBack(); 敘述,退回到 View1 檢視內。
另外,這個 ViewModel 也有實作出 INavigationAware 這個介面,因此,將會需要實作出三個方法,分別會於頁面切換過程中,會被觸發執行的。

修正主專案

  • 在該專案根目錄下,找到 App.xaml 這個檔案節點
  • 展開該節點,將會看到一個 [App.xaml.cs] 這個節點
  • 滑鼠雙擊打開 [App.xaml.cs] 這個節點
  • 建立一個覆寫 ConfigureModuleCatalog 方法
  • 將該方法修改成為底下的程式碼
public partial class App
{
    protected override Window CreateShell()
    {
        return Container.Resolve<MainWindow>();
    }
 
    protected override void RegisterTypes(IContainerRegistry containerRegistry)
    {
        containerRegistry.RegisterForNavigation<MyView>();
        containerRegistry.RegisterForNavigation<View1>();
        containerRegistry.RegisterForNavigation<View2>();
    }
 
    // 在這裡指定 Region 要顯示的 View ,也是可行的
    public override void Initialize()
    {
        base.Initialize();
        IContainerProvider container = Container;
        IRegionManager regionManager = container.Resolve<IRegionManager>();
        regionManager.RequestNavigate("ContentRegion", nameof(MyView));
    }
}

執行與測試

現在可以執行這個使用 Prism 開發的 WPF 專案,看看是不是如同第一篇文章規劃的一樣方式來進行運作。