设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

构建多语言的WPF应用

2014-7-9 10:25| 发布者: joejoe0332| 查看: 6032| 评论: 0|原作者: 徐继开, TimBao, chasehong, 无若, 0x0bject, 请叫我益达张, 卖茄子, 地狱星星|来自: oschina

摘要: 在WPF应用程序中搭建多语言支持(Multilingual Support)是我最近在做的一件事,对于不使用英语的人士而言,此举提高了程序的可用性。实现起来要完成以下目标:…… ...


导言

在WPF应用程序中搭建多语言支持(Multilingual Support)是我最近在做的一件事,对于不使用英语的人士而言,此举提高了程序的可用性。实现起来要完成以下目标:

  • 一个版本容纳多种语言. 这就意味着不要创建单独的英语版本、法语版本、日语版本等等。 许多电子产品(例如电视和数码相机)在同一模块中支持多语言。你不需要购买不同模块或给软件打补丁来得到与默认设置不同的语言

  • 允许在运行时切换接口语言. 这就是说不需要关闭应用程序并配置操作系统环境,一切都交给安装器。

  • 首次运行选择合适语言. W应用程序第一次运行,就把接口语言设为操作系统的系统语言。这点很有意义--法国用户喜欢安装、运行、并马上使用软件,而不会再一个不熟悉的应用程序中找到切换语言的地方。

  • 允许UI可拓展以便翻译,缩减可能的裁剪文本

此外,具体实现不应该随着用户界面的增长而越来越来难实现。(这是我觉得最困难的方面。)

所以这篇文章旨在提供一份我开发过程的详细解决方案的大纲,这基于一些我过去写过的博客和帖子(这里这里这里)。随着时间的推移,我将指出例子的相关部分并告诉你它们是如何适配在一起的。

声明:例子中的文本是使用自动在线翻译服务生成的。尽管尽了最大的努力来确保这是尽可能准确(通过反向翻译校对),有可能翻译的内容有不准确或错误。特别是当它使用了一个我不清楚的完全不同的写作系统。


上层概述

这个为WPF应用所设计的实现遵循了一种MVVM(模型-视图-视图模型)样式。语言数据存储在嵌入式XML文件中,这些文件按照需求原则加载到内存中,即当接口语言发生改变的时候。这就是“模型”的部分。.

“视图模型”具有将当前语言的语言数据包含到整个WPF应用中的特性。它是XAML文件的集合,XAML文件形成了包含了关联该语言数据的“视图”。为了给一个特定的文本元素选择准确的值,每个关联都利用具有一个转换器参数的用户定制值转化器来查找文本键值。最后,用一个用户定制标记扩展来抽取这个关联的细节,这样只有键值(即转换参数)需要指定。


例子

为了说明这个实现在实际中如何工作,我根据这个功能创建一个小的示例应用。这个叫做'RePaver'的应用用于清除路径标记表达式,并具有基本的翻转,反转,转换和缩放实际几何图形(即无需图层转换)的功能。在后台,该应用用正则表达式抽取路径段落,并就地对每个段落进行转换。

为了给你有个概念,看如下一个Path表达式的例子,这个表达式一般从导出为XAML格式的矢量图形文件中得到(这个路径表达式跟一些我目前经手项目的路径没有关系!):

<Path Data="M 470.567,400.914 L 470.578, 
            390.903 L466.551,390.863 L 472.6,384.876 L472.598,400.888 Z" ... />

如果你复制黏贴(引号中的)数据表达式到输入框中并点击'Go',可以看到如下的输出:

M 4,16 L 4,6 L 0,6 L 6,0 L 6,16 Z

在右边你还能即时看到形象化的"转换前"和"转换后"的结果。

你可以任意设置一些选项 - 可以看到这些操作是按照翻转/反转 -> 缩放到[根据边框尺寸] -> 偏移。当然,你可以用不同的语言试一下。


模块

XML

如上所述,每个组成用户界面的文本都保存在每种语言的XML文件的本地化表格中, 并把XML文件当做嵌入式资源来编译。每条text的父元素包含一个键属性用来检索本地化文本。下面是英语版本定义文件的例子,LangEN.xml:

01<LangSettings>
02    <IsRtl>0</IsRtl>
03    <MinFontSize>11</MinFontSize>
04    <HeadingFontSize>16</HeadingFontSize>
05    <UIText>
06        <!-- Menu bar -->
07        <Entry key="TransformLabel">Transform</Entry>
08        <Entry key="LanguageLabel">Language</Entry>
09 
10        <!-- Common Operations -->
11        <Entry key="ApplyLabel">Apply</Entry>
12        <Entry key="UndoLabel">Undo</Entry>
13        <Entry key="CancelLabel">Cancel</Entry>
14 
15        <!-- Section Headings -->
16        <Entry key="InputLabel">Input</Entry>
17        <Entry key="OutputLabel">Output</Entry>
18        <Entry key="InfoLabel">Info</Entry>
19        <Entry key="TransformPropertiesLabel">Transform</Entry>
20 
21        <!-- Item Labels -->
22        <Entry key="FlipRotateLabel">Flip / Rotate</Entry>
23        <Entry key="OffsetLabel">Offset</Entry>
24        <Entry key="ScaleToLabel">Scale To</Entry>
25        <Entry key="DimensionsLabel">Dimensions</Entry>
26        <Entry key="WidthLabel">Width</Entry>
27        <Entry key="HeightLabel">Height</Entry>
28        <Entry key="GoLabel">Go</Entry>
29 
30    </UIText>
31</LangSettings>

在上述英文版本示例中,同样提到了 theIsRtl, MinFontSize, 和HeadingFontSize元素。字体大小用来决定渲染字体的尺寸,让字体更易分辨,尤其在显示日文,韩文和阿拉伯文的时候。IsRtlel元素决定语言是否从右往左读(阿拉伯文和希伯来语就是这样)。




注意到语言名称并没有出现在上面的XML文件中。这是因为本地化语言名称放在一个单独的XML文件中定义,LanguageNames.xml:

01<LangNames>
02    <Language code="en">English</Language>
03    <Language code="ar">العربية</Language>
04    <Language code="de">Deutsch</Language>
05    <Language code="el">&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά</Language>
06    <Language code="es">Espa&ntilde;ol</Language>
07    <Language code="fr">Fran&ccedil;ais</Language>
08    <Language code="he">עברית</Language>
09    <Language code="hi">हिन्दी</Language>
10    <Language code="it">Italiano</Language>
11    <Language code="jp">日本語</Language>
12    <Language code="ko">한국어</Language>
13    <Language code="ru">Русский</Language>
14    <Language code="sv">Svenska</Language>
15</LangNames>

每种语言定义文件的命名遵循这样一个惯例, 'LangXX.xml'.其中,XX 与两个字母的 ISO语言代码相对应,LanguageNames.xml中的每个Language元素也该代码对应。当然,这一惯例可以拓展或修改为易于处理本地化(如 en-NZ, en-US),甚至改成三字母的ISO语言代码。

UILanguageDefn类

在语言定义文件中的当前界面语言数据被加载进一个内部类(UILanguageDefn)中是为了被剩下的应用消耗掉。主要的组件是一个<string, string>类型的字典。这个字典包含了从文本键到局部的文本值的映射。其它的属性显示:IsRtl(是否右对齐),MinFontSize(最小字体大小)和HeadingFontSize的值。

当你使用这个类的时候,局部语言文本会通过调用下面的方法重新取回:

01/// <summary>
02/// Gets the localised text value for the given key.
03/// </summary>
04/// <param name="key">The key of the localised text to retrieve.</param>
05/// <returns>The localised text if found, otherwise an empty string.</returns>
06public string GetTextValue(string key)
07{
08    if (_uiText.ContainsKey(key))
09        return _uiText[key];
10 
11    return "";
12}

除此之外,UILanguageDefn类有一个静态的从语言编码到局部的语言名称的映射(这个映射是从LanguageNames.xml中加载进来的),例如,“en”和“English”、“sv”和“Svenska”。这被用来填充到'Language'标签的可用语言列表中,而且被应用所支持的权威的语言列表过滤。因此,任何不再这个列表的语言不会被界面所显示。即使有一个语言定义文件或在LanguageNames.xml中有所对应的实体,也不会显示这个语言。这会在下面的章节中进一步介绍。

加载数据

类`UILanguageDefn`形成模型的一部分。模型里面的第二个主要的实体就是应用全状态,`MainWindowModel`。它包含了被整个应用程序使用的`UILanguageDefn`的授权的实例。这是在全部界面中获取文本元素的边界的实例。(通过ViewModel)。

当`MainWindowModel`被构造时,在加载当前语言之前,首先会注册语言列表的授权和从名字为LanguageNames.xml的资源文件中加载本地化语言。下面通过例子让我们看看它是如何工作的:

01public class MainWindowModel
02{
03    private UILanguageDefn _languageMapping;
04 
05    public MainWindowModel(int maxWidth, int maxHeight)
06    {
07        RegisterLanguages();
08        LoadLanguageList();
09         
10        //Settings are loaded here, where CurrentLanguageCode is decided.
11 
12        UpdateLanguageData();
13    }
14     
15    public string CurrentLanguageCode
16    {
17        get 
18        {
19            // Retrieves the current language code from
20            // the Settings model (abstracted away)
21        }
22    }
23     
24    /// <summary>
25    /// Registers the languages by their corresponding ISO code.
26    /// </summary>
27    private void RegisterLanguages()
28    {
29        // Defined in Constants class
30        string[] supportedLanguageCodes =
31        {
32            "en""ar""de""el"
33            "es""fr""ko""hi"
34            "it""he""jp""ru""sv"  
35        };
36         
37        foreach(string languageCode in supportedLanguageCodes)
38            UILanguageDefn.RegisterSupportedLanguage(languageCode);
39    }
40 
41    /// <summary>
42    /// Loads the list of available languages from the embedded XML resource.
43    /// </summary>
44    private void LoadLanguageList()
45    {
46        // Defined in Constants class
47        string resourcePath = "RePaverModel.LanguageData.LanguageNames.xml";
48         
49        System.IO.Stream file =
50                Assembly.GetExecutingAssembly().GetManifestResourceStream(resourcePath);
51 
52        XmlDocument languageNames = new XmlDocument();
53        languageNames.Load(file);
54 
55        UILanguageDefn.LoadLanguageNames(languageNames.DocumentElement);
56    }
57 
58    /// <summary>
59    /// Updates the UI language data from that
60    /// defined in the corresponding language file.
61    /// </summary>
62    /// <returns>
63    public bool UpdateLanguageData()
64    {
65        string languageCode = CurrentLanguageCode;
66        if (String.IsNullOrEmpty(languageCode)) return false;
67 
68        //This follows a convention for language definition files
69        //to be named &apos;LangXX.xml&apos; (or &apos;LangXX-XX.xml&apos;)
70        //where XX is the ISO language code.
71        string resourcePath = 
72          String.Format(Constants.LanguageDefnPathTemplate, languageCode.ToUpper());
73        System.IO.Stream file =
74            Assembly.GetExecutingAssembly().GetManifestResourceStream(resourcePath);
75 
76        XmlDocument languageData = new XmlDocument();
77        languageData.Load(file);
78 
79        _languageMapping = new UILanguageDefn();
80        _languageMapping.LoadLanguageData(languageData.DocumentElement);
81 
82        return true;
83    }
84}

你可能注意到上面的代码提到了第三个主体 - 设置状态。在众多可在运行时调整的设置中,正是这个状态存储了当前正被使用的接口语言。大多数的设置项都在应用程序关闭后保存在磁盘中,当程序再次打开时就重新加载出来。

然而,如果应用程序是第一次打开(没有设置文件存在),那么这些设置就会被设定为默认状态。对于语言来说,英语是默认的,但这并不是用户友好(user-friendly)的。所以呢,我们就这样检索当前系统语言:

1CultureInfo.CurrentCulture.TwoLetterISOLanguageName;

找到相应的语言后,如果应用程序不支持该语言,就让英语作为默认语言。这样,只要你的本地语言受支持,UI就会在你程序第一次运行时显示该语言。在Setting model hierarchy中,有如下代码

01public LanguageSettings()
02{
03    // Initialise the default language code.
04    // In most cases this will be overwritten by the
05    // restored value from the saved settings, or that of the current culture.
06    _uiLanguageCode = Constants.DefaultLanguageCode;     //"en"
07 
08    string languageCode = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
09 
10    // If the system language is supported, this will
11    // ensure that the application first loads
12    // with the UI displayed in that language.
13    if (UILanguageDefn.AllSupportedLanguageCodes.Contains(languageCode))
14        _uiLanguageCode = languageCode;
15}

这个类中的另一种方法,姑且叫做后者吧 (有用户设置文件存在的时候使用),它会提取保存在文件中的设置项的值,并把它复写到_uiLanguageCode.




视图模型

这里出现了一个MVVM实现方法,它不同于WPF和Silverlight应用程序中的Model-View-Presenter(MVP).在MVP模式中,我们需要一个Presenter把当前语言的定义(或单个的本地化后的文本)传给视图(View),由视图负责UI中文本的显示与更新。考虑到我们在使用WPF,文本的更新可以很容易地通过数据绑定来实现;考虑到语言定义要在整个应用程序(组件或窗体)中使用,我们需要一个共享类来保存当前语言属性,这样当进行数据绑定时,就能使该属性在UI的任何一部分检索出来。

在MVVM模式中,这个共享类同其他视图模型(例如MainWindowViewModel)一道,将成为组成视图模型层的一部分。CommonViewModel这个类是作为单例模式(Singleton)来实现,这样静态实例属性Current就可以作为一个绑定的源属性来赋值了。非静态属性则通过绑定的Path属性来引用。还有一点很重要,ViewModel实现了INotifyPropertyChanged的接口,以致UI能在源数值发生改变时自动更新绑定。

这里是绑定到UI的CommonViewModel属性,UILanguageDefn类给出了数据的定义:

01/// <summary>
02/// Gets or sets the language definition used by the entire interface.
03/// </summary>
04/// <value>The language definition.</value>
05public UILanguageDefn LanguageDefn
06{
07    get { return _languageDefn; }
08    set
09    {
10        if (_languageDefn != value)
11        {
12            _languageDefn = value;
13            OnPropertyChanged("LanguageDefn");
14            OnPropertyChanged("HeadingFontSize");
15            OnPropertyChanged("MinFontSize");
16            OnPropertyChanged("IsRightToLeft");
17        }
18    }
19}
20 
21public double HeadingFontSize
22{
23    get 
24    {
25        if (_languageDefn != null)
26            return (double)_languageDefn.HeadingFontSize;
27 
28        return (double)UILanguageDefn.DefaultHeadingFontSize;
29    }
30}
31 
32public double MinFontSize
33{
34    get
35    {
36        if (_languageDefn != null)
37            return (double)_languageDefn.MinFontSize;
38 
39        return (double)UILanguageDefn.DefaultMinFontSize;
40    }
41}
42 
43public bool IsRightToLeft
44{
45    get
46    {
47        if (_languageDefn != null)
48            return _languageDefn.IsRightToLeft;
49 
50        return false;
51    }
52}

MainWindowViewModel处在ViewModel架构最前端, 负责在MainWindowModel值发生变化时,更新CommonViewModel中的当前语言:

01/// <summary>
02/// Refreshes the UI text to display in the current language.
03/// </summary>
04public void RefreshUILanguage()
05{
06    _model.UpdateLanguageData();
07    CommonViewModel.Current.LanguageDefn = _model.CurrentLanguage;
08 
09    //Notify any other internal logic to prompt a refresh (as necessary)
10    if (LanguageChanged != null)
11        LanguageChanged(thisnew EventArgs());
12}

视图

正如我所提到的,本地化文本通过数据绑定显示到视图中。然而WPF自身并不知道如何处理UILanguageDefn类,更不用说提取合适的本地化文本值。这也是最后一个难题。

值转换器

请记住,CommonViewModel.Current.LanguageDefn是一个UILaunguageDefn,不是TextBlock的Text属性期待的一个字符串。因此,此时需要一个值转换器来完成这项转换工作。这个值转换器使用ConverterParameter来指定创建查找关键字,用来恢复来自UILanguage实例中局部符合条件的文本。记住,当接口改变了,UILanuageDefn也改变。

这项工作的优点在于对每一段局限在接口当中的文本,符合条件的元素需要被添加到language XML文件,确保ConverterParameter和元素名称匹配。此外不需要定义任何额外的属性——不管是在视图层,UILanguageDefn,还是在模型层的其他部分。

这个converter相对简单. 只需在类级别上指定 IValueConverter (在System.Windows.Data中)的 ValueConversion 属性:

1[ValueConversion(typeof(UILanguageDefn), typeof(string))]

并且实现类似如下的函数 Convert :

01public object Convert(object value, Type targetType, 
02                      object parameter, CultureInfo culture)
03{
04    string key = parameter as string;
05    UILanguageDefn defn = value as UILanguageDefn;
06 
07    if (defn == null || key == nullreturn "";
08 
09    return defn.GetTextValue(key);
10}

绑定

现在我们获得了了一个 value converter, 我们可以将它放置在一个 Binding 表达式中:

1<TextBlock Text="{Binding Path=LanguageDefn,
2    Converter={StaticResource UIText}, ConverterParameter=ApplyLabel,
3    Source={x:Static vm:CommonViewModel.Current}}" />

如果想要它工作, 这个 XML 的 命名空间必须设置为 vm(指向 ViewModel的命名空间),并且 UIText 的资源需要被定义 (假设conv 是这个 value converter 的 XML 的命名空间):

1zlt;conv:UITextLookupConverter x:Key="UIText" />

简单明了——自定义标记扩展

如果你当前的状态(像我一样)又想要愉快的方式,在大多数的XAML文件中的长绑定表达式里,你发现它变得乏味,是同一样东西的重复。甚至不考虑重命名类或者把属性作为重构的一部分!

当然,有一种方式能使其更简洁,考虑到这些绑定之间的唯一变化就是ConverterParameter。解决方案是使用使用自定义标记扩展。

为了做到这一点,自定义标记扩展是一个简单的类,它派生自MarkupExtension(在System.Windows.Markup),按照惯例被命名为[name]Extension。在其核心处,关键点是需要重载ProvideValue方法。但是这该怎么做呢?

自定义标记拓展的重点就是在XAML中写下类似这样的代码:

1<TextBlock Text="{ext:LocalisedText Key=ApplyLabel}" />

因此,自定义拓展被称作LocalisedTextExtension,并添加一个Key,它的类型是public string.因为在后台中,绑定一直处于使用状态,所以我创建了一个private 绑定域,并从构造器中实例化它 :

1public LocalisedTextExtension()
2{
3    _lookupBinding = UITextLookupConverter.CreateBinding("");
4}

而静态的CreateBinding方法定义在值转换器(value converter)中:

01public static Binding CreateBinding(string key)
02{
03    Binding languageBinding = new Binding("LanguageDefn")
04    {
05        Source = CommonViewModel.Current,
06        Converter = _sharedConverter,
07        ConverterParameter = key,
08    };
09    return languageBinding;
10}

所以定义好了Binding后,可以通过ConverterParameter参数来获取和设置Key属性的值。这也使得ProvideValue方法可以大展身手:

1public override object ProvideValue(IServiceProvider serviceProvider)
2{
3    return _lookupBinding.ProvideValue(serviceProvider);
4}

而一个Binding是一个MarkupExtension,所以它有自己的可以调用的ProvideValue方法。


Rinse and Repeat - 字体大小与流方向

某些语言的字符集包含十分复杂的图形元素,以致在拉丁文可以辨认的字符大小,用来显示这些语言的时候,变得模糊不清了。你注意到CommonViewModel提供了HeadingFontSize和MinFontSize属性。这就为本地化标题和剩余的本地化文本相应地提供了字体大小。例如日文的字体大小就大于英文。

幸运的是,使用类似下面的这个模式就可以把上述的文字尺寸绑定到共享的样式中,而不需要值转换器:

1<Style TargetType="{x:Type TextBlock}">
2    <Setter Property="FontSize" Value="{Binding Path=MinFontSize,
3            Source={x:Static vm:CommonViewModel.Current}}" />
4    <!-- Remaining setters ... -->
5</Style>

下图显示的是两个同样界面不同语言下的差异:


也有一些语言是从右向左读的,例如阿拉伯语和希伯来语。为了让UI正确的定位到这些语言,反转接口是有意义的,否则会带来一些混淆,如果在使用程序的时候读取的顺序和逻辑的顺序不一致。

幸运的是,WPF有一个方便的属性可以完成反转整个UI的艰苦工作:

FrameworkElement.FlowDirection

是什么让这个功能相当强大,我只需要绑定一个包含在主窗口内的根级别控件,因为这个值是由它下面的每个FrameworkElement的在视觉层次继承。绑定仅仅需要查看CommonViewModelIsRightToLeft属性,转换到(通过其他的值转换器)FlowDirection的枚举值。自定义的标记扩展被创建,遵循以前类似的模板,简化为XAML:

1<Window x:Class="RePaver.UI.MainWindow" ... >
2    <DockPanel FlowDirection="{ext:LocalisedFlowDirection}">
3        <!-- Contents -->
4    </DockPanel>
5</Window>

鉴于到上述功能的强大,这里仍然要考虑一些陷阱和要点:

  • 自定义面板自动反转布局,所以你不需要创建一个IsRevered属性(或者类似的)或者按照你的估算调整ArrangeOverride。

  • 位图和形状(如线路)是反转的。如果您想要保留这些,呈现独立的流向(如公司的logo或者商标),那么你需要重写FlowDirection,设置它为LeftToRight。

  • 如果接口有RightToLeft的FlowDirection,而元素(如Image)具有LeftToRight的FlowDirection,那么元素的Margin会以RightToLeft的方式展示。由于Padding展示在元素内部可视层次,所以一个padding将会以LeftToRight的方式展示。

  • TextBoxes包含语言恒定的数据,应当将FlowDirection设置为LeftToRight。理想情况下,此属性应设置为尽量减少重复并保证一致性的风格。

所以,下面就是赶时髦的“处理后”的截图:

注意路径,旋转选择控件,输入输出文本框是以从左至右的方式展示,这与语言无关。这是因为这些元素是特定的问题区域,如果它们以从右至左的方式展示,就没有道理了(可能会引起误解)。


总结

现在明白了——一个局部的WPF应用程序可以在运行时动态地改变UI。第一次运行它是在法语的本地计算机环境中,瞧, il est affich&eacute; en Fran&ccedil;ais. 它们都来自同一种语言版本。

最后一个要点需要注意,这里不做详细介绍,整个UI布局以流体方式布局,这样的布局会自动调整以适应内容。 而不是显式地设置宽度和高度, 网格的行/列定义,等等。这些都是“自动”为左的,同时还可以定义最小和最大值。这是很普通的实例中极佳的一个(而不是特定的本地化), 但当切换语言的时候,不允许这样的实例真的显示出来。

后记

软件开发中本地化是一个热门的话题,理所当然,我也不是唯一一个写这方面的人。事实上,我也发现了一些人在做同样的事:

  • Sebastian Przybylski (article) 也把UI文本存储在XML文件作为嵌入资源,而把XAML直接绑定到XML资源上而不是通过ViewModel.

  • David Sleeckx (article) 使用自定义标记拓展来检索本地缓存的翻译文本,或者调用Google语言API来实现实时翻译。

  • 'SeriousM' 在CodePlex上更新了 WPF本地化拓展 . 它是通过提取资源文件/资源程序集中的本地化文本(或其他值)来实现的。

显然,实现WPF程序的本地化有很多种选择,它们并不互斥。根据你的权衡,我所提到的实现方法仅适用于你程序的部分,另一部分则会出现在其他的地方。所以你要根据你的需求,随意调整实现方法。




酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部