Xamarin.Forms 導航抽屜之儀表版 頁面

目的

當在進行 Xamarin.Forms 專案開發的時候，應用程式的首頁設計，有許多種方式，其中一種就是設計成為具有導航抽屜的效果；當應用程式一啟動的之後，就會進入到導航抽屜頁面，使用者可以使用手勢從螢幕左方往右滑動，此時，會有一個面板滑出，這時，使用者可以從這個清單中，選擇需要執行的功能，操作相關內容。

底下動畫圖片，說明了導航抽屜的使用方式。

學習重點

在這個練習專案中，將會讓您學會底下技能與方法的使用:

• 學會如何製作出一個企業內部具有儀表板功能的應用程式框架
• 導航頁面與配合 NavigationService.NavigateAsync 的使用方式
• 使用 NavigationPage 產生具有工具列的導航頁面功能
• 使用 Prism 專案樣板，建立第一個 Xamarin.Forms 專案、檢視、檢視模型
• 如何使用 MasterDetailPage 定義出導航抽屜功能表
• 使用 Style & x:Key 定義出反覆使用的樣式
• 如何使用 GestureRecognizers 定義檢視(View)的手勢操作反映 ICommand 事件
• 了解與使用 DatePicker 與 TimePicker 的使用方式與雙向資料綁定用法
• 學習 IPageDialogService.DisplayAlertAsync 的警告對話窗的使用方式
• 使用 單行文字輸入的 Entry 控制項與多行文字輸入的 Editor，與使用 Keyboard 屬性，限制使用者的輸入鍵盤出現方式。
• 簡單使用 ScrollView 控制項的方式與執行效果
• 在 iOS 平台下，漢堡按鈕圖片可以出現

專案原始碼

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/HomeDrawer

專案使用到的圖片

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/HomeDrawer%20Images

實作方法

建立專案

1. 在 Visual Studio 2015，點選功能表 檔案 > 新增 > 專案
2. 在 新增專案 對話窗內，點選 範本 > Visual C# > Prism > Prism Unity App (Forms)
3. 在底下名稱欄位中，輸入 HomeDrawer 最後，點選 確定 按鈕。
4. 當出現 Prism for Xamarin.Forms - Project Wizard 對話窗，請勾選 Android, iOS, UWP 這三個選項，表示您想要產生使用 Prism 框架的這三種原生 Xamarin.Forms 專案，最後點選 Create 按鈕。

當專案建立到一半，若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統，此時會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，這不影響您繼續開發 Xamarin.Forms 的應用程式，只不過此時，您無法編譯與執行 iOS 的應用程式。

1. 接著會看到 新的通用Windows專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
2. 最後，整個新的 Xamarin.Forms 專案就建立完成了。

若您無法看到 Prism 項目，用來建立 Prism 類型專案，那可能是您的 Visual Studio 2015 內沒有安裝Prism Template Pack 擴充功能，請參考 附件 : 使用 Visual Studio 2015 增加 Prism 專案樣版

1. 滑鼠右擊 HomeDrawer.Droid，選擇 設定為起始專案
2. 展開 HomeDrawer.Droid > Properties，滑鼠雙擊 Properties 這個節點
3. 在標籤頁次 Application，選擇項目 Minimum Android to target的下拉選單，選擇值為 Android 4.4 (API Level 19 - Kit Kat) 這個選項，接著按下 Ctrl + S 組合案件，儲存此次修改設定。
4. 滑鼠右擊 HomeDrawer.Droid，選擇 建置 進行專案編譯

開發前準備工作

建立資料夾

1. 請在核心PCL 專案內，建立一個 Helper 資料夾

複製專案使用的圖片檔案

1. 請從底下網址取得所要用到的圖片檔案到電腦的硬碟某個目錄下
   https://github.com/vulcanlee/XF-Pages-Samples/tree/master/HomeDrawer%20Images
2. 使用檔案總管選擇剛剛下載完成的圖檔
3. 利用檔案總管，拖拉這些圖檔到 Android 專案內的 Resources/drawable 資料夾內
4. 利用檔案總管，拖拉這些圖檔到 iOS 專案內的 Resources 資料夾內
5. 利用檔案總管，拖拉這些圖檔到 UWP 專案內的 Assets 資料夾內

專案開發

建立 Helper 類別

1. 滑鼠右擊核心PCL專案的 Helper 資料夾，選擇 加入 > 類別
2. 在對話窗點選 Visual C# > 類別
3. 在名稱欄位輸入 AppHelper，接著點選 新增 按鈕
4. 將底下 C# 複製到剛剛建立的檔案內

AppHelper.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace HomeDrawer.Helper
{
    public class AppHelper
    {
        public static string 版本資訊 = "版本 1.7";
    }
}

建立 AboutPage 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 AboutPage，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

AboutPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:Helper="clr-namespace:HomeDrawer.Helper"
             x:Class="HomeDrawer.Views.AboutPage">

  <StackLayout
    HorizontalOptions="Center" VerticalOptions="Center"
    >
    <Label
      Text="多奇數位創意 行動平台"
      FontSize="30"
      HorizontalOptions="Center" VerticalOptions="Center"
      />
    <Label
      Text="{x:Static Helper:AppHelper.版本資訊}"
      FontSize="16"
      FontAttributes="Bold,Italic"
      HorizontalOptions="Center" VerticalOptions="Center"
      />
  </StackLayout>
</ContentPage>

建立 Leave1Page 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 Leave1Page，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

Leave1Page.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                prism:ViewModelLocator.AutowireViewModel="True"
                xmlns:local="clr-namespace:HomeDrawer.Views;assembly=HomeDrawer"
                Title="請假系統"
                x:Class="HomeDrawer.Views.Leave1Page">

  <Button
    Text="開始申請"
    Command="{Binding 請假申請Command}"
    HorizontalOptions="Center" VerticalOptions="Center"
    />
</ContentPage>

建立 Leave2Page 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 Leave2Page，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

Leave2Page.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             Title="請假申請"
             x:Class="HomeDrawer.Views.Leave2Page">

  <StackLayout
    Orientation="Vertical"
    HorizontalOptions="Center" VerticalOptions="Center"
    >
    <Label Text="開始日期" />
    <DatePicker 
      Date="{Binding 開始日期 , Mode=TwoWay}"
      Format="yyyy-MM-dd"
      />
    <Label Text="結束日期" />
    <DatePicker
     Date="{Binding 結束日期 , Mode=TwoWay}"
     Format="yyyy-MM-dd"
      />
    <Button
      Text="送出"
      Command="{Binding 請假送出Command}"
      HorizontalOptions="Center"
      />
  </StackLayout>
</ContentPage>

建立 LogbookAppPage 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 LogbookAppPage，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

LogbookAppPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             Title="工作報告申請"          
             x:Class="HomeDrawer.Views.LogbookAppPage">

  <StackLayout
    Margin="20"
    Orientation="Vertical">
    <Label Text="工作日期" />
    <DatePicker
      Date="{Binding 工作日期 , Mode=TwoWay}"
      Format="yyyy-MM-dd"
      />
    <Label Text="工作項目" />
    <Editor
      HeightRequest="150" 
      Text="{Binding 工作項目, Mode=TwoWay}"
      />
    <Label Text="工作時數" />
    <Entry
      Text="{Binding 工作時數, Mode=TwoWay}"
      Keyboard="Numeric"
      />
    <Button
      Text="送出"
      Command="{Binding 工作報告申請送出Command}"
      HorizontalOptions="Center"
      />

  </StackLayout>
</ContentPage>

建立 LogbookQuery 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 LogbookQuery，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

LogbookQuery.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             Title="工作報告查詢"
             x:Class="HomeDrawer.Views.LogbookQuery">

  <ScrollView
    Orientation="Vertical"
    >
    <StackLayout Margin="20,0">
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
      <Label Text="工作報告" />
    </StackLayout>
  </ScrollView>
</ContentPage>

建立 NaviPage 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 NaviPage，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

NaviPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                prism:ViewModelLocator.AutowireViewModel="True"
                xmlns:local="clr-namespace:HomeDrawer.Views;assembly=HomeDrawer" 
                x:Class="HomeDrawer.Views.NaviPage">

</NavigationPage>

建立 OvertimePage 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 OvertimePage，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

OvertimePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             Title="加班申請"
             x:Class="HomeDrawer.Views.OvertimePage">

  <StackLayout
    Margin="20"
    Orientation="Vertical">
    <Label Text="加班日期" />
    <DatePicker
      Date="{Binding 加班日期 , Mode=TwoWay}"
      Format="yyyy-MM-dd"
      />
    <Label Text="加班時間" />
    <TimePicker
      Time="{Binding 加班時間 , Mode=TwoWay}"
      Format="HH點mm分"
      />
    <Label Text="加班時數" />
    <Entry 
      Text="{Binding 加班時數, Mode=TwoWay}"
      Keyboard="Numeric"
      />
    <Button
      Text="送出"
      Command="{Binding 加班申請送出Command}"
      HorizontalOptions="Center"
      />

  </StackLayout>

</ContentPage>

建立 PreferencePage 檢視 (View)

1. 滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
3. 在名稱欄位輸入 PreferencePage，接著點選 新增 按鈕
4. 將底下 XAML 標記宣告複製到剛剛建立的檔案內

PreferencePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="HomeDrawer.Views.PreferencePage">

</ContentPage>

修改 MainPage 檢視 (View)

1. 在核心PCL專案的 Views 資料夾找到 MainPage.xaml 檔案，滑鼠雙擊以開啟這個檔案
2. 將底下 XAML 標記宣告複製到剛剛開啟的檔案內

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:local="clr-namespace:HomeDrawer.Views"
             x:Class="HomeDrawer.Views.MainPage"
             Title="MainPage">

  <MasterDetailPage.Master >
    <ContentPage Title="功能表" Icon="hamburger.png">
      <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                  iOS="0,20,0,0" Android="0" WinPhone="0,0"
                  />
      </ContentPage.Padding>

      <ContentPage.Resources>
        <ResourceDictionary>
          <Style x:Key="MenuItemLevel1Style" TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Start" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="Margin" Value="35,10,0,0" />
          </Style>
          <Style x:Key="MenuItemLevel2Style" TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Start" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="Margin" Value="60,10,0,0" />
          </Style>
        </ResourceDictionary>
      </ContentPage.Resources>
      <StackLayout
        Orientation="Vertical" BackgroundColor="#80bfff"
        VerticalOptions="FillAndExpand">
        <StackLayout
          HeightRequest="100"          
          Orientation="Vertical"
          VerticalOptions="Center"
          BackgroundColor="#0080ff"
          >
          <Label
            Text ="多奇數位創意"
            FontSize="30"
            TextColor="White"
            HorizontalOptions="Center" VerticalOptions="Center"
            Margin="0,10,0,0"
                    />
          <Label
            Text ="行動平台"
            FontSize="20"
            TextColor="White"
            HorizontalOptions="Center" VerticalOptions="Center"
                    />
        </StackLayout>

        <Label
          Text ="加班申請"
          Style="{StaticResource MenuItemLevel1Style}"
          >
          <Label.GestureRecognizers>
            <TapGestureRecognizer
                Command="{Binding 加班申請Command}"/>            
          </Label.GestureRecognizers>
        </Label>
        <Label
          Text ="請假系統"
          Style="{StaticResource MenuItemLevel1Style}"
          >
          <Label.GestureRecognizers>
            <TapGestureRecognizer
                Command="{Binding 請假系統Command}"/>
          </Label.GestureRecognizers>
        </Label>
        <Label
          Text ="工作報告"
          Style="{StaticResource MenuItemLevel1Style}"
          />
        <Label
          Text ="填寫" 
          Style="{StaticResource MenuItemLevel2Style}"
          >
          <Label.GestureRecognizers>
            <TapGestureRecognizer
                Command="{Binding 工作報告填寫Command}"/>
          </Label.GestureRecognizers>
        </Label>
        <Label
          Text ="查詢" 
          Style="{StaticResource MenuItemLevel2Style}"
          >
          <Label.GestureRecognizers>
            <TapGestureRecognizer
                Command="{Binding 工作報告查詢Command}"/>
          </Label.GestureRecognizers>
        </Label>
        <Label
          Text ="關於"
          Style="{StaticResource MenuItemLevel1Style}"
          >
          <Label.GestureRecognizers>
            <TapGestureRecognizer
                Command="{Binding 關於Command}"/>
          </Label.GestureRecognizers>
        </Label>

      </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>
  <!--<MasterDetailPage.Detail>
    <local:OvertimePage />
  </MasterDetailPage.Detail>-->
</MasterDetailPage>

建立 AboutPageViewModel 檢視模型 (ViewModel)

. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目

1. 在對話窗點選 Visual C# > Prism > Prism ViewModel
2. 在名稱欄位輸入 AboutPageViewModel，接著點選 新增 按鈕

建立 Leave1PageViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 Leave1PageViewModel，接著點選 新增 按鈕
4. 將底下 C# 程式碼複製到剛剛建立的檔案內

Leave1PageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;

namespace HomeDrawer.ViewModels
{
    public class Leave1PageViewModel : BindableBase, INavigationAware
    {
        #region DI
        INavigationService _navigationService;
        #endregion

        #region ICommand
        public DelegateCommand 請假申請Command { get; set; }
        #endregion
        public Leave1PageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

            請假申請Command = new DelegateCommand(請假申請);
        }

        private void 請假申請()
        {
            _navigationService.NavigateAsync(new Uri("Leave2Page", UriKind.Relative));
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
        }
    }
}

建立 Leave2PageViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 Leave2PageViewModel，接著點選 新增 按鈕
4. 將底下 C# 程式碼複製到剛剛建立的檔案內

Leave2PageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;

namespace HomeDrawer.ViewModels
{
    public class Leave2PageViewModel : BindableBase, INavigationAware
    {
        #region DI
        INavigationService _navigationService;
        IPageDialogService _dialogService;
        #endregion

        #region ICommand
        public DelegateCommand 請假送出Command { get; set; }
        #endregion

        #region ViewModel
        #region 開始日期
        private DateTime _開始日期 = DateTime.Now.AddDays(1);

        public DateTime 開始日期
        {
            get { return _開始日期; }
            set { SetProperty(ref _開始日期, value); }
        }

        #endregion

        #region 結束日期
        private DateTime _結束日期= DateTime.Now.AddDays(1);

        public DateTime 結束日期
        {
            get { return _結束日期; }
            set { SetProperty(ref _結束日期, value); }
        }

        #endregion
        #endregion

        public Leave2PageViewModel(INavigationService navigationService, IPageDialogService dialogService)
        {
            _navigationService = navigationService;
            _dialogService = dialogService;

            請假送出Command = new DelegateCommand(請假送出);
        }

        private async void 請假送出()
        {
            var d1 = 開始日期.ToString("yyyy-MM-dd");
            var d2 = 結束日期.ToString("yyyy-MM-dd");
            var foo = await _dialogService.DisplayAlertAsync("警告", $"您確定要送出這筆請假申請({d1} ~ {d2})嗎?", "是", "否");
            if (foo == true)
            {
                await _navigationService.GoBackAsync();
            }
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
        }
    }
}

建立 LogbookAppViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 LogbookAppViewModel，接著點選 新增 按鈕
4. 將底下 C# 程式碼複製到剛剛建立的檔案內

LogbookAppViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;

namespace HomeDrawer.ViewModels
{
    public class LogbookAppViewModel : BindableBase
    {
        #region DI
        INavigationService _navigationService;
        IPageDialogService _dialogService;
        #endregion

        #region ICommand
        public DelegateCommand 工作報告申請送出Command { get; set; }
        #endregion

        #region ViewModel
        #region 工作日期
        private DateTime _工作日期 = DateTime.Now;

        public DateTime 工作日期
        {
            get { return _工作日期; }
            set { SetProperty(ref _工作日期, value); }
        }

        #endregion

        #region 工作項目
        private string _工作項目 = "4";

        public string 工作項目
        {
            get { return _工作項目; }
            set { SetProperty(ref _工作項目, value); }
        }

        #endregion

        #region 工作時數
        private string _工作時數 = "4";

        public string 工作時數
        {
            get { return _工作時數; }
            set { SetProperty(ref _工作時數, value); }
        }

        #endregion
        #endregion

        public LogbookAppViewModel(INavigationService navigationService, IPageDialogService dialogService)
        {
            _navigationService = navigationService;
            _dialogService = dialogService;


            工作報告申請送出Command = new DelegateCommand(工作報告申請送出);
        }

        private void 工作報告申請送出()
        {
        }
    }
}

建立 LogbookQueryViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 LogbookQueryViewModel，接著點選 新增 按鈕

建立 NaviPageViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 NaviPageViewModel，接著點選 新增 按鈕

建立 OvertimePageViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 OvertimePageViewModel，接著點選 新增 按鈕
4. 將底下 C# 程式碼複製到剛剛建立的檔案內

OvertimePageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;

namespace HomeDrawer.ViewModels
{
    public class OvertimePageViewModel : BindableBase
    {
        #region DI
        INavigationService _navigationService;
        IPageDialogService _dialogService;
        #endregion

        #region ICommand
        public DelegateCommand 加班申請送出Command { get; set; }
        #endregion

        #region ViewModel
        #region 加班日期
        private DateTime _加班日期 = DateTime.Now;

        public DateTime 加班日期
        {
            get { return _加班日期; }
            set { SetProperty(ref _加班日期, value); }
        }

        #endregion

        #region 加班時間
        private TimeSpan _加班時間 = DateTime.Now.TimeOfDay;

        public TimeSpan 加班時間
        {
            get { return _加班時間; }
            set { SetProperty(ref _加班時間, value); }
        }

        #endregion

        #region 加班時數
        private string _加班時數 = "4";

        public string 加班時數
        {
            get { return _加班時數; }
            set { SetProperty(ref _加班時數, value); }
        }

        #endregion
        #endregion

        public OvertimePageViewModel(INavigationService navigationService, IPageDialogService dialogService)
        {
            _navigationService = navigationService;
            _dialogService = dialogService;


            加班申請送出Command = new DelegateCommand(加班申請送出);
        }

        private void 加班申請送出()
        {
        }
    }
}

建立 PreferencePageViewModel 檢視模型 (ViewModel)

1. 滑鼠右擊核心PCL專案的 ViewModels 資料夾，選擇 加入 > 新增項目
2. 在對話窗點選 Visual C# > Prism > Prism ViewModel
3. 在名稱欄位輸入 PreferencePageViewModel，接著點選 新增 按鈕

修改 MainPageViewModel 檢視模型 (ViewModel)

. 在核心PCL專案的 ViewModels 資料夾，使用滑鼠雙擊 MainPageViewModel

1. 將底下 C# 程式碼複製到剛剛開啟的檔案內

MainPageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;

namespace HomeDrawer.ViewModels
{
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        #region DI
        INavigationService _navigationService;
        #endregion

        #region ICommand
        public DelegateCommand 加班申請Command { get; set; }
        public DelegateCommand 請假系統Command { get; set; }
        public DelegateCommand 工作報告填寫Command { get; set; }
        public DelegateCommand 工作報告查詢Command { get; set; }
        public DelegateCommand 關於Command { get; set; }
        #endregion

        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

            加班申請Command = new DelegateCommand(加班申請);
            請假系統Command = new DelegateCommand(請假系統);
            工作報告查詢Command = new DelegateCommand(工作報告查詢);
            工作報告填寫Command = new DelegateCommand(工作報告填寫);
            關於Command = new DelegateCommand(關於);
        }

        private void 請假系統()
        {
            _navigationService.NavigateAsync(new Uri("http://vulcan.net/MainPage/NaviPage/Leave1Page", UriKind.Absolute));
        }

        private void 工作報告填寫()
        {
            _navigationService.NavigateAsync(new Uri("http://vulcan.net/MainPage/NaviPage/LogbookAppPage", UriKind.Absolute));
        }

        private void 工作報告查詢()
        {
            _navigationService.NavigateAsync(new Uri("http://vulcan.net/MainPage/NaviPage/LogbookQuery", UriKind.Absolute));
        }

        private void 加班申請()
        {
            _navigationService.NavigateAsync(new Uri("http://vulcan.net/MainPage/NaviPage/OvertimePage", UriKind.Absolute));
        }

        private void 關於()
        {
            _navigationService.NavigateAsync(new Uri("http://vulcan.net/MainPage/NaviPage/AboutPage", UriKind.Absolute));
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            if (parameters.ContainsKey("title"))
                Title = (string)parameters["title"] + " and Prism";
        }
    }
}

修改 Xamarin.Forms 進入點 App.xaml.cs

App.xaml.cs

1. 在核心PCL專案找到 App.xaml.cs 檔案，滑鼠雙擊以開啟這個檔案
2. 將底下 C# 複製到剛剛開啟的檔案內

using Prism.Unity;
using HomeDrawer.Views;

namespace HomeDrawer
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync(new System.Uri("http://vulcan.net/MainPage/NaviPage/AboutPage", System.UriKind.Absolute));
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<AboutPage>();
            Container.RegisterTypeForNavigation<NaviPage>();
            Container.RegisterTypeForNavigation<Leave1Page>();
            Container.RegisterTypeForNavigation<Leave2Page>();
            Container.RegisterTypeForNavigation<LogbookAppPage>();
            Container.RegisterTypeForNavigation<LogbookQuery>();
            Container.RegisterTypeForNavigation<OvertimePage>();
            Container.RegisterTypeForNavigation<PreferencePage>();
        }
    }
}

UWP Windows 10 App, TitleBar Status bar 的客製化

在這篇文章中，有提到如何客製化 Windows 10 UWP 的平板模式的 TitleBar 與 Mobile 模式的 StatusBar
不過，請記得要加入 擴充功能 的 Windows Desktop Extensions for the UWP or Windows Mobile Extensions for the UWP 的參考到您的專案內。

//PC 平板模式的 TitleBar 客製化程式碼
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
{
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    if (titleBar != null)
    {
        titleBar.ButtonBackgroundColor = Colors.DarkBlue;
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.BackgroundColor = Colors.Blue;
        titleBar.ForegroundColor = Colors.White;
    }
 }

//Mobile 模式的 Status 客製化程式碼
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{

    var statusBar = StatusBar.GetForCurrentView();
    if (statusBar != null)
    {
        statusBar.BackgroundOpacity = 1;
        statusBar.BackgroundColor = Colors.DarkBlue;
        statusBar.ForegroundColor = Colors.White;
    }
}