在這篇實作練習中，將會說明如何在 Xamarin.Forms 應用程式專案中，開發出具有多國語言文字的應用程式；也就是說，我們只需要開發一套UI/與商業處理邏輯程式碼，當這個應用程式在不同的語系下執行的時候，就會呈現出當時語系的文字。

很神奇吧，而且，實作上也不是十分複雜，因為我們將會借助於 Multilingual App Toolkit (MAT) 這套工具，幫助我們完成相關工作；至於 Multilingual App Toolkit (MAT) 這套工具的詳細使用方式，不在這個練習中做說明，如有需要的學員，可以參考 [ Multilin這個練習中做說明，如有需要的學員，可以參考 Multilingual App Toolkit (MAT) 。

底下為這個頁面的示意設計圖，請您依照這個畫面進行這個應用程式的開發與設計。

範例專案來源

您可以到這裡下載該練習的專案原始碼

https://github.com/vulcanlee/XFWorkShop/tree/master/XFLocalization

專案設計構想

在這個練習專案中，將只會有一個頁面，我們在這裡將會設計這個頁面為使用者要登入系統時候，經常會設計的內容，那就是需要使用者輸入帳號與密碼和一個登入按鈕。不過，我們並不會在檢視模型中設計任何商業邏輯，這是因為，要做出一個支援多國語言頁面，不需要使用到檢視模型，我們將僅會在頁面的 XAML 檔案中來設計。在這裡，我們將會設計支援英文、繁體中文、日文這三種語言。

另外﹐您也需要變更手機或者模擬器的語系，這樣才能夠看到當時作業系統語言的相對應文字

學習重點清單

在這個練習中，您將會學習到如何使用底下技術：

如何安裝 Multilingual App Toolkit (MAT)
如何設定與啟動 Multilingual App Toolkit (MAT)
新增 .NET 資源檔案 (.resx) 到核心 PCL 專案內
在 XAML 中存取 .NET 靜態物件的屬性值
切換行動裝置的語系

技術重點說明

事前準備工作

要練習這個專案，您需要在您的電腦中安裝 Multilingual App Toolkit (MAT) 工具

安裝 Multilingual App Toolkit (MAT)

請先關閉所有的 Visual Studio IDE 工具
開啟這個網頁，點選 English ，下載Multilingual App Toolkit (MAT) 工具

https://developer.microsoft.com/en-us/windows/develop/multilingual-app-toolkit
下載完成後，請執行剛剛下載完成的檔案，將其安裝到您的電腦上

出現歡迎畫面之後，請點選 Next 按鈕

勾選所有 CheckBox，接受使用授權內容，接著，請點選 Next 按鈕

此時，會請您選擇要安裝的類型，在這裡，我們將使用 Custom 的安裝方式，請點選 Custom 按鈕

在這裡預設為安裝所有元件，接著，請點選 Next 按鈕

請點選 Install 按鈕，準備開始進行安裝

底下為安裝過程畫面，若安裝完成後，就可以重新開啟 Visual Studio IDE

建立練習專案

首先，開啟您的 Visual Studio 2015
接著透過 Visual Studio 2015 功能表，選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
接著，Visual Studio 2015 會顯示 新增專案 對話窗，請在這個對話窗上，進行選擇 Visual C# > Prism > Prism Unity App (Xamarin.Forms)
接著，在最下方的 名稱 文字輸入盒處，輸入 XFLocalization 這個名稱，最後使用滑鼠右擊右下方的 確定 按鈕。
當出現 PRISM PROJECT WIZARD 對話窗之後，請勾選 ANDROID, iOS, UWP 這三個平台選項，並且點選 CREATE PROJECT 按鈕。
接著會看到 新的通用 Windows 專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
最後，整個新的 Xamarin.Forms 專案就建立完成了。

安裝 NuGet 套件

無

建立方案資料夾

請依照底下說明，在這個方案內的不同專案下，建立所需要的資料夾

核心 PCL 專案 (XFLocalization)

Resources

原生 Android 專案 (XFLocalization.Droid)

無

原生 iOS 專案 (XFLocalization.iOS)

無

原生 UWP 專案 (XFLocalization.UWP)

無

進行專案開發

建立資料模型

無

建立 AppResources.resx 資源檔案

請滑鼠右擊，核心 PCL 專案內的 Resources 資料夾
選擇 加入 > 新增項目
在 加入新項目 對話窗中，點選 Visual C# > 資源檔
在名稱欄位輸入 AppResources.resx

啟動 Multilingual App Toolkit (MAT) 工具

點選核心 PCL 專案名稱，也就是 XFLocalization，設定其為預設起始專案
從功能表中，點選 工具 > Multilingual App Toolkit > 樞紐分析表選取模式

最後一個中文名稱，看起來怪怪的，實際上的英文名稱為 Enable Selection
滑鼠右擊核心 PCL 專案，選擇 Multilingual App Toolkit > 加入轉譯語言
請勾選 可用語言 清單內的 中文(繁體)[zh-Hant] / 日文[ja] / 英文[en]預設值

若找不太到您要的語系名稱，可以使用右上角文字輸入盒，來進行過濾篩選

每個語系名稱後，都有奇怪的符號，請參考 MAT 說明文件
在進行上述動作之後，您的專案會變成底下結構

在這裡多出了一個資料夾，MultilingualResources，這個資料夾內將會多了兩個 .xlf 檔案

另外，在 Resources 資料夾內，也增加了兩個 .resx 檔案

對於 .resx 檔案，我們僅須要維護 AppResources.resx 檔案即可

底下為執行使用 MAT 前的專案結構

建立多國語言文字資源

滑鼠雙擊 AppResources.resx 檔案
請參考下圖，輸入相關文字到名稱 / 值欄位內，輸入完成後，記得按下 Ctrl + S，儲存您的輸入內容。

在名稱這裡，我沒有使用英文，這是我個人的習慣，因為，到時候在 XAML 頁面上會比較好辨識
滑鼠右擊核心 PCL 專案，選擇 重建
滑鼠右擊核心 PCL 專案內的 MultilingualResources 資料夾
選擇 Multiligual App Toolkit > 產生電腦轉譯

這裡是要要求 MAT 自動幫我們做出翻譯文字
在進行自動文字翻譯過程中，會出現下圖，告訴您，自動翻譯的過程
滑鼠雙擊 XFLocalization.zh-Hant.xlf 檔案

您會看到如下圖，此時，您可以修正這些翻譯內容是否符合您的需要。若有不正確的內容，請進行修改即可。

底下是修正後的結果，請記得要按下 Ctrl + S ，進行儲存
重複同樣的動作，開啟 XFLocalization.ja.xlf 檔案，確認翻譯結果並予以修正

建立 MainPage 頁面檢視

請滑鼠雙擊 核心 PCL 專案 下的 Views > MainPage.xaml 檔案
請在 MainPage.xaml 檔案內，填入底下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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:appRes="clr-namespace:XFLocalization.Resources"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFLocalization.Views.MainPage"
             Title="MainPage">
    <Grid
        RowSpacing="0" ColumnSpacing="0"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--應用程式名稱文字-->
        <Label 
            Grid.Row="0" Grid.Column="0"
            VerticalOptions="Center" HorizontalOptions="Center"
            Text="{x:Static appRes:AppResources.多奇數位創意有限公司}" TextColor="#e0421f"
            FontSize="Large"
            />

        <!--使用者登入方式選擇-->
        <StackLayout
            Grid.Row="1"
            Orientation="Vertical"
            Spacing="0"
            Margin="30,0,30,0"
            >

            <!--使用者自行輸入帳號與密碼的認證方式-->
            <Label 
                VerticalOptions="Center" HorizontalOptions="Start"
                Text="{x:Static appRes:AppResources.帳號}" TextColor="#e0421f"
                />
            <Entry
                HorizontalOptions="Fill" VerticalOptions="Center"
                Placeholder="{x:Static appRes:AppResources.請輸入您的電子郵件信箱}" 
                Text="{Binding 帳號}" TextColor="Black"/>
            <Label 
                VerticalOptions="Center" HorizontalOptions="Start"
                Text="{x:Static appRes:AppResources.密碼}" TextColor="#e0421f"
                />
            <Entry
                HorizontalOptions="Fill" VerticalOptions="Center"
                Placeholder="{x:Static appRes:AppResources.請輸入該帳號使用的密碼}" 
                Text="{Binding 密碼}" TextColor="Black"
                />
            <Button
                HorizontalOptions="Center" VerticalOptions="Center"
                WidthRequest="150"
                Text="{x:Static appRes:AppResources.登入}" TextColor="White"
                BackgroundColor="#849187"
                Command="{Binding 登入Command}" />
        </StackLayout>
    </Grid>
</ContentPage>

在這個 XAML 檔案內，首先宣告了要使用 AppResources 類別的命名空間，使用這樣的方式來增加一個命名空間 xmlns:appRes="clr-namespace:XFLocalization.Resources"

若想要在 XAML 中，顯示一個多國語言的文字，可以使用這樣的方式 {x:Static appRes:AppResources.多奇數位創意有限公司}，這表示了這個文字會從 AppResources 類別內的 多奇數位創意有限公司 這個靜態屬性，依據當時語系取得要顯示的文字。

專案執行結果

底下為這個範例專案，在各個平台下執行與操作結果說明。

Android 平台執行結果

滑鼠右擊原生 Android 專案
選擇 設定為起始專案
選擇您要執行的目的裝置或者模擬器
按下 F5 開始進行偵錯
因為現在模擬器的語系為英文，所以，會看到底下畫面，都是英文文字
按下 Shift + F5 停止偵錯
在 Android 模擬器的設定功能中，選擇 Language & input > Language > 中文(繁體)
按下 F5 開始進行偵錯
因為現在模擬器的語系為中文(繁體)，所以，會看到底下畫面，都是中文(繁體)文字
按下 Shift + F5 停止偵錯
在 Android 模擬器的設定功能中，選擇 日本語
按下 F5 開始進行偵錯
因為現在模擬器的語系為日本語，所以，會看到底下畫面，都是日文文字

iOS 平台執行結果

滑鼠右擊原生 iOS 專案
選擇 設定為起始專案
選擇您要執行的目的裝置或者模擬器
按下 F5 開始進行偵錯
因為現在模擬器的語系為英文，所以，會看到底下畫面，都是英文文字
按下 Shift + F5 停止偵錯
在 iOS 模擬器中，執行 Settings > Gerneral > Language & Region > iPhone Language > 繁體中文 > Done
按下 F5 開始進行偵錯
因為現在模擬器的語系為繁體中文，所以，會看到底下畫面，都是繁體中文文字
按下 Shift + F5 停止偵錯
在 iOS 模擬器中，執行 Settings > Gerneral > Language & Region > iPhone Language > 日本語> Done
按下 F5 開始進行偵錯
因為現在模擬器的語系為日文，所以，會看到底下畫面，都是日文字

UWP 平台執行結果

滑鼠右擊原生 UWP 專案
選擇 設定為起始專案
選擇您要執行的目的裝置或者模擬器
按下 F5 開始進行偵錯
因為現在模擬器的語系為英文，所以，會看到底下畫面，都是英文文字
按下 Shift + F5 停止偵錯
在 UWP Mobile 模擬器中，切換到 Settings > Time & language > Language > Add language > 中文(台灣) > Done > Restart phone
按下 F5 開始進行偵錯
因為現在模擬器的語系為繁體中文，所以，會看到底下畫面，都是繁體中文文字
按下 Shift + F5 停止偵錯
在 UWP Mobile 模擬器中，切換到 設定 > 時間與語言 > 語言 > 新增語言 > 日本語 > 完成 > 重新啟動手機
按下 F5 開始進行偵錯
因為現在模擬器的語系為日文，所以，會看到底下畫面，都是日文文字

參考網址

Multilingual app toolkit 4.0

https://developer.microsoft.com/en-us/windows/develop/multilingual-app-toolkit

Cross-Platform Localization with the Multilingual App Toolkit

https://channel9.msdn.com/Events/Build/2015/2-84

問題

當您在規劃一個 Xamarin.Forms 的應用程式的時候，都會制訂一套配色規則，並且每個頁面與控制項，都會依照這套視覺設計規範，進行套版設計；可是，當您在 iOS 平台執行這個應用程式時候，卻發現到狀態列的背景與文字顏色似乎沒有地方可以修改，這該如何處理呢?

解答

您需要在 iOS 原生專案內找到這個應用程式的進入點

請開啟 AppDelegate.cs 檔案

在 AppDelegate 類別內，加入底下的宣告，其中，ExportedColors.AccentColor 與 ExportedColors.InverseTextColor 是定義在核心 PCL 專案內的一個 Color 類別的顏色物件。而 ToUIColor 是 Xamarin.Forms.Platform.iOS.ColorExtensions 類別內定義的延伸方法，使用這樣的方法來處理，可以將 Xamarin.Forms 內的顏色物件，轉換成為 Xamarin.iOS內的 UIColor 物件。這裡宣告了背景與文字顏色。

        public static UIColor AccentColor = ExportedColors.AccentColor.ToUIColor();
        public static UIColor TextColor = ExportedColors.InverseTextColor.ToUIColor();

在 FinishedLaunching 方法內，加入底下程式碼

這裡使用了原生 iOS 專案內的 UINavigationBar 類別，進行設定狀態列的背景與文字顏色。

            UINavigationBar.Appearance.BarTintColor = AccentColor;
            UINavigationBar.Appearance.TintColor = TextColor;
            UINavigationBar.Appearance.TitleTextAttributes = new UIStringAttributes
            {
                ForegroundColor = UIColor.White,
            };

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2017/01/25

Xamarin.Forms 多國語言應用程式設計練習課程

範例專案來源

專案設計構想

學習重點清單

技術重點說明

事前準備工作

安裝 Multilingual App Toolkit (MAT)

建立練習專案

安裝 NuGet 套件

建立方案資料夾

核心 PCL 專案 (XFLocalization)

原生 Android 專案 (XFLocalization.Droid)

原生 iOS 專案 (XFLocalization.iOS)

原生 UWP 專案 (XFLocalization.UWP)

進行專案開發

建立資料模型

建立 AppResources.resx 資源檔案

啟動 Multilingual App Toolkit (MAT) 工具

建立多國語言文字資源

建立 MainPage 頁面檢視

專案執行結果

Android 平台執行結果

iOS 平台執行結果

UWP 平台執行結果

參考網址

Multilingual app toolkit 4.0

Cross-Platform Localization with the Multilingual App Toolkit

Xamarin FAQ 1-24 : 如何變更 iOS 應用程式的狀態列背景與文字顏色

問題

解答

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2017/01/25

Xamarin.Forms 多國語言應用程式設計練習課程

範例專案來源

專案設計構想

學習重點清單

技術重點說明

事前準備工作

安裝 Multilingual App Toolkit (MAT)

建立練習專案

安裝 NuGet 套件

建立方案資料夾

核心 PCL 專案 (XFLocalization)

原生 Android 專案 (XFLocalization.Droid)

原生 iOS 專案 (XFLocalization.iOS)

原生 UWP 專案 (XFLocalization.UWP)

進行專案開發

建立 資料模型

建立 AppResources.resx 資源檔案

啟動 Multilingual App Toolkit (MAT) 工具

建立多國語言文字資源

建立 MainPage 頁面檢視

專案執行結果

Android 平台執行結果

iOS 平台執行結果

UWP 平台執行結果

參考網址

Multilingual app toolkit 4.0

Cross-Platform Localization with the Multilingual App Toolkit

Xamarin FAQ 1-24 : 如何變更 iOS 應用程式的狀態列背景與文字顏色

問題

解答

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

建立資料模型