Xamarin.Forms / .NET Standard 體驗之旅6 : 多語應用程式功能設計- 使用Multilingual App Toolkit v4.0 (VS 2017)

在Xamarin.Forms的共用專案還在可攜式類別庫PCL的時代，曾經撰寫過一篇文章，Xamarin.Forms多國語言應用程式設計練習課程，不過，隨著時間演進，現在Visual Studio 2017的Xamarin .Forms方案中，已經開始採用.NET Standard類別庫做為共用類別庫，此為用來取代舊版的可攜式類別庫PCL。

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

由於這篇文章Xamarin.Forms多國語言應用程式設計練習課程是描述如何在可攜式類別庫PCL專案內來使用微軟多語應用程式工具組Multilingual App Toolkit的用法，現在，我們來體驗如何在. NET Standard專案內來使用這個多語應用程式工具組。

準備測試專案

我們先使用Prism Template Pack 提供的專案樣板，建立支援Android, iOS , UWP 三個平台的方案。

安裝多語應用程式工具組的擴充功能

若您的VS2017 IDE 尚未安裝多語應用程式工具組擴充功能，請在您的Visual Studio 2017 功能表中，點選[工具] > [擴充功能與更新]，在[擴充功能與更新] 對話窗中，點選對話窗左邊的[線上] 標籤，並且在右上方的搜尋文字輸入盒中，輸入[Multilingual]，此時，您會看到有搜尋出[Multilingual App Toolkit v4.0 (vs2017)] 項目，請安裝這個擴充功能。

若要完成安裝這個擴充功能，您需要依據最下方的提示：您的變更將進行排程，修改作業將會在全部Microsoft Visual Studio 個視窗都關閉後進行。所以，請關閉Visual Studio 2017 ，並於安裝完成後，重新開啟剛剛建立好的Xamarin.Forms 專案。

開始進行的設定工作

從Visual Studio 2017 功能表中，點選[工具] 項目，此時，您會看到第一個選項為[Multilingual App Toolkit]，並且在旁邊有個[樞紐分析表選取模式] 項目。

若您點選這個項目，您將會收到底下錯誤訊息

Project not Enabld
One or more projects not Enabled. Please review the Multilingual App Toolkit output panel for specific details.

而我們從輸出視窗中，則會看到這樣的訊息

1> 專案"XFMultiLangual"未啟用-無法確定專案的源語文化。

所以，我們就先來修正這個問題

修正無法確定專案的源語文化

使用滑鼠右擊.NET Standard 共用類別庫專案，選擇最後一個[屬性] 項目，當XFMultiLangual 視窗出現後，點選左方的[套件] 標籤頁次，接著，在中間區域，找到[組件中中性語言]，從下拉選單中，選擇[English (United States)]，並且點選儲存功能，儲存這個變更設定動作。

重新啟動Multilingual App Toolkit

現在，讓我們再度從Visual Studio 2017 功能表中，點選[工具] 項目，此時，您會看到第一個選項為[Multilingual App Toolkit]，並且點選在旁邊有個[樞紐分析表選取模式] 項目。

此時，從Visual Studio 的輸出視窗中，您會看到底下的內容，好像又有問題發生。

1>  專案"XFMultiLangual"已啟用。 該專案的來源，文化是 'en-US' [English (United States)]。 
1>  專案"XFMultiLangual"沒有任何可當地語系化的資源。 至少一個資源檔將需要添加之前可以添加翻譯語言。

建立資源檔

請滑鼠右擊.NET Standard 專案，選擇[加入] > [新增資料夾]，接著輸入[Resources] 作為此資料夾名稱。

再度請滑鼠右擊.NET Standard 專案內剛剛建立的[Resources] 資料夾，選擇[加入] > [新增項目]，從項目清單中找到[資源檔] 項目，並且在底下[名稱] 欄位內輸入[AppResources.resx] 作為此資源檔名稱，最後，點選[新增] 按鈕。

再度關閉與啟動Multilingual App Toolkit

現在，讓我們再度從Visual Studio 2017 功能表中，點選[工具] 項目，此時，您會看到第一個選項為[Multilingual App Toolkit]，並且點選在旁邊有個[停用選取範圍] 項目。

此時，從Visual Studio 的輸出視窗中，您會看到底下的內容

1>  多語言應用程式工具組已成功禁用 XFMultiLangual 上

接著，我們重新啟用，從Visual Studio 2017 功能表中，點選[工具] 項目，此時，您會看到第一個選項為[Multilingual App Toolkit]，並且點選在旁邊有個[樞紐分析表選取模式] 項目。

此時，從Visual Studio 的輸出視窗中，您會看到底下的內容，我們就不會看到錯誤訊息了

1>  專案"XFMultiLangual"已啟用。 該專案的來源，文化是 'en-US' [English (United States)]。

加入轉譯語言

請滑鼠右擊.NET Standard 專案，選擇[Multilingual App Toolkit] > [加入轉譯語言]。

不過，此時會出現這個對話窗，其內容為

轉譯提供程式管理器問題

載入一個或多個已安裝的翻譯供應商時遇到錯誤，雖然其他供應商將繼續工作，受影響的供應商將不能用於生成翻譯，直到解決所有問題。

請參閱輸出視窗的其他詳細資訊

而在輸出視窗內，可以看到這個新產出訊息。

1>  An error occurred while loading the provider but no error message was provided.

現在出現了[轉譯語言] 對話窗，您可以搜尋[zh]，並且找到[Chinese (Simplified) [zh-Hans]] 與[Chinese (Traditional)[zh-Hant]] 這兩個項目，最後，點選確定。

現在，從[方案總管] 中，可以看到自動增加了四個檔案AppResources.zh-Hans.resx, AppResources.zh-Hant.resx, XFMultiLangual.zh-Hans.xlf, XFMultiLangual.zh-Hant.xlf。。

請複選這兩個檔案XFMultiLangual.zh-Hans.xlf, XFMultiLangual.zh-Hant.xlf，並且於屬性視窗中，找到[建置動作] 項目，選擇[建置動作] 的設定值為[XIFE Localization file]

開始設定要用到的語言名詞

請打開[AppResources.resx] 檔案，並且輸入Account / Password ，如下圖所示，輸入完成後，請記得要儲存。

滑鼠右擊[MultilingualResources] 資料夾，接著選擇[Multilingual App Toolkit] > [產生電腦轉譯]

完成後，您的輸出視窗會得到這樣的訊息：

1>  The Microsoft Translator provider credentials were not found in the Windows Credential Manager.  Microsoft Translator provider requires an active Azure subscription, as well as manually added to the Credential Manager service.  See http://aka.ms/matmtconfig for more information. 
1>  載入一個翻譯供應商時遇到錯誤。雖然其他供應商將繼續工作，則不會用於此提供程式生成翻譯，直到問題解決。 
1>  The Microsoft Translator provider credentials were not found in the Windows Credential Manager.  Microsoft Translator provider requires an active Azure subscription, as well as manually added to the Credential Manager service.  See http://aka.ms/matmtconfig for more information. 
1>  載入一個翻譯供應商時遇到錯誤。雖然其他供應商將繼續工作，則不會用於此提供程式生成翻譯，直到問題解決。

使用[Multilingual Editor] 工具，打開這個檔案[LocalizationSample.zh-Hant.xlf]

將account / password 兩組詞彙都複選起來，接著點選工具列上[Translate] 按鈕，此時，您將會看到，會自動幫您翻譯出繁體中文文字，記得要儲存

最後，使用[Multilingual Editor] 工具，打開這個檔案[XFMultiLangual.zh-Hans.xlf]，將這些語詞翻譯成為簡體中文文字。

確認翻譯結果

請打開這兩個檔案[AppResources.zh-Hans.resx] 與[AppResources.zh-Hant.resx]，我們發現到剛剛翻譯出來的結果與新增的詞彙，都沒產生在這兩個檔案內，現在，讓我們建置.NET Standard 這個專案。

現在，您將會看到剛剛新增的詞彙與翻譯結果，就會出現了。

底下是輸出視窗的內容

1>------ 已開始建置: 專案: XFMultiLangual, 組態: Debug Any CPU ------
1>Multilingual App Toolkit v4.0.6900.0
1>Multilingual App Toolkit build started.
1>Multilingual App Toolkit build completed successfully. (15 ms)
1>XFMultiLangual -> C:\Vulcan\Projects\XFMultiLangual\XFMultiLangual\XFMultiLangual\bin\Debug\netstandard2.0\XFMultiLangual.dll
========== 建置: 1 成功、0 失敗、0 最新、0 略過 ==========

套用到Xamarin.Forms 上

首先要在所有專案上，安裝[Plugin.Multilingual] 這個NuGet 套件

請建立一個[Helpers] 資料夾，使用滑鼠右擊這個資料夾，選擇[加入] > [類別]，在名稱欄位輸入[TranslateExtension]

在這個檔案前面，加入底下的命名​​空間參考

using Plugin.Multilingual;
using System.Reflection;
using System.Resources;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

將[TranslateExtension] 類別，使用底下程式碼替換

    [ContentProperty("Text")]
    public class TranslateExtension : IMarkupExtension
    {
        const string ResourceId = "XFMultiLangual.Resources.AppResources";

        static readonly Lazy<ResourceManager> resmgr = new Lazy<ResourceManager>(() => new ResourceManager(ResourceId, typeof(TranslateExtension).GetTypeInfo().Assembly));

        public string Text { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Text == null)
                return "";

            var ci = Thread.CurrentThread.CurrentCulture; 
            var translation = resmgr.Value.GetString(Text, ci); 

            if (translation == null)
            {

#if DEBUG
                throw new ArgumentException(
                    String.Format("Key '{0}' was not found in resources '{1}' for culture '{2}'.", Text, ResourceId, ci.Name),
                    "Text");
#else
                translation = Text; // returns the key, which GETS DISPLAYED TO THE USER
#endif
            }
            return translation;
        }
    }

請打開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:i18n="clr-namespace:XFMultiLangual.Helpers"
             x:Class="XFMultiLangual.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout Padding="20">
        <Label 
            Text="{i18n:Translate Account}"/>
        <Label 
            Text="{i18n:Translate Password}"/>
    </StackLayout>

</ContentPage>

請打開MainPageViewModel.cs 檔案，修正MainPageViewModel 類別，如下所示：

    public class MainPageViewModel : ViewModelBase
    {
        public MainPageViewModel(INavigationService navigationService) 
            : base (navigationService)
        {
            Title = "Main Page";

            Title = Resources.AppResources.Account;
        }
    }

開始進行測試

首先，調整您的模擬器或者手機，具有繁體中文語系，以下是執行結果截圖

調整您的模擬器或者手機，具有簡體中文語系，以下是執行結果截圖

調整您的模擬器或者手機，具有英文語系，以下是執行結果截圖

更多Xamarin.Forms 相關文章

更多關於Xamarin / Xamarin.Forms 教學、技術分享、用法文章，請參考

I ♥ Xamarin