客製專屬平台的控制項視覺

這一章節，將會說明如何在 Xamarin.Forms 內自訂一個控制項，並且觀察這個控制項在四個平台上呈現的樣貌，這些平台有： Android, iOS, Windows, Windows Phone。接下來，將會透過 Xamarin.Forms 提供的相依服務的 ExportRenderer 方法，會將自訂控制項使用每個專屬平台的額外程式碼進行修正，使這些平台上看到的控制項，儘可能一樣。

建立客製專屬平台的控制項視覺方案

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

建立使用者註冊頁面

在這裡，將會展是 Entry 這個控制項在每個平台進行客製化的過程，因此，需要先建立一個 XAML 頁面，裡面會有 Entry 控制項。

修改 MainPage.xaml

修正 MainPage 頁面，可以讓使用者進行輸入他們的基本資料。

在核心PCL XFRendCtrl 專案，開啟 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:local="clr-namespace:XFRendCtrl"
             BackgroundColor="#F5D718"
             Title="多奇菁英報名表"
             x:Class="XFRendCtrl.MainPage">

  <ContentPage.ToolbarItems>
    <ToolbarItem x:Name="Menu1" Text="確定" Order="Primary" Priority="0" />
    <ToolbarItem x:Name="Menu2" Text="取消" Order="Primary" Priority="1" />
  </ContentPage.ToolbarItems>

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
    iOS="20, 40, 20, 20"
    Android="20, 20, 20, 20"
    WinPhone="20, 20, 20, 20" />
  </ContentPage.Padding>

  <StackLayout
    Orientation="Vertical"
    >
    <Label Text="姓名" />
    <Entry Placeholder="請輸入您的大名" BackgroundColor="#FFEAC4" />
    <Label Text="職業" />
    <Entry Placeholder="請輸入您的職業名稱" BackgroundColor="#FFEAC4" />
    <Label Text="專長" />
    <Entry Placeholder="請輸入您擅長的程式語言" BackgroundColor="#FFEAC4" />
    <Label Text="部落格" />
    <Entry Placeholder="請輸入您的部落格網址" BackgroundColor="#FFEAC4" />
    <Label Text="成就" />
    <Entry Placeholder="請輸入您曾經做過的案子" BackgroundColor="#FFEAC4" />
  </StackLayout>

</ContentPage>

修改 App.xaml.cs 的進入點

在核心PCL XFRendCtrl 專案，開啟 App.xaml.cs 檔案
請將底下程式碼覆蓋掉這個檔案所有內容
在這裡將會把根頁面使用 NavigationPage 來取代，而 NavigationPage 內的第一個頁面，就是 MainPage。在這裡，還有使用 BarBackgroundColor 屬性，修正導航頁面的工具列所要呈現的背景顏色值。

App.cs

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

using Xamarin.Forms;

namespace XFRendCtrl
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            //MainPage = new XFRendCtrl.MainPage();
            MainPage = new NavigationPage(new XFRendCtrl.MainPage())
            {
                BarBackgroundColor = Color.FromHex("F5D718")
            };
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

實際執行畫面

請參考底下說明，分別在不同平台上來執行這個應用程式，看看其視覺長的是甚麼樣子。

Android 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.Droid 專案，選擇 設定為起始專案
接著按下 F5 開始執行。

iOS 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.iOS 專案，選擇 設定為起始專案
接著按下 F5 開始執行。

Windows UWP 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.UWP 專案，選擇 設定為起始專案，
請在除錯工具列(如下圖所示)，從下拉選單中選擇，本機電腦
請點選功能表：建置 > 組態管理員，當 組態管理員對話窗 出現之後
確認這個要執行的專案，其 建置 與 部署 欄位是否有勾選，若沒有，請勾選其 建置 與 部署 欄位的檢查盒，最後，點選 關閉 按鈕
接著按下 F5 開始執行。

Windows Phone UWP 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.UWP 專案，選擇 設定為起始專案，
請在除錯工具列(如下圖所示)，從下拉選單中選擇，Mobile Emulator 10.0.10586.0 720p 5 inch 1GB這個手機模擬器
請點選功能表：建置 > 組態管理員，當 組態管理員對話窗 出現之後
確認這個要執行的專案，其 建置 與 部署 欄位是否有勾選，若沒有，請勾選其 建置 與 部署 欄位的檢查盒，最後，點選 關閉 按鈕
接著按下 F5 開始執行。

進行 Entry 控制項客製化

在此，將會透過 ExportRenderer 的相依注入方式，當程式要顯示指定的控制項時候，在這裡使用的控制項為 MyEntry，此時，將會使用專屬平台中定義的程式碼來顯示(將會定義在 OnElementChanged 方法內)

核心PCL 建立新的自訂控制項

滑鼠右擊核心PCL XFRendCtrl 專案，點選 加入 > 類別 > Visual C# > 類別
在底下 名稱 欄位內輸入 MyEntry
請將底下程式碼覆蓋掉這個檔案所有內容
這裡建立一個類別，MyEntry，是由 Entry 繼承而來。

MyEntry.cs

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

namespace XFRendCtrl
{
    public class MyEntry : Entry
    {
    }
}

核心PCL 修改 MainPage

在核心PCL XFRendCtrl 專案，開啟 MainPage.xaml 檔案
請將底下XAML宣告標記覆蓋掉這個檔案所有內容
在這裡，將原先使用的 Entry 控制項，使用剛剛自訂控制項來取代，這裡使用的是 local:MyEntry；因為 MyEntry 這個控制項是由 Entry 繼承而來，因此，所有的用法都與 Entry 控制項一樣。

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:local="clr-namespace:XFRendCtrl"
             BackgroundColor="#F5D718"
             Title="多奇菁英報名表"
             x:Class="XFRendCtrl.MainPage">

  <ContentPage.ToolbarItems>
    <ToolbarItem x:Name="Menu1" Text="確定" Order="Primary" Priority="0" />
    <ToolbarItem x:Name="Menu2" Text="取消" Order="Primary" Priority="1" />
  </ContentPage.ToolbarItems>

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
    iOS="20, 40, 20, 20"
    Android="20, 20, 20, 20"
    WinPhone="20, 20, 20, 20" />
  </ContentPage.Padding>

  <StackLayout
    Orientation="Vertical"
    >
    <Label Text="姓名" />
    <local:MyEntry Placeholder="請輸入您的大名" BackgroundColor="#FFEAC4" />
    <Label Text="職業" />
    <local:MyEntry Placeholder="請輸入您的職業名稱" BackgroundColor="#FFEAC4" />
    <Label Text="專長" />
    <local:MyEntry Placeholder="請輸入您擅長的程式語言" BackgroundColor="#FFEAC4" />
    <Label Text="部落格" />
    <local:MyEntry Placeholder="請輸入您的部落格網址" BackgroundColor="#FFEAC4" />
    <Label Text="成就" />
    <local:MyEntry Placeholder="請輸入您曾經做過的案子" BackgroundColor="#FFEAC4" />
  </StackLayout>

</ContentPage>

Android 平台

新增 MyEntryRenderer 類別

滑鼠右擊 XFRendCtrl.Droid 專案，點選 加入 > 類別 > Visual C# > Class
在底下 名稱 欄位內輸入 MyEntryRenderer
請將底下程式碼覆蓋掉這個檔案所有內容

MyEntryRenderer.cs

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

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using XFRendCtrl;
using XFRendCtrl.Droid;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace XFRendCtrl.Droid
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.SetBackgroundDrawable(null);
            }
        }
    }
}

iOS 平台

新增 MyEntryRenderer 類別

滑鼠右擊 XFRendCtrl.iOS 專案，點選 加入 > 類別 > Apple > 類別
在底下 名稱 欄位內輸入 MyEntryRenderer
請將底下程式碼覆蓋掉這個檔案所有內容

MyEntryRenderer.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XFRendCtrl;
using XFRendCtrl.iOS;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace XFRendCtrl.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void
        OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.BorderStyle = UIKit.UITextBorderStyle.None;
            }
        }
    }
}

UWP 平台

新增 MyEntryRenderer 類別

滑鼠右擊 XFRendCtrl.UWP 專案，點選 加入 > 類別 > Visual C# > 類別
在底下 名稱 欄位內輸入 MyEntryRenderer
請將底下程式碼覆蓋掉這個檔案所有內容

MyEntryRenderer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;
using XFRendCtrl;
using XFRendCtrl.UWP;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace XFRendCtrl.UWP
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Background = new SolidColorBrush(Colors.Transparent);
                Control.BorderBrush = new SolidColorBrush(Colors.Transparent);
                //TextBox textBox = Control as TextBox;
                //textBox.BorderBrush = new SolidColorBrush(Colors.Transparent);
                //textBox.Background = new SolidColorBrush(Colors.Transparent);
            }
        }
    }
}

實際執行有客製化的畫面

請參考底下說明，分別在不同平台上來執行這個應用程式，看看其視覺長的是甚麼樣子。

Android 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.Droid 專案，選擇 設定為起始專案
接著按下 F5 開始執行。

iOS 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.iOS 專案，選擇 設定為起始專案
接著按下 F5 開始執行。

Windows UWP 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.UWP 專案，選擇 設定為起始專案，
請在除錯工具列(如下圖所示)，從下拉選單中選擇，本機電腦
請點選功能表：建置 > 組態管理員，當 組態管理員對話窗 出現之後
確認這個要執行的專案，其 建置 與 部署 欄位是否有勾選，若沒有，請勾選其 建置 與 部署 欄位的檢查盒，最後，點選 關閉 按鈕
接著按下 F5 開始執行。

Windows Phone UWP 執行結果

請在方案總管內，滑鼠右擊 XFRendCtrl.UWP 專案，選擇 設定為起始專案，
請在除錯工具列(如下圖所示)，從下拉選單中選擇，Mobile Emulator 10.0.10586.0 720p 5 inch 1GB這個手機模擬器
請點選功能表：建置 > 組態管理員，當 組態管理員對話窗 出現之後
確認這個要執行的專案，其 建置 與 部署 欄位是否有勾選，若沒有，請勾選其 建置 與 部署 欄位的檢查盒，最後，點選 關閉 按鈕
接著按下 F5 開始執行。

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2016/07/24

Xamarin.Forms 客製專屬平台的控制項視覺

客製專屬平台的控制項視覺

建立客製專屬平台的控制項視覺方案

建立使用者註冊頁面

修改 MainPage.xaml

MainPage.xaml

修改 App.xaml.cs 的進入點

App.cs

實際執行畫面

Android 執行結果

iOS 執行結果

Windows UWP 執行結果

Windows Phone UWP 執行結果

進行 Entry 控制項客製化

核心PCL 建立新的自訂控制項

MyEntry.cs

核心PCL 修改 MainPage

MainPage.xaml

Android 平台

新增 MyEntryRenderer 類別

MyEntryRenderer.cs

iOS 平台

新增 MyEntryRenderer 類別

MyEntryRenderer.cs

UWP 平台

新增 MyEntryRenderer 類別

MyEntryRenderer.cs

實際執行有客製化的畫面

Android 執行結果

iOS 執行結果

Windows UWP 執行結果

Windows Phone UWP 執行結果

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2016/07/24

Xamarin.Forms 客製專屬平台的控制項視覺

客製專屬平台的控制項視覺

建立客製專屬平台的控制項視覺方案

建立使用者註冊頁面

修改 MainPage.xaml

MainPage.xaml

修改 App.xaml.cs 的進入點

App.cs

實際執行畫面

Android 執行結果

iOS 執行結果

Windows UWP 執行結果

Windows Phone UWP 執行結果

進行 Entry 控制項客製化

核心PCL 建立新的自訂控制項

MyEntry.cs

核心PCL 修改 MainPage

MainPage.xaml

Android 平台

新增 MyEntryRenderer 類別

MyEntryRenderer.cs

iOS 平台

新增 MyEntryRenderer 類別

MyEntryRenderer.cs

UWP 平台

新增 MyEntryRenderer 類別

MyEntryRenderer.cs

實際執行有客製化的畫面

Android 執行結果

iOS 執行結果

Windows UWP 執行結果

Windows Phone UWP 執行結果

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書