Xamarin Forms

使用Xamarin Forms Shell

張阿鬼 2020/12/30 18:41:05
1165

Xamarin Forms Shell為Xamarin Forms 4.0後推出的專案模板,
使用Shell能為專案快速建立常用到的滑動選單模板與頁籤選單模板。
https://docs.microsoft.com/zh-tw/xamarin/xamarin-forms/app-fundamentals/shell/introduction-images/flyout-large.png#lightboxhttps://docs.microsoft.com/zh-tw/xamarin/xamarin-forms/app-fundamentals/shell/introduction-images/monkeys-large.png#lightbox

 

在Visual Studio建立Xamarin Forms專案後,
會跳出選擇專案模板的畫面
飛出視窗即為滑動選單,該模式下同時會含有側滑選單與頁籤


由專案範本建立的情況下預設會建立一個Demo的程式碼範本,
但通常會希望專案是從空白的狀態下去建立模板,
避免多餘的程式碼。
以下會介紹由空白專案的方式下建立Shell模板的頁頁。

首先建立一個空白的頁面,並將對應的.cs檔案繼承類型更改成Xamarin.Forms.Shell
同時將Xamarin畫面的ContentPage更換為Shell


 

側滑選單:
側滑的選單上可分為三個部分,分別為Header、FlyoutItems與MenuItems。
Header負責展現表頭,不會連同選單一起滑動。
FlyoutItems通常做為頁面巡覽使用
MenuItems則用做功能尋覽使用(開啟其他網頁,登出等)

 

Header:
Header在側滑選單中為非必要項目,
通常放置登入資訊,LOGO等
在Shell中使用Shell.FlyoutHeader 屬性值設定來建立Header


FlyoutItems:
FlyoutItem為必要項目,放在Shell的巢狀Xamarin內建立,
其預設內建的樣式並呈現於側滑選單中。
在FlyoutItem的巢狀XAML內放置ShellContent Tag,
並設定顯示文字Title

與連結至的頁面ContentTemplate
ContentTemplate可放置一般的頁面,並透過選單做到切頁效果


 

MenuItem:
MenuItem與Header同樣為非必要的項目,
使用MenuItemTag放置在巢狀Shell Tag內,
並設定其Text屬來顯示文字,
Command屬性或Click屬性可設定點選後觸發的程式邏輯




設定當前頁面:
Shell的CurrentItem屬性代表目前所顯示的頁面,預設值為FlyoutItem中的第一個項目或第一個FlyoutItem,也可以設定該屬性去更改顯示的頁面



隱藏頁籤:
透過Shell建立出的滑動選單,預設會於下方產生對應的Tab頁籤
使用程式碼可將該頁籤列進行隱藏


範例程式碼下載:
https://github.com/stevenchang0529/XamarinForms_Shell

 

 

 

 

張阿鬼