升訊威線上客服系統客服端英文介面的技術實現方法，客戶落地巴西聖保羅

我在業餘時間開發維護了一款免費開源的升訊威線上客服系統，也收穫了許多使用者。對我來說，只要能獲得使用者的認可，就是我最大的動力。

最近收到來自巴西客戶的需求，希望為客服端增加英文介面。

好，那就滿足這個需求吧！本文重點從技術角度介紹了客服端多國語言介面的實現方法。

線上客服客服端，支援中英文雙語介面：

線上客服訪客端，支援中文、英文、日文、韓文、葡文、印尼文、土耳其文、俄文等：

免費線上使用 & 免費私有化部署：https://kf.shengxunwei.com

視訊實拍：演示升訊威線上客服系統在網路中斷，直接禁用網路卡，拔掉網線的情況下，也不丟訊息，不出異常。
https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53

WPF 多語言介面實現方案

對 WPF 應用程式進行在地化時，有多種選擇。例如，可以將應用程式中的可在地化資源繫結到 XML 檔案，在 resx 表中儲存可在地化文字，或者讓在地化人員使用 Extensible Application Markup Language (XAML) 檔案。本部分介紹使用 XAML 的 BAML 形式的在地化工作流，這種工作流提供以下幾個好處：

可以在生成之後進行在地化。
可以從較舊版本 XAML 的 BAML 形式更新到在地化的較新版本 XAML 的 BAML 形式，以便在開發的同時進行在地化。
因為 XAML 的 BAML 形式是 XAML 的已編譯形式，所以可以在編譯時驗證原始源元素和語意。

在地化生成過程

開發 WPF 應用程式時，在地化的生成過程如下：

開發人員建立 WPF 應用程式並將其全球化。在專案檔案中，開發人員設定 en-US，以便在編譯應用程式時生成一箇中性語言的主程式集。此程式集具有一個附屬 .resources.dll 檔案，其中包含所有可在地化的資源。因為在地化 API 支援從主程式集進行提取，所以可選擇在主程式集中保留源語言。
將檔案編譯到生成中時，會將 XAML 轉換為 XAML 的 BAML 形式。將向說英語的客戶釋出非特定區域性的 MyDialog.exe 和區域性相關的（英語）MyDialog.resources.dll 檔案。

在地化工作流

在地化過程在生成未在地化的 MyDialog.resources.dll 檔案之後開始。使用 System.Windows.Markup.Localizer 下的 API 將原始 XAML 中的 UI 元素和屬性從 XAML 的 BAML 形式提取為鍵值對。在地化人員使用鍵/值對來對應用程式進行在地化。在在地化完成之後，可以從新值生成一個新的 .resource.dll。

鍵值對的鍵是在在地化人員開始進行在地化之後，開發人員放置在原始 UI 中的 x:Uid 值，你可以將開發更改與已完成的在地化工作進行合併，使損失的翻譯工作降至最少。

下圖顯示了一個基於 XAML 的 BAML 形式的典型在地化工作流。此關係圖假設開發人員用英語編寫應用程式。開發人員建立 WPF 應用程式並將其全球化。在專案檔案中，開發人員設定 en-US，以便在生成時會生成一箇中性語言的主程式集，該程式集具有一個包含所有可在地化資源的附屬 .resources.dll。或者，因為 WPF 在地化 API 支援從主程式集進行提取，所以還可以保留主程式集中的源語言。生成過程結束之後，XAML 會編譯為 BAML。將向說英語的客戶提供非特定區域性的 MyDialog.exe.resources.dll。

自動佈局

在 Window1.xaml 中：

以前的 Window 屬性會根據內容大小自動調整視窗大小。此屬性可以防止視窗切斷在在地化之後大小增加的內容；它還可以在內容由於在地化而大小減小時刪除不必要的空格。

<Grid x:Uid="Grid_1">

為了使 WPF 在地化 API 正確執行，需要使用 Uid 屬性。

它們由具有較舊的 UI 在地化的 UI 使用。通過在命令列介面中執行 msbuild -t:updateuid RunDialog.csproj，可以新增 Uid 屬性。因為手動新增 Uid 屬性通常比較費時並且準確性較差，所以建議使用此方法來新增這些屬性。可以通過執行 msbuild -t:checkuid RunDialog.csproj 來檢查是否正確設定了 Uid 屬性。

使用 Grid 控制元件可以構造 UI，這是一個有用的控制元件，它可以利用位於每個單元格中的 UI 元素中的自動佈局，適應在地化過程中大小的增加和減小。

<Grid.ColumnDefinitions>
  <ColumnDefinition x:Uid="ColumnDefinition_1" />
  <ColumnDefinition x:Uid="ColumnDefinition_2" />

放置 Open: 標籤和 ComboBox 的前兩列佔據 UI 總寬度的 10%。

<ColumnDefinition x:Uid="ColumnDefinition_3" SharedSizeGroup="Buttons" />
  <ColumnDefinition x:Uid="ColumnDefinition_4" SharedSizeGroup="Buttons" />
  <ColumnDefinition x:Uid="ColumnDefinition_5" SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>

使用 Grid 的共用調整大小功能。最後三列通過將自身放置在相同的 SharedSizeGroup 中利用此功能。正如屬性名稱所示，此屬性允許不同的列採用相同大小。因此，在將「Browse…」在地化為更長的字串「Durchsuchen…」時，所有按鈕的寬度都會增加，而不是顯示一個小的「OK」按鈕和一個大得不相稱的「Durchsuchen…」按鈕。

放置在 UI 根元素中的 XAML 中的 xml:lang 處理。此屬性描述給定元素及其子元素的區域性。 WPF 中的多項功能都使用此值，在在地化過程中應對此值進行相應的更改。此值會更改在斷字以及對字詞進行拼寫檢查時所使用的字典。它還會影響數位的顯示以及字型回退系統選擇所用字型的方式。最後，該屬性會影響數值的顯示方式，形成在複雜指令碼中編寫文字的方式。預設值為「en-US」。

此時多語言設定基本完成，剩下的就是翻譯工作了。