cmiles – blog

Recently I had the opportunity to explore setting up a small WPF application for globalization/localization. I had no previous experience with this process, so I started by doing some searching and reading. I thought the links below were particularly interesting:

WPF Localization Guidance – Included in this project is The WPF Localization Guidance PDF by Rick Strahl and Michele Leroux Bustamante – I highly recommend reading this! Great details, several approaches are examined.

Creating an Internationalized Wizard in WPF by Josh Smith, Karl Shifflett. Very nice walk thru of building an Internationalized Wizard style app with resource files. This is a very approachable place to start.

WPF Multi-Lingual at Runtime by Andrew Wood – A XmlDataProvider based solution.

Localizing WPF Applications using Locbaml by brunzefb – This link is notable for its comparison of several different approaches.

WPF Localization by Sacha Barber – Interesting because of the third method shown in the article that uses ResourceDictionaries. For more information on using Resource Dictionaries see the answer to this question on Stack Overflow by  Ray Burns.

One interesting thing about many of the approaches above is that the focus seems to on localizing strings/text, and to a lesser degree settings, images and other resources. In the context of WPF I was surprised not to find more information about customizing the layout of the UI as part of the translation into another language. I think the structure of XAML encourages a UI composed of many elements that will need more than string substitution to be ideal in another language.

For example, the XAML below and UI it generates seems typical of the kind of composition and ‘richness’ encouraged by WPF/XAML’s structure and tools:

<UserControl
		xml:lang="en"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="basic_styles.xaml" />
                <ResourceDictionary Source="equations.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

	<WrapPanel Style="{StaticResource description_wrap_panel_style}">

		<TextBlock	x:Name="c_textblock"
					Style="{StaticResource description_textblock_style}"
					AutomationProperties.Name = "Enter a Constant, C, that satisfies the following equation: the standard error of the estimate is equal to the constant C over the square root of the sample size">
			Enter a constant, <Italic>C</Italic>, that satisfies
    	<InlineUIContainer Style='{StaticResource image_container_style}'>
    		<Image x:Name='formula_11'
					Source='{StaticResource equation_11}'
					Style='{StaticResource image_style}'>
                <Image.Height>
                    <MultiBinding Converter='{StaticResource image_size}'>
                        <Binding Mode='OneWay'
								ElementName='formula_11'
								Path='Tag'/>
                        <Binding Mode='OneWay'
								ElementName='c_textblock'
								Path='FontSize'/>
                    </MultiBinding>
                </Image.Height>
            </Image>
    	</InlineUIContainer>
	    </TextBlock>

		<TextBlock 	Style="{StaticResource description_textblock_style}"
					KeyboardNavigation.TabIndex="1">
			(<Hyperlink AutomationProperties.Name='More information about the constant C' x:Name='c_hyperlink'>more info</Hyperlink>)
		</TextBlock>

		<TextBox 	Style="{StaticResource entry_textbox_style}"
					AutomationProperties.LabeledBy="{Binding ElementName=c_textblock}"
					KeyboardNavigation.TabIndex="0">
		</TextBox>

	</WrapPanel>
</UserControl>

Certainly changing out all of the strings to translate this example is possible (slightly painful because of the number of string to change out…). In French or Spanish this would work fine:

However, here is the same UI translated into Japanese – notice that the translator did not keep the elements in the same position.

To accommodate a flexible layout in this application I decided to use T4 templates to generate ‘loose’ XAML files. These files are included in the output and parsed at runtime based on the CurrentCulture.

The code below is the contents of the file base_block.tt – this t4 template holds the common elements of the XAML files and will be ‘imported’ by the language specific t4 templates. The language specific templates will provide values for the variables introduced in base_block.tt. One important detail is the use of encoding="Unicode" – I assumed “Utf-8” would work but the XamlParser would error on some characters when the template specified Utf-8, apparently because of the BOM setting…

<#@ template debug="false" hostspecific="false" language="C#" #>
<#@ output extension=".xaml" encoding="Unicode"#>

<UserControl
		xml:lang="<#= this.xml_lang #>"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="basic_styles.xaml" />
                <ResourceDictionary Source="equations.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

	<WrapPanel Style="{StaticResource description_wrap_panel_style}">

		<TextBlock	x:Name="c_textblock"
					Style="{StaticResource description_textblock_style}"
					AutomationProperties.Name = "<#= this.textblock_automation_name #>">
			<#= this.textblock_constant_C_contents #>
	    </TextBlock>

		<TextBlock 	Style="{StaticResource description_textblock_style}"
					KeyboardNavigation.TabIndex="1">
			<#= this.hyperlink_textblock_contents #>
		</TextBlock>

		<TextBox 	Style="{StaticResource entry_textbox_style}"
					AutomationProperties.LabeledBy="{Binding ElementName=c_textblock}"
					KeyboardNavigation.TabIndex="0">
		</TextBox>

	</WrapPanel>
</UserControl>

<#+

	private string xml_lang = @"";
	private string textblock_constant_C_contents = @"";
	private string textblock_automation_name = @"";
	private string hyperlink_textblock_contents = @"";

#>

Note that the variables hold all of the information that I wanted to be able to manipulate – not just the string portions of the UI. The file for English, en.tt:

<# 
	
	xml_lang = @"en";

	textblock_constant_C_contents = 
		@"Enter a constant, <Italic>C</Italic>, that satisfies
    	<InlineUIContainer Style='{StaticResource image_container_style}'>
    		<Image x:Name='formula_11' 
					Source='{StaticResource equation_11}' 
					Style='{StaticResource image_style}'>
                <Image.Height>
                    <MultiBinding Converter='{StaticResource image_size}'>
                        <Binding Mode='OneWay' 
								ElementName='formula_11' 
								Path='Tag'/>                        
                        <Binding Mode='OneWay' 
								ElementName='c_textblock' 
								Path='FontSize'/>
                    </MultiBinding>
                </Image.Height>
            </Image>
    	</InlineUIContainer>";

	textblock_automation_name = @"Enter a Constant, C, that satisfies the following equation: the standard error of the estimate is equal to the constant C over the square root of the sample size";

	hyperlink_textblock_contents = @"(<Hyperlink AutomationProperties.Name='More information about the constant C' x:Name='c_hyperlink'>more info</Hyperlink>)";

#>

<#@ include file="base_block.tt" #>

The file for the Spanish version:

    <#
	
        xml_lang = @"es";

        textblock_constant_C_contents =
            @"Ingrese una constante, <Italic>C</Italic>, para resolver
            <InlineUIContainer Style='{StaticResource image_container_style}'>
                <Image x:Name='formula_11'
                        Source='{StaticResource equation_11}'
                        Style='{StaticResource image_style}'>
                    <Image.Height>
                        <MultiBinding Converter='{StaticResource image_size}'>
                            <Binding Mode='OneWay'
                                    ElementName='formula_11'
                                    Path='Tag'/>
                            <Binding Mode='OneWay'
                                    ElementName='c_textblock'
                                    Path='FontSize'/>
                        </MultiBinding>
                    </Image.Height>
                </Image>
            </InlineUIContainer>";

        textblock_automation_name = @"Ingrese una constante, C, que satisface la siguiente ecuación: el error estándar de la estimación es igual a la constante C sobre la raíz cuadrada del tamaño de la muestra.";

        hyperlink_textblock_contents = @"(<Hyperlink AutomationProperties.Name='Más información acerca de la constante C'>más información</Hyperlink>)";

    #>

    <#@ include file="base_block.tt" #>

Each of the XAML files has a Build Action of ‘Content’ so that it is included in the output for the project.  At runtime I look at the CurrentCulture, compare that to the names of the generated XAML files that are available, feed the file to XamlReader.Load() and add the resulting UserControl into the UI as needed. A small sample app demonstrating this is a available here.

I do not have enough experience with globalization/localization to be confident this approach would work in all situations, but for this application it did work and I enjoyed that it: easily allows flexible UI layout, generated XAML files that could be viewed in the VS editor and is simple to use. I seems to me that the biggest downsides to this approach are that it does not allow translators to work on a simple value pair style file and the loose XAML does not allow for a code-behind (which is usually fine but occasionally awkward – at least for me). I would love to hear any comments or feedback on this approach!

Special thanks to Lance and Kent for translating for me!! And extra thanks to Lance for pointing out how to cleanly post source code on WordPress.com

Enjoy!

CM

Filed under: .net, .net, globalization, localization, t4, WPF, XAML