多奇數位創意之標籤式頁面

目的

當在進行 Xamarin.Forms 專案開發的時候，應用程式的首頁設計，有許多種方式，其中一種就是設計成為具有多標籤頁次的效果，為了方便展示，每個標籤頁面將會使用 WebView 包裝某網頁內容。

底下動畫圖片，說明了多標籤頁次的使用方式。

學習重點

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

將企業內部網站建置到行動應用程式的作法
WebView 控制項的使用方式與效果
NavigationService.NavigateAsync 的絕對與相對位置的導航使用方式
在 Xaml 檔案中，加入其他 Xaml 項目命名空間做法
使用 TabbedPage.BarBackgroundColor & TabbedPage.BarTextColor 屬性，客製化標籤式頁面的配色效果
使用 NavigationPage.BarBackgroundColor & NavigationPage.BarTextColor 屬性，客製化導航頁面的配色效果
多頁次頁面的 TabbedPage 使用方式與宣告方法
硬體回上一頁按鈕的控制方法
導航頁面的工作列項目的使用方式
IConfirmNavigationAsync 介面的實作應用，用於控制當要來開這個頁面前，需要經過檢查與運作，才能夠會執行
在標籤式頁面中，設定每個頁面的代表圖示
在 UI 執行緒的使用方式 Device.BeginInvokeOnMainThread
在 Code-behind 程式碼中，取得該網頁所綁定的檢視模型

專案原始碼

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

專案使用到的圖片

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

實作方法

建立專案

在 Visual Studio 2015，點選功能表 檔案 > 新增 > 專案
在 新增專案 對話窗內，點選 範本 > Visual C# > Prism > Prism Unity App (Forms)
在底下名稱欄位中，輸入 HomeTabbed 最後，點選 確定 按鈕。
當出現 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 的應用程式。

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

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

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

開發前準備工作

建立資料夾

無

複製專案使用的圖片檔案

請從底下網址取得所要用到的圖片檔案到電腦的硬碟某個目錄下

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/HomeTabbed%20Images
使用檔案總管選擇剛剛下載完成的圖檔
利用檔案總管，拖拉這些圖檔到 Android 專案內的 Resources/drawable 資料夾內
利用檔案總管，拖拉這些圖檔到 iOS 專案內的 Resources 資料夾內
利用檔案總管，拖拉這些圖檔到 UWP 專案內的 Assets 資料夾內

專案開發

建立 HomePage 檢視 (View)

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

HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 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:HomeTabbed.Views"
            TabbedPage.BarBackgroundColor="#00b300"
            TabbedPage.BarTextColor="#e6ffe6"  
            NavigationPage.HasNavigationBar="false"
            Title="多奇創意"
            x:Class="HomeTabbed.Views.HomePage">

  <local:MainPage  />
  <local:NewsPage />
  <local:OurProductPage />
  <local:JoinUsPage />

</TabbedPage>

建立 JoinUsPage 檢視 (View)

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

JoinUsPage.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="加入我們"
             BackgroundColor="#ccffe6"
             Icon="join.png"
             x:Class="HomeTabbed.Views.JoinUsPage">
  <StackLayout
    Orientation="Vertical"
    HorizontalOptions="Center" VerticalOptions="Center"
    >
    <Button Text="了解更多" Command="{Binding 了解更多Command}"
            TextColor="#000000"
            HorizontalOptions="Center"
            />
  </StackLayout>

</ContentPage>

建立 NaviPage 檢視 (View)

滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
在名稱欄位輸入 NaviPage，接著點選 新增 按鈕
將底下 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"
                NavigationPage.BarBackgroundColor="#00b300"
                NavigationPage.BarTextColor="#FFFFFF"
                Title="多奇創意"
                x:Class="HomeTabbed.Views.NaviPage">

</NavigationPage>

建立 NewsPage 檢視 (View)

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

NewsPage.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="最新消息"
             Icon="news.png"
             x:Class="HomeTabbed.Views.NewsPage">

  <WebView
    Source="https://www.facebook.com/will.fans/posts/911508538878291"
    />

</ContentPage>

建立 Other1ContentPage 檢視 (View)

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

Other1ContentPage.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="歡迎加入我們"
             BackgroundColor="#ccffe6"
             x:Class="HomeTabbed.Views.Other1ContentPage">
  <ContentPage.ToolbarItems>
    <ToolbarItem
      Command="{Binding 首頁Command}"
      AutomationId="searchCommand"
      Text="首頁"
      Order="Primary"
      Priority="0">
      <ToolbarItem.Icon AutomationId="searchIcon">
        <OnPlatform x:TypeArguments="FileImageSource"
          iOS="home.png"
          Android="home.png"
          WinPhone="Assets/home.png" />
      </ToolbarItem.Icon>
    </ToolbarItem>
  </ContentPage.ToolbarItems>

  <StackLayout
    Orientation="Vertical"
    HorizontalOptions="Center" VerticalOptions="Center"
    >
    <Button Text="立即加入" Command="{Binding 立即加入Command}"
            TextColor="#000000"
            HorizontalOptions="Center"
            />
  </StackLayout>
</ContentPage>

建立 Other2ContentPage 檢視 (View)

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

Other2ContentPage.xaml

建立 AboutPage 檢視 (View)

滑鼠右擊核心PCL專案的 Views 資料夾，選擇 加入 > 新增項目
在對話窗點選 Visual C# > Prism > Prism ContentPage (Forms)
在名稱欄位輸入 AboutPage，接著點選 新增 按鈕
將底下 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"
             Title="保哥部落格"
             x:Class="HomeTabbed.Views.Other2ContentPage">

  <WebView
    Source="http://blog.miniasp.com/"
    />
</ContentPage>

建立 OurProductPage 檢視 (View)

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

OurProductPage.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="酷奇資訊"
             Icon="school.png"
             x:Class="HomeTabbed.Views.OurProductPage">

  <WebView
    Source="https://www.accupass.com/org/detail/r/1507090942441281249650/1/0"
    />
</ContentPage>

修改 MainPage 檢視 (View)

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

MainPage.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="HomeTabbed.Views.MainPage"
             Title="多奇創意"
             Icon="doggy.png"
             >
  <WebView
    Source="http://www.miniasp.com/"
    />
</ContentPage>

建立 HomePageViewModel 檢視模型 (ViewModel)

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

HomePageViewModel.cs

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

namespace HomeTabbed.ViewModels
{
    public class HomePageViewModel : BindableBase
    {
        public HomePageViewModel()
        {

        }
    }
}

建立 JoinUsPageViewModel 檢視模型 (ViewModel)

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

JoinUsPageViewModel.cs

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

namespace HomeTabbed.ViewModels
{
    public class JoinUsPageViewModel : BindableBase
    {
        #region DI
        INavigationService _navigationService;
        #endregion

        #region ICommand
        public DelegateCommand 了解更多Command { get; set; }
        #endregion

        public JoinUsPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

            了解更多Command = new DelegateCommand(了解更多);
        }

        private async void 了解更多()
        {
            await _navigationService.NavigateAsync(new Uri("NaviPage/Other1ContentPage", UriKind.Relative));
        }
    }
}

建立 NaviPageViewModel 檢視模型 (ViewModel)

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

NaviPageViewModel.cs

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

namespace HomeTabbed.ViewModels
{
    public class NaviPageViewModel : BindableBase
    {
        public NaviPageViewModel()
        {

        }
    }
}

建立 NewsPageViewModel 檢視模型 (ViewModel)

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

建立 Other1ContentPageViewModel 檢視模型 (ViewModel)

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

Other1ContentPageViewModel.cs

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

namespace HomeTabbed.ViewModels
{
    public class Other1ContentPageViewModel : BindableBase, IConfirmNavigationAsync
    {
        #region DI
        INavigationService _navigationService;
        IPageDialogService _dialogService;
        #endregion

        #region ICommand
        public DelegateCommand 立即加入Command { get; set; }
        public DelegateCommand 首頁Command { get; set; }
        #endregion

        #region property
        public bool 需要檢查是否可以離開頁面 { get; set; } = true;
        #endregion

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

            立即加入Command = new DelegateCommand(立即加入);
            首頁Command = new DelegateCommand(首頁);
        }

        public async void 首頁()
        {
            await _navigationService.NavigateAsync(new Uri("http://vulcan.net/HomePage/JoinUsPage", UriKind.Absolute));
        }

        private async void 立即加入()
        {
            需要檢查是否可以離開頁面 = false;
            await _navigationService.NavigateAsync(new Uri("Other2ContentPage", UriKind.Relative));
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
        }

        public async Task<bool> CanNavigateAsync(NavigationParameters parameters)
        {
            if (需要檢查是否可以離開頁面 == true)
            {
                var fooReslut = await _dialogService.DisplayAlertAsync("警告", "您確定要回到首頁嗎?", "是", "否");
                if (fooReslut == true)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
            else
            {
                需要檢查是否可以離開頁面 = true;
                return true;
            }
        }
    }
}

建立 Other2ContentPageViewModel 檢視模型 (ViewModel)

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

建立 OurProductPageViewModel 檢視模型 (ViewModel)

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

修改 MainPageViewModel 檢視模型 (ViewModel)

在核心PCL專案的 ViewModels 資料夾，滑鼠雙擊 MainPageViewModel
將底下 C# 程式碼複製到剛剛開啟的檔案內

MainPageViewModel.cs

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

namespace HomeTabbed.ViewModels
{
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainPageViewModel()
        {

        }

        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

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

using Prism.Unity;
using HomeTabbed.Views;

namespace HomeTabbed
{
    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/HomePage", System.UriKind.Absolute));
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<HomePage>();
            Container.RegisterTypeForNavigation<JoinUsPage>();
            Container.RegisterTypeForNavigation<NewsPage>();
            Container.RegisterTypeForNavigation<OurProductPage>();
            Container.RegisterTypeForNavigation<NaviPage>();
            Container.RegisterTypeForNavigation<Other1ContentPage>();
            Container.RegisterTypeForNavigation<Other2ContentPage>();
        }
    }
}

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2016/09/09

Xamarin.Forms 多奇數位創意之標籤式 頁面

多奇數位創意之標籤式 頁面

目的

學習重點

專案原始碼

專案使用到的圖片

實作方法

建立專案

開發前準備工作

建立資料夾

複製專案使用的圖片檔案

專案開發

建立 HomePage 檢視 (View)

HomePage.xaml

建立 JoinUsPage 檢視 (View)

JoinUsPage.xaml

建立 NaviPage 檢視 (View)

NaviPage.xaml

建立 NewsPage 檢視 (View)

NewsPage.xaml

建立 Other1ContentPage 檢視 (View)

Other1ContentPage.xaml

建立 Other2ContentPage 檢視 (View)

Other2ContentPage.xaml

建立 AboutPage 檢視 (View)

AboutPage.xaml

建立 OurProductPage 檢視 (View)

OurProductPage.xaml

修改 MainPage 檢視 (View)

MainPage.xaml

建立 HomePageViewModel 檢視模型 (ViewModel)

HomePageViewModel.cs

建立 JoinUsPageViewModel 檢視模型 (ViewModel)

JoinUsPageViewModel.cs

建立 NaviPageViewModel 檢視模型 (ViewModel)

NaviPageViewModel.cs

建立 NewsPageViewModel 檢視模型 (ViewModel)

建立 Other1ContentPageViewModel 檢視模型 (ViewModel)

Other1ContentPageViewModel.cs

建立 Other2ContentPageViewModel 檢視模型 (ViewModel)

建立 OurProductPageViewModel 檢視模型 (ViewModel)

修改 MainPageViewModel 檢視模型 (ViewModel)

MainPageViewModel.cs

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

App.xaml.cs

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

Xamarin.Forms 多奇數位創意之標籤式頁面

多奇數位創意之標籤式頁面