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

2022 年 11 月 1 日
筆記

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

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

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

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

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

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

影片實拍：演示升訊威在線客服系統在網路中斷，直接禁用網卡，拔掉網線的情況下，也不丟消息，不出異常。
//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」。

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

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