多奇數位創意之標籤式 頁面
目的
當在進行 Xamarin.Forms 專案開發的時候，應用程式的首頁設計，有許多種方式，其中一種就是設計成為具有多標籤頁次的效果，為了方便展示，每個標籤頁面將會使用 WebView 包裝某網頁內容。
底下動畫圖片，說明了多標籤頁次的使用方式。
學習重點
在這個練習專案中，將會讓您學會底下技能與方法的使用:
- 將企業內部網站建置到行動應用程式的作法
WebView控制項的使用方式與效果NavigationService.NavigateAsync的絕對與相對位置的導航使用方式- 在 Xaml 檔案中，加入其他 Xaml 項目命名空間做法
- 使用
TabbedPage.BarBackgroundColor&TabbedPage.BarTextColor屬性，客製化標籤式頁面的配色效果 - 使用
NavigationPage.BarBackgroundColor&NavigationPage.BarTextColor屬性，客製化導航頁面的配色效果 - 多頁次頁面的
TabbedPage使用方式與宣告方法 - 硬體回上一頁按鈕的控制方法
- 導航頁面的工作列項目的使用方式
IConfirmNavigationAsync介面的實作應用，用於控制當要來開這個頁面前，需要經過檢查與運作，才能夠會執行- 在標籤式頁面中，設定每個頁面的代表圖示
- 在 UI 執行緒的使用方式
Device.BeginInvokeOnMainThread - 在 Code-behind 程式碼中，取得該網頁所綁定的檢視模型
專案原始碼
專案使用到的圖片
實作方法
建立專案
- 在
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，選擇建置進行專案編譯
開發前準備工作
建立資料夾
無
複製專案使用的圖片檔案
- 請從底下網址取得所要用到的圖片檔案到電腦的硬碟某個目錄下
- 使用檔案總管選擇剛剛下載完成的圖檔
- 利用檔案總管，拖拉這些圖檔到 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>();
}
}
}
