若想要在您的 Xamarin.Forms 應用程式中顯示出字體圖示，例如， Font Awesome，在以往，您都需要每個專案內做關於這個字體的設定，並且需要根據平台需求，產生一個客製化的控制項。如今，想要做到這件事情，不再需要這麼麻煩的程序了，您只需要使用 Iconize Plugin 這個套件，就可以做到了。
在這篇文章中，將會測試如何在三個平台 Android/iOS/UWP，透過
Iconize Plugin 的幫助，設計出一個輸入帳號與密碼的頁面。安裝與設定相關套件
進行 Iconize 相關套件的安裝
在這裡，我們已經使用
Prism Template Pack 建立起一個支援 Android/iOS/UWP 的 Xamarin.Forms 方案，我們首先要做的事情，就是要安裝 Iconize Plugin 相關套件。
首先，請將這兩個套件，安裝到所有的專案內 Xam.Plugin.Iconize / Xam.FormsPlugin.Iconize
接著，可以依據您的喜好或者需求，選擇適合您的字體圖示，安裝相對應的套件
- Xam.Plugin.Iconize.FontAwesome
- Xam.Plugin.Iconize.Ionicons
- Xam.Plugin.Iconize.Material
- Xam.Plugin.Iconize.Meteocons
- Xam.Plugin.Iconize.SimpleLineIcons
- Xam.Plugin.Iconize.Typicons
- Xam.Plugin.Iconize.WeatherIcons
在這裡，我將會使用
Xam.Plugin.Iconize.FontAwesome 這個 Font Awesome 字型圖示作為展示範例，因此，請在您的方案中，除了核心PCL專案除外，各個原生專案都要安裝 Xam.Plugin.Iconize.FontAwesome這個套件。若您在安裝相關自行套件 (Xam.Plugin.Iconize.FontAwesome)的時候，有勾選核心PCL專案，則會出現這個錯誤訊息： 無法安裝封裝 'Xam.Plugin.Iconize.FontAwesome 1.0.10'。您正嘗試將此封裝安裝到以 '.NETPortable,Version=v4.5,Profile=Profile259' 為目標的專案，但該封裝不包含任何與架構相容的組件參考或內容檔。如需詳細資訊，請連絡封裝作者。這個時候，請取消核心PCL專案，勾選其他原生專案，重新安裝這個套件即可。
若想要進一步了解這些字體圖示有哪些內容，可以參考
- Entypo+ - pictograms by Daniel Bruce
- Font Awesome
- Ionicons
- Material design icons
- Meteocons
- Simple Line Icons
- Typicons
- Weather Icons
進行 Iconize 的原生專案初始化設定
Android 專案的設定
請在 Android 原生專案內，打開
MainActivity.cs，找到 OnCreate 方法，將程式碼置換如下：
其中，使用
.With(new Plugin.Iconize.Fonts.FontAwesomeModule()) 方法來指定需要載入的字型圖示模組；而 FormsPlugin.Iconize.Droid.IconControls.Init 則是用來進行 Xamarin.Forms 需要用到的控制項初始化。 protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.tabs;
ToolbarResource = Resource.Layout.toolbar;
base.OnCreate(bundle);
#region 進行 Iconize 套件的初始化
Plugin.Iconize.Iconize
.With(new Plugin.Iconize.Fonts.FontAwesomeModule());
FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Layout.toolbar, Resource.Layout.tabs);
#endregion
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App(new AndroidInitializer()));
}
您可以一次安裝多個字體套件，這個時候，僅需要連續呼叫 With 方法即可，類似這樣：
Plugin.Iconize.Iconize
.With(new Plugin.Iconize.Fonts.FontAwesomeModule())
.With(new Plugin.Iconize.Fonts.IoniconsModule());
iOS 專案的設定
請在 iOS 原生專案內，打開
AppDelegate.cs，找到 FinishedLaunching 方法，將程式碼置換如下：
其中，使用
.With(new Plugin.Iconize.Fonts.FontAwesomeModule()) 方法來指定需要載入的字型圖示模組；而 FormsPlugin.Iconize.iOS.IconControls 則是用來進行 Xamarin.Forms 需要用到的控制項初始化。 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
#region 進行 Iconize 套件的初始化
Plugin.Iconize.Iconize
.With(new Plugin.Iconize.Fonts.FontAwesomeModule());
FormsPlugin.Iconize.iOS.IconControls.Init();
#endregion
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App(new iOSInitializer()));
return base.FinishedLaunching(app, options);
}
另外，我們還需要修正 `Info.plist' 檔案內容，在這個檔案內，需要加入底下宣告。
<key>UIAppFonts</key>
<array>
<string>iconize-fontawesome.ttf</string>
<string>iconize-material.ttf</string>
<string>iconize-meteocons.ttf</string>
<string>iconize-typicons.ttf</string>
</array>
UWP 專案的設定
請在 UWP 原生專案內，打開
App.xaml.cs，找到 OnLaunched 方法，將程式碼置換如下：
其中，使用
.With(new Plugin.Iconize.Fonts.FontAwesomeModule()) 方法來指定需要載入的字型圖示模組；而 FormsPlugin.Iconize.UWP.IconControls 則是用來進行 Xamarin.Forms 需要用到的控制項初始化。 protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
if (System.Diagnostics.Debugger.IsAttached)
{
this.DebugSettings.EnableFrameRateCounter = true;
}
#endif
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
rootFrame.NavigationFailed += OnNavigationFailed;
#region 進行 Iconize 套件的初始化
Plugin.Iconize.Iconize
.With(new Plugin.Iconize.Fonts.FontAwesomeModule());
FormsPlugin.Iconize.UWP.IconControls.Init();
#endregion
Xamarin.Forms.Forms.Init(e);
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
}
Xamarin.Forms 的測試頁面
在這個範例中，我們需要設計一個使用者登入頁面，裡面需要讓使用者輸入帳號與密碼。我們利用 Grid Layout 將螢幕切割成四塊區域。
在核心PCL專案中，我們使用 MainPage 做為測試頁面；因為在這個頁面內，需要使用 Iconize 所提供的
IconLabel 控制項，因此，需要先加入可以參考到這個控制項的命名空間，我們需要在 ContentPage 內，加入 xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize" 這樣的宣告，如此，在這個頁面內，就可以使用 iconize 前置詞，之後就可以引用 Iconize 所提供的控制項。
當我們需要顯示 Font Awesome 字型圖示的時候，就可以使用這樣的方式
<iconize:IconLabel Text="fa-user" TextColor="Blue" /> 顯示出一個藍色使用者圖示在螢幕上。至於 Text 屬性內的文字，您可以在 Font Awesome 網站中，找到不同圖示所代表的文字。<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="XFIconize.Views.MainPage"
Title="使用者登入">
<Grid
Margin="30"
HorizontalOptions="Fill" VerticalOptions="Center"
>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<iconize:IconLabel
Grid.Row="0" Grid.Column="0"
HorizontalOptions="Center" VerticalOptions="Center"
FontSize="60"
Text="fa-user" TextColor="Blue" />
<Entry
Grid.Row="0" Grid.Column="1"
HorizontalOptions="Fill" VerticalOptions="Center"
Placeholder="請輸入帳號"/>
<iconize:IconLabel
Grid.Row="1" Grid.Column="0"
HorizontalOptions="Center" VerticalOptions="Center"
FontSize="60"
Text="fa-keyboard-o" TextColor="Blue" />
<Entry
Grid.Row="1" Grid.Column="1"
HorizontalOptions="Fill" VerticalOptions="Center"
Placeholder="請輸入密碼"/>
</Grid>
</ContentPage>
進行測試
Android
底下是我們在 Android 平台下執行結果螢幕截圖
iOS
底下是我們在 iOS 平台下執行結果螢幕截圖
UWP : Windows 10 Mobile
底下是我們在 UWP 平台下執行結果螢幕截圖
