Xamarin.Forms 使用者控制項
在進行以 XAML 為基礎的應用程式開發過程中，使用者控制項(User Control)的使用，可以提升整個應用程式的開發速度與品質；透過建立一個使用者控制項之後，您就可以在不同的頁面中，直接引用這個新建立起來的使用者控制項，如同使用樂高積木一樣。
這份筆記的範例專案可以底下網址取得
建立使用者控制項
- 滑鼠右擊核心PCL專案節點，選擇
加入>新增項目>Visual C#>Cross-Platform>Forms Xaml Page，並且在下方名稱欄位中，輸入這個使用者控制項的名稱，在這個範例專案中，將輸入名稱MyControl - 在新產生的 .xaml 檔案中，預設產生為一個頁面，此時，需要修正 .xaml & .xaml.cs 檔案，使其成為一個使用者控制項。
MyControl.xaml
- 在底下 XAML 標記宣告中，根節點 (Root Element) 採用的是
Grid版面配置項目 (Layout Element)，並且在這個 Grid 版面配置項目，修正其 Margin 與 BackgroundColor 的屬性值。 - 接著定義了這個
Grid版面配置，共有兩個縱列 (Column)，第一個 Column 的寬度為80dp，而第二個的寬度則為剩下的可用空間。 - 定義一個
Label控制項，指定在第一個 Column 版面中 - 定義一個
Entry控制項，指定在第二個 Column 版面中 - 經過這樣的定義，您可以在這個應用程式之任何 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
- 由於這個使用者控制項的根節點已經定義為
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
- 為了要引用這個使用者控制項，需要加入一個命名空間 (namespace)；在這裡定義一個
mlns:local="clr-namespace:XFUserControl"命名空間可以參考到這個使用者控制項 - 在這個頁面中，使用
<local:MyControl />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: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>
ALM無導航
