Displaying Localized Text and Images Within the LocalizabilityView Page
,The view’s XAML file is entirely absent of literal strings. The BindableResources instance is used to retrieve all localized resource strings (see Listing 19.4).
A ListBox is bound to the viewmodel’s SupportedCultures property. Selecting a value causes the current thread’s CurrentCulture and CurrentUICulture to be set to a new CultureInfo instance. The BindableResources.RaisePropertyChanged method is then called to trigger an update of the UI. The NativeName property of the CultureInfo class displays the culture name’s endonym.
The flag image is also bound to the BindableResources. The binding uses the BitmapImageConverter, which was presented earlier in this chapter, to transform the localized image bytes into a BitmapImage.
LISTING 19.4. LocalizabilityResxView.xaml (excerpt)
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock x:Name="ApplicationName"
Text="{Binding Resources.Instance.ApplicationTitle,
Source={StaticResource BindableResources}}"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="ListName"
Text="{Binding Resources.Instance.LocalizabilityResx,
Source={StaticResource BindableResources}}"
Style="{StaticResource PhoneTextTitle1Style}"
Margin="0,5,0,0"/>
</Grid>
<StackPanel Grid.Row="1" Margin="20">
<ListBox ItemsSource="{Binding SupportedCultures}"
SelectedItem="{Binding CurrentCulture, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=NativeName}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- Flag and greeting. -->
<StackPanel Orientation="Horizontal">
<Image Width="100" Height="100"
Source="{Binding Resources.Instance.Flag,
Source={StaticResource BindableResources},
Converter={StaticResource BitmapImageConverter}}"
Margin="5,5,20,5"/>
<TextBlock Text="{Binding Resources.Instance.Greeting,
Source={StaticResource BindableResources}}"
Style="{StaticResource PhoneTextLargeStyle}"
VerticalAlignment="Center" Width="122" />
</StackPanel>
<!-- Culture details. -->
<StackPanel>
<TextBlock
Text="{Binding Resources.Instance.Localizability_DisplayLanguage,
Source={StaticResource BindableResources}}"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding DisplayLanguage}"
Style="{StaticResource PaddedTextStyle}" />
<TextBlock
Text="{Binding Source={StaticResource BindableResources},
Path=Resources.Instance.Localizability_RegionalFormat}"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding RegionalFormat}"
Style="{StaticResource PaddedTextStyle}" />
<TextBlock
Text="{Binding Source={StaticResource BindableResources},
Path=Resources.Instance.Localizability_DateFormatLong}"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding DateFormatLong}"
Style="{StaticResource PaddedTextStyle}" />
<TextBlock
Text="{Binding Source={StaticResource BindableResources},
Path=Resources.Instance.Localizability_DateFormatShort}"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding DateFormatShort}"
Style="{StaticResource PaddedTextStyle}" />
<TextBlock
Text="{Binding Source={StaticResource BindableResources},
Path=Resources.Instance.Localizability_TimeFormatLong}"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding TimeFormat}"
Style="{StaticResource PaddedTextStyle}" Grid.Row="4" />
<TextBlock
Text="{Binding Source={StaticResource BindableResources},
Path=Resources.Instance.Localizability_CurrencyFormat}"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock Text="{Binding CurrencyFormat}"
Style="{StaticResource PaddedTextStyle}" />
</StackPanel>
<TextBlock Text="{Binding Message}"
Foreground=" {StaticResource PhoneAccentBrush}"
Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
</Grid>
When a new culture is selected by the user, the flag and various string fields are updated, as shown in Figure 19.6.
Consider in advance that translated strings may end up being longer or shorter in length than your intended design allows. Be generous when allocating space for text, and allow for as much as a 50% increase in length when the text is localized.
Data-binding expressions for localizable properties may be edited manually within Visual Studio’s XAML editor or in the design view by selecting the property in the Properties pane (see Figure 19.7).
Selecting the property in the property pane allows the data-binding expression’s Source property to be set using the floating window. In Figure 19.8 you see that the binding’s Source property is set to the resource with name BindableResources, which is defined at the application resources level within the App.xaml file.
Similarly, the data-binding’s Path property can be set by expanding the Path tab in the floating window. Figure 19.9 shows that the Text property is bound to the Greeting string property.
