Xamarin.Forms 使用者控制項

在進行以 XAML 為基礎的應用程式開發過程中，使用者控制項(User Control)的使用，可以提升整個應用程式的開發速度與品質；透過建立一個使用者控制項之後，您就可以在不同的頁面中，直接引用這個新建立起來的使用者控制項，如同使用樂高積木一樣。

這份筆記的範例專案可以底下網址取得

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFLifeCycle

建立使用者控制項

1. 滑鼠右擊核心PCL專案節點，選擇 加入 > 新增項目 > Visual C# > Cross-Platform > Forms Xaml Page，並且在下方名稱欄位中，輸入這個使用者控制項的名稱，在這個範例專案中，將輸入名稱MyControl
2. 在新產生的 .xaml 檔案中，預設產生為一個頁面，此時，需要修正 .xaml & .xaml.cs 檔案，使其成為一個使用者控制項。

MyControl.xaml

1. 在底下 XAML 標記宣告中，根節點 (Root Element) 採用的是 Grid 版面配置項目 (Layout Element)，並且在這個 Grid 版面配置項目，修正其 Margin 與 BackgroundColor 的屬性值。
2. 接著定義了這個 Grid 版面配置，共有兩個縱列 (Column)，第一個 Column 的寬度為80dp，而第二個的寬度則為剩下的可用空間。
3. 定義一個 Label 控制項，指定在第一個 Column 版面中
4. 定義一個 Entry 控制項，指定在第二個 Column 版面中
5. 經過這樣的定義，您可以在這個應用程式之任何 XAML 頁面內，隨時都可以使用這個使用者控制項。

<?xml version="1.0" encoding="utf-8" ?>
<Grid 
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  x:Class="XFUserControl.MyControl"
  Margin="20,0,20,10"
  BackgroundColor="Lime"
  >

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="80" />
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Label 
    Text="欄位名稱" 
    Grid.Row="0" Grid.Column="0"
    FontSize="20" TextColor="Blue"
    LineBreakMode="TailTruncation"
    VerticalOptions="Center" HorizontalOptions="Start" />
  <Entry 
    Placeholder="請輸入您的電話號碼"
    Grid.Row="0" Grid.Column="1"
    Keyboard="Telephone"
    VerticalOptions="Center" HorizontalOptions="Fill"
    />
</Grid>

MyControl.xaml.cs

1. 由於這個使用者控制項的根節點已經定義為 Grid，所以，在 MyControl 這個類別定義中，需要從Grid 類別來繼承

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

using Xamarin.Forms;

namespace XFUserControl
{
    public partial class MyControl : Grid
    {
        public MyControl()
        {
            InitializeComponent();
        }
    }
}

使用使用者控制項

現在回到這個專案的首頁，MainPage.xaml，並且開始使用剛剛產生的使用者控制項。

MainPage.xaml

1. 為了要引用這個使用者控制項，需要加入一個命名空間 (namespace)；在這裡定義一個mlns:local="clr-namespace:XFUserControl" 命名空間可以參考到這個使用者控制項
2. 在這個頁面中，使用 <local:MyControl /> XAML 標記，就可以使用這個使用者控制項
3. 執行結果如下圖

<?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:local="clr-namespace:XFUserControl"
             x:Class="XFUserControl.MainPage">

  <StackLayout
    Orientation="Vertical"
    Spacing="0"
    Padding="0,40,0,0"
    >
    <local:MyControl />
    <local:MyControl />
    <local:MyControl />
    <local:MyControl />
  </StackLayout>
</ContentPage>