Question

I have a small WPF application that I am working on localizing. I have read thru a number of documents but I have not found a good source of information about dealing with ‘rich’ content – for example:

I have a ui element (TextBlock) that contains a mix of text with formatting, inline images and symbols. I want to localize this element. I believe to localize this element in a way that is natural in another language that the position of the formulas/symbols will need to shift in relation to the surrounding text – and that the best formatting for the text may be slightly different in other languages as well.

I am looking for suggestions, resources and/or approaches for localizing ‘rich’ content (content that mixes text, formatting and inline ui elements) in XAML/WPF. Given the emphasis on composition and ‘rich’ UI in WPF I was surprised not to find any information on the scenario above – what am I missing?

I have thought about storing XAML in the resource file and then parsing it at runtime for inclusion in the UI and about creating a view/usercontrol that is swapped out based on locale – but I am not seeing any mention of these approaches (which makes me wonder if I am on the ‘wrong track’) and am hoping someone has experience or information to share?

Thanks!

Answer 1

The StaticResource markup extension works very well for what you are trying to accomplish. You can include almost anything using a StaticResource, even when a DynamicResource doesn’t work:

<Window ...>
  <Window.Resources>

    <Span x:Key="Whatever">
      <Bold>Hello</Bold> there<LineBreak/>
      A green circle:
      <InlineUIContainer>
        <Ellipse Width="10" Height="10" Fill="Green" />
      </InlineUIContainer>
    </Inline>

  </Window.Resources>

  ...
  <TextBlock>
    <StaticResource ResourceKey="Whatever" />
  </TextBlock>

Now localizing this is easy:

1. Move the Span resource into a separate ResourceDictionary and merge into your Application’s resource dictionary.
2. During application startup and before any windows are created, use code to get the current culture and add an additional language-specific ResourceDictionary to application.Resources.MergedDictionaries. The satellite dictionary can be loaded using WPF’s built-in localization mechanism.

As long as the dictionares are merged into the application dictionary in the correct order, any named resource that is found in the localized dictioary will take precendence over the one in the main dictionary, for example your Spanish localization dll could have a xaml file containing this:

<ResourceDictionary>
  <Span x:Key="Whatever">
    El círculo rojo
      <InlineUIContainer>
        <Ellipse Width="10" Height="10" Fill="Red" />
      </InlineUIContainer>
    dice <Bold>hola!</Bold>
  </Span>
</ResourceDictionary>

Note that the message is similar, but for Spanish the circle is red and the layout of the text is different.

You can take this much further with ControlTemplates if you want to. Using ControlTemplates will allow you to do such things as have buttons laid out in a different order depending on the locale. For example if your generic dictionary contains:

<ResourceDictionary>
  <ControlTempate x:Key="Something" TargetType="ContentControl">
    <StackPanel>
      <TextBlock Text="In English we want the text above the button" />
      <ContentPresenter />
    </StackPanel>
  </ControlTemplate>
</ResourceDictionary>

You can add this to your window or user control:

<ContentControl Template="{StaticResource Something}">
  <Button Command="Save">Save File</Button>
</ContentControl>

And then you change the layout for another language, for example:

<ResourceDictionary>
  <ControlTempate x:Key="Something" TargetType="ContentControl">
    <DockPanel>
      <ContentPresenter DockPanel.Dock="Left" />
      <TextBlock Text="En español en el botón a la izquierda del texto" />
        <!-- In spanish the button is to the left of the text -->
    </DockPanel>
  </ControlTemplate>
</ResourceDictionary>

Note: If you only use localization in DependencyProperties (eg no InlineCollections, etc) you can get away with using {DynamicResource} which allows the locale to change at any time with an instant update of the UI. To do this with my first example, instead of including a <Span> in the ResourceDictionary and including it inside a TextBlock, you can put the TextBlock in a ControlTemplate inside the ResourceDictionary.

This is only the beginning of the flexibility of localization with WPF. You can go much further.