XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2016/06/30

Xamarin.Forms 導航抽屜 Master-Detail Page

導航抽屜

在這一章節，將會要來完成一個多功能的首頁應用程式，在這個首頁應用程式中，採用的是 Xamarin.Forms 提供的 Master-Detail 頁面，該頁面擁有一個漢堡按鈕，當您點擊該按鈕或者由螢幕左方往右滑動，就會帶出一個導航抽屜選單；在這個選單上，您可以依照您的需求點擊任何項目，此時，螢幕就會出現該項目應該呈現的頁面。

了解更多關於 [Xamarin.Android] 的使用方式
了解更多關於 [Xamarin.iOS] 的使用方式
了解更多關於 [Xamarin.Forms] 的使用方式
了解更多關於 [Hello, Android：快速入門] 的使用方式
了解更多關於 [Hello, iOS – 快速入門] 的使用方式
了解更多關於 [Xamarin.Forms 快速入門] 的使用方式
在此，將會透過這個應用程式與導航抽屜，分別顯示出 Xamarin.Forms 所提供的各個控制項，並且分別可以在 iOS & Android 平台來執行這個應用程式，也可以看到透過 Xamarin.Forms 所執行的應用程式，在各個平台上，其視覺控制項長的是甚麼樣子。
在這個範例中，將會繼續使用 Font Awesome 功能，若不知道如何設定與使用 Font Awesome，請參考 使用者登入。
底下為這個專案在 Android 平台上執行後的畫面，當程式一啟動之後，會先停留在導航抽屜的第一個選項要顯示的頁面，使用者可以點選左上角的漢堡按鈕或者從螢幕的左方，往右方滑動，就會看到導航抽屜的畫面。
導航抽屜 Android1
當導航抽屜顯示出來，就會如下圖樣貌，使用者可以在導航抽屜畫面上，點選所需要的功能，此時，應用程式就會將所點選的畫面顯示在螢幕上。
導航抽屜 Android2

建立導航抽屜方案

  1. 首先，開啟您的 Visual Studio 2015
  2. 接著透過 Visual Studio 2015 功能表，選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
  3. 接著，Visual Studio 2015 會顯示 新增專案 對話窗，請在這個對話窗上，進行選擇 Visual C# >Cross-Platform > Blank Xaml App (Xamarin.Forms Portable)
  4. 接著，在最下方的 名稱 文字輸入盒處，輸入 HomeMenu 這個名稱，最後使用滑鼠右擊右下方的 確定按鈕。
  5. 當專案建立到一半，若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統，此時會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，這不影響您繼續開發 Xamarin.Forms 的應用程式，只不過此時，您無法編譯與執行 iOS 的應用程式。
  6. 接著會看到 新的通用Windows專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
  7. 最後，整個新的 Xamarin.Forms 專案就建立完成了。

Font Awesome 設定工作

關於 Font Awesome 的基本設定與使用方式，請參考 使用者登入

導航抽屜應用程式頁面架構

要開發出上面展示的螢幕截圖的應用程式，這裡一共需要定義出 六個 XAML View：
  • MainPage.xaml
    這個 View 將會用來定義整個 MasterDetailPage 類別的核心運行。
  • MasterPage.xaml
    這個 View 是用來定義導航抽屜的樣貌，以及那些項目是可以被點選的。
  • DetailView1.xaml
    這個是當選擇導航抽屜頁面的第一個項目，將要顯示的頁面內容 (XF 控制項1)，也是整個應用程式啟動的時候，預設要顯示的頁面內容。
  • DetailView2.xaml
    這個是當選擇導航抽屜頁面的第二個項目，將要顯示的頁面內容 (XF 控制項2)
  • DetailView3.xaml
    這個是當選擇導航抽屜頁面的第三個項目，將要顯示的頁面內容 (Grid版面配置)
  • DetailView4.xaml
    這個是當選擇導航抽屜頁面的第四個項目，將要顯示的頁面內容 (堆疊與捲動版面配置)
導航抽屜應用程式頁面架構

Master 頁面 (MainPage.xaml)

Master 頁面為需要使用 Xamarin.Forms 提供的 MasterDetailPage 類別，而不是之前範例程式中用到的ContentPage；在這裡，請在方案總管內，找到 核心PCL 專案，從 核心PCL 專案內找到 MainPage.xaml檔案，將其 XAML 定義，修改成為如下所示：
在底下的 XMAL 定義中，僅僅宣告了使用這個類別 MasterDetailPage 所產生的物件，做為根物件，另外，也使用了 Title 屬性，定義了這個頁面的標題，這個設定值，將會顯示於 Navigation Bar 導航棒 上。
<?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:local="clr-namespace:HomeMenu;assembly=HomeMenu"
                  x:Class="HomeMenu.MainPage"
                  Title="應用首頁"
                  >
</MasterDetailPage>
接著，您需要定義 MainPage.xaml 的 Code Behind 的 C# 程式碼，因此，請打開 MainPage.xaml.cs 檔案，將內容修改如下所示：
在這個 MainPage.xaml.cs 檔案內，其實也相當的簡單。
在建構式內，設定了 MasterDetailPage 物件的 Master 與 Detail 這兩個屬性值，其中，Master 這個屬性，將會設定成為 MasterPage 所產生的物件(這個類別，就是用於顯示導航抽屜要顯示的相關內容)。而Detail 屬性，則是需要建立一個 NavigationPage 物件，不過，需要在 NavigationPage 建構式參數中，將您要顯示的 ContentPage 產生出來物件，傳遞到其建構式內。另外，將會設定導航面板中的 ListView物件，綁定其 ItemSelected 事件，交由 OnItemSelected；也就是說，當使用者在導航面板點選了任何一個項目，MainPage 將會收到這個點擊事件，並進行相對應的處理，在這個應用程式中，將會需要切換到不同的 ContentPage。
在 OnItemSelected 處理事件中，會取得傳入參數的 e.SelectedItem as MasterPageItem; 物件，得知現在使用者點擊的項目是哪一個，接著根據 MasterPageItem 物件屬性 Title 的值為何，顯示相對應的 View。例如，當使用者點選了 Grid版面配置 這個項目，會先建立一個由 DetailView3 組成的 NavigationPage物件， 接著將其設定給 MasterDetailPage 物件之 Detail 屬性，這樣就會顯示出該頁面內容，緊接著把MyListView.SelectedItem 設定為 null 也就是上該 ListView 上沒有任何選取項目提示出現；最後，告知導航抽屜可以將抽屜收起來了。
完成了這個主要核心的頁面，接下來就是只要繼續定義導航抽屜頁面與四個導航抽屜中會用到的頁面。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace HomeMenu
{
    public partial class MainPage : MasterDetailPage
    {
        MasterPage fooMasterPage = new MasterPage();

        public MainPage()
        {
            InitializeComponent();

            this.Master = fooMasterPage;
            this.Detail = new NavigationPage(new DetailView1());

            fooMasterPage.MyListView.ItemSelected += OnItemSelected;

        }

        private void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterPageItem;
            if (item != null)
            {
                if (item.Title == "XF 控制項1")
                {
                    Detail = new NavigationPage(new DetailView1());
                    var fooPage = this.Master;

                    fooMasterPage.MyListView.SelectedItem = null;
                    IsPresented = false;
                }
                else if (item.Title == "XF 控制項2")
                {
                    Detail = new NavigationPage(new DetailView2());
                    var fooPage = this.Master;

                    fooMasterPage.MyListView.SelectedItem = null;
                    IsPresented = false;
                }
                else if (item.Title == "Grid版面配置")
                {
                    Detail = new NavigationPage(new DetailView3());
                    var fooPage = this.Master;

                    fooMasterPage.MyListView.SelectedItem = null;
                    IsPresented = false;
                }
                else if (item.Title == "堆疊與捲動版面配置")
                {
                    Detail = new NavigationPage(new DetailView4());
                    var fooPage = this.Master;

                    fooMasterPage.MyListView.SelectedItem = null;
                    IsPresented = false;
                }
            }
        }
    }
}

建立導航資料模型 (MasterPageItem.cs)

請在 核心PCL 建立一個類別檔案，名稱為 MasterPageItem ，並且將底下程式碼替換到所產生出來的內容。這個類別將會用來定義導航面板中要顯示的項目名稱與圖示檔案名稱。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace HomeMenu
{
    public class MasterPageItem
    {
        public string Title { get; set; }
        public string Icon { get; set; }
    }
}

導航抽屜頁面 (MasterPage.xaml)

底下是導航抽屜頁面 (MasterPage.xaml)的 XAML 宣告定義，這個導航抽屜頁面，其實就是一個ContentPage 頁面，在這個頁面裡面，使用了 StackLayout 堆疊版面配置元件來調整相關控制項要出現的順序，最後，會使用 <ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None"> 控制項，顯示一連串可以選擇的內容，供使用者點擊。而每個 ListView 控制項內的項目，都會採用同一的格式顯示出來，這將定義在 <ListView.ItemTemplate> 的 <DataTemplate>之 <ViewCell> 內；在 <ViewCell> 裡面，使用 Grid 來定義出兩個 Column 的版面配置，將 Font Awesome的自行圖示放在第一個 Column 中，而把要顯示的文字放在第2個 Column上。
不論是 Grid 的第一個或者第二個 Column，都是使用 Label 控制向來顯示內容，這些 Label控制項的Text 屬性值，使用了 "{Binding Title, Mode=TwoWay}" 類似這樣的表示方式，對於孰悉 XAML 開發者而言，一點都不會陌生，這是 Data Binding 資料繫結 的使用方式，透過資料繫結表示方式，Label 控制項，可以動態根據當時 ListView 節點的內容物件值，與其做綁定在一起，相關 MVVM 與資料繫結的說明，後面會一章做更詳盡的說明。
更多關於 StackLayout 與 Grid 版面配置的使用說明，稍後會有解釋。
不過，這些 ListView 要顯示的資料是從何而來，這就需要查看其 Code Behind 程式碼就可以知道囉。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HomeMenu.MasterPage"
             Title="功能清單"
             >
  <ContentPage.Content>
    <StackLayout
      Orientation="Vertical"
      VerticalOptions="FillAndExpand">
      <StackLayout
        Orientation="Horizontal"
        Padding="10,20,10,20"
        BackgroundColor="Blue"
        >
        <Label
          Text ="&#xf0c9;"
          FontSize="25"
          FontFamily="FontAwesome"
          TextColor="White"
          VerticalTextAlignment="Center"
          HorizontalOptions="Start" VerticalOptions="CenterAndExpand"
                    />
        <Label
          Text ="主功能表選單"
          FontSize="20"
          TextColor="White"
          VerticalTextAlignment="Center"
          HorizontalOptions="Start" VerticalOptions="CenterAndExpand"
                    />
      </StackLayout>
      <ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <ViewCell.View>
                <Grid
                  VerticalOptions="Center"
                  Padding="10,5,10,5"
                  >
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="260" />
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                  </Grid.RowDefinitions>
                  <Label
                    Grid.Row="0" Grid.Column="0"
                    Text ="{Binding Icon, Mode=TwoWay}"
                    FontSize="25"
                    FontFamily="FontAwesome"
                    VerticalTextAlignment="Center"
                    HorizontalOptions="Start" VerticalOptions="CenterAndExpand"
                    />
                  <Label
                    Grid.Row="0" Grid.Column="1"
                    Text ="{Binding Title, Mode=TwoWay}"
                    FontSize="25"
                    VerticalTextAlignment="Center"
                    HorizontalOptions="Start" VerticalOptions="CenterAndExpand"
                    />
                </Grid>
              </ViewCell.View>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>
底下是導航抽屜頁面 (MasterPage.xaml.cs)的 Code Behind 程式碼。
首先，定義了一個唯獨屬性，他的值會從 XAML 延伸定義中的 <ListView x:Name="listView" 得到，前面有提到過，若在 XAML 中使用了 x:Name="xxx" 表示法，那就代表在其 Code Behind 程式碼中，可以透過 xxx 這個變數取得這個控制項的物件，由於在 XAML 的 xxx 無法在 MasterPage 物件中存取，因此，需要透過 public ListView MyListView { get { return this.listView; } } 方式，才能透過 MyListView 來間接存取 ListView 控制項物件，也就是 listView，您可以參考 MainPage.xaml.cs 的 Code Behind 程式碼中，看到使用方式。
在建構式內，產生了 List<MasterPageItem> 物件，並且產生了四筆資料，這些資料到時候會顯示在導航抽屜選項清單內；其中，每個項目的 Icon 屬性值，需要設定相對應的 Font Awesome 的 UniCode 代碼，這些代碼可以從 Font Awesome 官網上的 cheatsheet ()http://fontawesome.io/cheatsheet/ 中找到。
要把 ListView 要顯示的資料綁定到控制項內，是透過了這行敘述：listView.ItemsSource = masterPageItems;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace HomeMenu
{
    public partial class MasterPage : ContentPage
    {
        public ListView MyListView {
            get
            {
                return this.listView;
            }
        }


        public MasterPage()
        {
            InitializeComponent();

            var masterPageItems = new List<MasterPageItem>();
            masterPageItems.Add(new MasterPageItem
            {
                Title = "XF 控制項1",
                Icon = "\uf00b",
            });
            masterPageItems.Add(new MasterPageItem
            {
                Title = "XF 控制項2",
                Icon = "\uf044",
            });
            masterPageItems.Add(new MasterPageItem
            {
                Title = "Grid版面配置",
                Icon = "\uf085",
            });
            masterPageItems.Add(new MasterPageItem
            {
                Title = "堆疊與捲動版面配置",
                Icon = "\uf009",
            });

            listView.ItemsSource = masterPageItems;
        }
    }
}

導航抽屜選項1頁面 XF 控制項1 (DetailView1.xaml)

現在要來說明，導航抽屜的第一個選項 (XF 控制項1) 點選下去之後，所出現的 ContentPage 頁面設計內容。
在 DetailView1.xaml 頁面內的 XAML 宣告定義中，似乎有點長，其實，這個頁面是把 Xamarin.Forms 提供的各式控制項的其中一部份，在這個頁面呈現出來，另外一部分，會在 DetailView2.xaml 這個頁面中出現。透過這樣的設計，可以讓您充分看到如何使用 Xamarin.Froms 提供的各式控制項在不同平台上所出現的樣貌，另外，也可以初步了解到如何在 XAML 檔案內來使用與定義這些控制項。

ScrollView

在 DetailView1.xaml 中，是由 ScrollView 這個版面配置元件作為最外層的版面配置與安排控制，當要顯示的內容超出螢幕大小的時候，使用者可以使用手勢，垂直或者水平滑動，就可以看到其他的內容；而ScrollView 需要指定可以水平捲動或者垂直捲動，這可透過 Orientation 這個屬性來設定，在這個範例中，使用了 <ScrollView Orientation="Vertical" 這樣的宣告，這表示，在 ScrollView 內的所有控制項，若顯示的時候超出螢幕高度，使用者可以使用手勢上下滑動，就可以看到其他部分的內容。

StackLayout

在 ScrollView 版面配置元件裡面，用到了許多 StackLayout 版面配置元件，這個版面配置元件提供將其裡面的各式控制項，依據定義，可以垂直或者水平的排列出來。Orientation 這個屬性，就是用來定義要採用水平 (Horizontal) 或者垂直 (Vertical) 的方式來排列裡面的各個控制項。

LayoutOptions

在每個控制項中，皆可以定義這些控制項的水平對齊位置與垂直對齊位置，分別需要使用HorizontalOptions 與 VerticalOptions 這兩個屬性來指定。這兩個屬性皆屬於 LayoutOptions 資料結構態，其可以擁有底下的設定：
  • Start
    該控制項將會出現在其父節點的開頭位置，並且不能夠擴大 (Expand)；這個值若是用於HorizontalOptions ，則表示往左邊對齊；這個值若是用於 VerticalOptions ，則表示往上邊對齊。
  • StartAndExpand
    該控制項將會出現在其父節點的開頭位置，並且不夠擴大 (Expand)；這個值若是用於HorizontalOptions ，則表示往左邊對齊；這個值若是用於 VerticalOptions ，則表示往上邊對齊。
  • Center
    該控制項將會出現在其父節點置中位置，並且不能夠擴大 (Expand)
  • CenterAndExpand
    該控制項將會出現在其父節點置中位置，並且能夠擴大 (Expand)
  • End
    該控制項將會出現在其父節點的最後位置，並且不能夠擴大 (Expand)；這個值若是用於HorizontalOptions ，則表示往右邊對齊；這個值若是用於 VerticalOptions ，則表示往最下邊對齊。
  • EndAndExpand
    該控制項將會出現在其父節點的最後位置，並且能夠擴大 (Expand)；這個值若是用於HorizontalOptions ，則表示往右邊對齊；這個值若是用於 VerticalOptions ，則表示往最下邊對齊。
  • Fill
    該控制項將會填滿上層父節點空間，並且不能夠擴大 (Expand)；這個值若是用於 HorizontalOptions，則表示水平填滿；這個值若是用於 VerticalOptions ，則表示垂直填滿。
  • FillAndExpand
    該控制項將會填滿上層父節點空間，並且能夠擴大 (Expand)；這個值若是用於 HorizontalOptions ，則表示水平填滿；這個值若是用於 VerticalOptions ，則表示垂直填滿。
這裡提到的父節點，也就是該控制項當時所在的容器節點

ActivityIndicator

這個視覺控制項將會告知使用者，現在應用程式正在執行某些工作；其實，這個控制項將會使用動畫的方式，不斷地轉動，來告知使用者正在處理某些工作。

BoxView

這個視覺控制項其實就是 WPF XAML 內的 Rectangle 控制項，他會繪製出一塊矩形區域，並且可以設定要填滿的顏色。

Button

這個視覺控制項就是一個按鈕元件，當使用者按下這個按鈕後，就可以透過該按鈕所提供的相關事件進行處理後續工作。

DatePicker

這個視覺控制項將提供一個額外的日期選擇清單，讓使用者可以透過這個額外的選擇清單，選擇輸入他們所想要的日期。

Editor

這個視覺控制項將會提供使用者可以進行多行文字的輸入。

Entry

這個視覺控制項將會提供使用者進行單行文字的輸入，也可以當使用者沒有輸入任何文字的時候，可以使用Placeholder 屬性來設定其提示浮水印；當然，當這個控制項用於輸入密碼的時候，可以透過 IsPassword屬性來遮蔽所輸入的密碼。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HomeMenu.DetailView1"
             Title="Xamarin.Forms 控制項1展示"
             >
  <ScrollView
    Orientation="Vertical"
    Padding="20,0,20,0">
    <StackLayout
      Orientation="Vertical">

      <StackLayout
        Orientation="Vertical">
        <Label Text="ActivityIndicator" />
        <ActivityIndicator Color="Red" IsRunning="true" />
      </StackLayout>

      <StackLayout
        Orientation="Vertical">
        <Label Text="BoxView" />
        <BoxView Color="Red" />
      </StackLayout>

      <StackLayout
        Orientation="Vertical">
        <Label Text="Button" />
        <Button x:Name="button我的按鈕" Text="請按按鈕" />
      </StackLayout>

      <StackLayout
        Orientation="Vertical">
        <Label Text="DatePicker" />
        <DatePicker VerticalOptions="CenterAndExpand" >
          <DatePicker.Format>yyyy-MM-dd</DatePicker.Format>
        </DatePicker>
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Editor" />
        <Editor x:Name="editor多行文字輸入盒"
                HeightRequest="240"/>
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Entry" />
        <Entry Placeholder="Placeholder 屬性可用於浮水印提示"/>
      </StackLayout>

    </StackLayout>
  </ScrollView>
</ContentPage>
在 DetailView1.xaml 頁面中，有提供一些互動機制，這些功能定義在 DetailView1.xaml.cs Code Behind 內。
在建構式內，定義了 button我的按鈕 這個按鈕控制項的點擊事件，當使用者按下這個按鈕後，就會使用DisplayAlert 來顯示出對話窗訊息。另外，也透過了 editor多行文字輸入盒 這個變數，提供了多行文字內容。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace HomeMenu
{
    public partial class DetailView1 : ContentPage
    {
        public DetailView1()
        {
            InitializeComponent();

            #region 按鈕初始化
            button我的按鈕.Clicked += (s, e) =>
            {
                DisplayAlert("通知", "您已經按下了按鈕", "確定");
            };
            #endregion

            #region 多行文字輸入盒初始化
            editor多行文字輸入盒.Text = "這個控制項，\r\n可以輸入多行資料\r\n每行輸入後\r\n按下Enter\r\n就會自動換行";
            #endregion

        }
    }
}

導航抽屜選項2頁面 XF 控制項2(DetailView2.xaml)

接著要來說明，導航抽屜的第二個選項 (XF 控制項2) 點選下去之後，所出現的 ContentPage 頁面設計內容。
在 DetailView2.xaml 頁面內的 XAML 宣告定義中，也是有點長，其實，這個頁面是接著把上一個段落沒有介紹完的 Xamarin.Forms 提供的各式控制項，在這個頁面呈現出來。

Image

這個視覺控制項顧名思義，就是把圖片顯示在手機螢幕上。

Label

這個視覺控制項是最為常用的控制項，它可以將一段文字顯示在螢幕上，當然，可以設定當要顯示的文字超過所要顯示的螢幕寬度時候，要如何修剪或者斷行處理機制。

Picker

這個視覺控制項類似傳統的 Combobox 下拉選單控制項，在這個控制項內可以設定許多的選項值，當使用者點擊這個控制項後，將會出現一個清單，供使用者選擇。

ProgressBar

這個視覺控制項將顯是一個進度棒，您可以根據您系統處理的進度，來更新這個進度棒的處理進度，讓使用者可以了解到，現在工作是否已經完成或者處理到哪個階段了。

這個視覺控制項將顯示出個平台常用的搜尋功能。

Slider

這個視覺控制項將提供使用者可以透過手勢操作的方式，輸入一個數值。

Stepper

這個視覺控制項將提供逐步增加或者減少的方式，來輸入一個數值。

Switch

這個視覺控制項是最平常的控制項，用來讓使用者輸入或者切換 是/否 真/假 這類布林類型的值。

TimePicker

這個視覺控制項讓使用者可以透過一個額外清單，方便的輸入一的時間。

WebView

這個視覺控制項將讓您把一個網頁內容，顯示在手機中。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HomeMenu.DetailView2"
             Title="Xamarin.Forms 控制項2展示">
  <ScrollView
    Orientation="Vertical"
    Padding="20,0,20,0">
    <StackLayout
      Orientation="Vertical">

      <StackLayout
          Orientation="Vertical">
        <Label Text="Image" />
        <Image Source="icon.png"/>
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Label" />
        <Label Text="Label可用於顯示文字訊息於螢幕上，可以顯示單行或者多行"
               TextColor="Red"
               FontSize="18"
               LineBreakMode="CharacterWrap"
               />
        <Label Text="TailTruncation 模式 Label可用於顯示文字訊息於螢幕上，可以顯示單行或者多行"
               TextColor="Purple"
               FontSize="18"
               LineBreakMode="TailTruncation"
               />
        <Label Text="HeadTruncation 模式 Label可用於顯示文字訊息於螢幕上，可以顯示單行或者多行"
               TextColor="Blue"
               FontSize="18"
               LineBreakMode="HeadTruncation"
               />
        <Label Text="MiddleTruncation 模式 Label可用於顯示文字訊息於螢幕上，可以顯示單行或者多行"
               TextColor="Green"
               FontSize="18"
               LineBreakMode="MiddleTruncation"
               />
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Picker " />
        <Picker x:Name="picker我的選單"/>
      </StackLayout>

      <StackLayout
        Orientation="Vertical">
        <Label Text="ProgressBar" />
        <ProgressBar Progress="0.2"/>
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="SearchBar " />
        <SearchBar Placeholder="請輸入要搜尋的關鍵字"/>
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Slider " />
        <Slider Minimum="0" Maximum="100"/>
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Stepper" />
        <Stepper />
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="Switch" />
        <Switch  />
      </StackLayout>

      <StackLayout
          Orientation="Vertical">
        <Label Text="TimePicker " />
        <TimePicker />
      </StackLayout>

      <StackLayout
          Padding="0,0,40,0"
          Orientation="Vertical">
        <Label Text="WebView" />
        <WebView Source="http://www.microsoft.com"
                 HorizontalOptions="FillAndExpand"
                 HeightRequest="800"/>
      </StackLayout>

    </StackLayout>
  </ScrollView>
</ContentPage>
在 DetailView2.xaml 的 DetailView2.xaml.cs Code Behind 內，只有做一個工作，那就是要把 picker我的選單 的可以選擇的項目值，在其建構式內事先建立起來。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace HomeMenu
{
    public partial class DetailView2 : ContentPage
    {
        public DetailView2()
        {
            InitializeComponent();

            #region 資料清單選擇器
            picker我的選單.Items.Add("清單項目01");
            picker我的選單.Items.Add("清單項目02");
            picker我的選單.Items.Add("清單項目03");
            picker我的選單.Items.Add("清單項目04");
            picker我的選單.Items.Add("清單項目05");
            #endregion
        }
    }
}

導航抽屜選項3頁面 Grid版片配置 (DetailView3.xaml)

在這個 DetailView3.xaml 頁面中，將會展示 Grid 這個版面配置控制項的使用方式，而且並沒有任何 Code Behind 程式碼。
Grid 可以作為一個容器，裡面可以包含許多控制項，每個控制項將會透過 Grid.Row, Grid.Column 這兩個附加屬性，來定義出要出現在 Grid 版面配置控制項內的哪個地方。而 Grid.RowSpan,Grid.ColumnSpan這兩個附加屬性，將會告知 Grid 需要合併幾個 Row 或者幾個 Column。
當要擴充 Grid 可以擁有多個 Row 或者 Column 的時候，需要使用 <Grid.RowDefinitions>,<Grid.ColumnDefinitions> 來宣告定義，在其裡面的 <RowDefinition Height="*" />, <ColumnDefinition Width="*" /> 這兩個宣告，其中 Height, Width 這兩個屬性值，可以是：數值、*、Auto，其代表意義說明如下：
  • 數值
    表示這個 Row 或者 Column 的高度與寬度值。
  • *
    表示這個 Row 或者 Column 的高度與寬度視為相同比例，若指定 2* ，則表示這裡需要擁有兩倍比例的空間。
  • Auto 這個 Row 或者 Column 的高度與寬度為剩下所有可用空間。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HomeMenu.DetailView3"
             Title="Grid版面配置">
  <Grid
    VerticalOptions="Fill" HorizontalOptions="Fill"    
    >
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <BoxView
     Grid.Row="0" Grid.Column="0"
      Grid.RowSpan="1" Grid.ColumnSpan="5"
     Color="#ff9999"
      />

    <BoxView
     Grid.Row="0" Grid.Column="4"
      Grid.RowSpan="5" Grid.ColumnSpan="1"
     Color="#1a75ff"
      />

    <BoxView
      Grid.Row="1" Grid.Column="0"
      Grid.RowSpan="3" Grid.ColumnSpan="2"
      Color="#33cc00"
      />

    <BoxView
      Grid.Row="1" Grid.Column="2"
      Color="#bf8040"
      />

  </Grid>
</ContentPage>

導航抽屜選項4頁面 堆疊與捲動版面配置 (DetailView4.xaml)

在這個頁面 DetailView4.xaml 展示了如何使用 StackLayout 與 ScrollView 的範例說明。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HomeMenu.DetailView4"
             Title="堆疊與捲動版面配置">
  <StackLayout
    Orientation="Vertical" >
    <StackLayout
      Orientation="Vertical">

      <Label Text="StackLayout Vertical" />
      <StackLayout
        Orientation="Vertical">
        <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
        <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
        <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
      </StackLayout>

      <Label Text="StackLayout Horizontal" />
      <StackLayout
        Orientation="Horizontal">
        <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
        <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
        <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
      </StackLayout>

      <Label Text="ScrollView Horizontal" />
      <ScrollView
        Orientation="Horizontal">
        <StackLayout
          Orientation="Horizontal">
          <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
        </StackLayout>
      </ScrollView>

      <Label Text="ScrollView Vertical" />
      <ScrollView
        Orientation="Vertical">
        <StackLayout
          Orientation="Vertical">
          <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Red" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Blue" HeightRequest="50" WidthRequest="50" />
          <BoxView Color="Green" HeightRequest="50" WidthRequest="50" />
        </StackLayout>
      </ScrollView>

    </StackLayout>

  </StackLayout>
</ContentPage>

執行結果

底下分別來查看在不同平台下，執行這個應用程式所看到的成果是甚麼？

Android 執行結果

請在方案總管內，滑鼠右擊 HomeMenu.Droid 專案，選擇 設定為起始專案，接著按下 F5 開始執行。
執行成果 Android1
執行成果 Android2
執行成果 Android3
執行成果 Android4
執行成果 Android5

iOS 執行結果

請在方案總管內，滑鼠右擊 HomeMenu.iOS 專案，選擇 設定為起始專案，接著按下 F5 開始執行。
執行成果iOS1
執行成果iOS2
執行成果iOS3
執行成果iOS4
執行成果iOS5

參考

Xamarin.Forms Controls Reference

張貼者：
於
標籤： ,

4 則留言:

  1. 星月風炎20/7/16

    謝謝您的文章。
    PCL專案中，似乎少了一個MasterPageItem的類別。
    namespace HomeMenu
    {
    public class MasterPageItem
    {
    public string Title { get; set; }
    public string Icon { get; set; }
    }
    }

    回覆刪除
    回覆
    1. Vulcan lee20/7/16

      @kao lonnie

      感謝您的提醒，您說的沒錯，少了這個資料模型程式碼，我已經將文章更新了。

      刪除
  2. Wilson10/1/17

    vulcan 您好:
    目前的 "導航抽屜"的功能再點選"功能選單"時，整個區塊都會向右推(範例中的最後一張圖)，有沒有辦法做成類似星巴克(https://1drv.ms/i/s!AkY1YhaYcAF7izuapz5GRtHR4SIa)這樣，導航抽屜是蓋上頁面，漢堡圖示不動，而不是整個區塊往右推呢?
    謝謝!

    回覆刪除
  3. Vulcan lee10/1/17

    如同您所見到的，預設的導航抽屜會往右推出，原則上，Xamarin.Forms 預設的相關功能，並沒有提供您所描述的效果。

    Xamarin.Forms 的控制項是都可以客製化的，不過，您需要在原生專案中進行呼叫原生平台的各個API，若您有興趣，可以自行客製化導航抽屜的推出效果。

    這部份的技術可以參考 https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/


    回覆刪除

訂閱： 張貼留言 (Atom)