How do we change the binding property of text block on demand in windows phone 8?

Question

I'm working on windows phone 8 application, which should work in two languages, English and Arabic. The default language is English. Later User can change the language either from English to Arabic or from Arabic to English in Settings page.

When user clicks on "Cities" button in the Home Page, I'm displaying the cities in listbox. By default i'm binding the city to english value i.e. TextBlock x:Name="city" Text="{Binding CityNameEn}". Below is the UI code.

<ListBox x:Name="citiesList" SelectionChanged="citiesList_SelectionChanged">
<ListBox.ItemTemplate>
       <DataTemplate>
             <Grid Height="50" Margin="0,10,0,0">
                   <Grid.RowDefinitions>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="10"/>
                   </Grid.RowDefinitions>

                   <StackPanel x:Name="dataRow" Grid.Row="0" Orientation="Horizontal">
                        <TextBlock x:Name="city" Text="{Binding CityNameEn}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" Width="420"/>
                        <Image x:Name="arrow" Stretch="Fill" Margin="0,0,0,0" Source="Images/arrow.png" Height="20"/>
                   </StackPanel>

                   <Image  x:Name="line" Grid.Row="1" Width="460" HorizontalAlignment="Center" Source="Images/separator.png"  />
              </Grid>
        </DataTemplate>
 </ListBox.ItemTemplate>

I'm setting the list box source like below. private void Cities_Page_Loaded(object sender, RoutedEventArgs e) { citiesList.ItemsSource = Constants.cities; }

Below is the Data Context class of City.

class City
{

public string CityId { get; set; }

public string CityNameAr { get; set; }

public string CityNameEn { get; set; }

public string DisplayOrder { get; set; }

public int FocusedCityIndex { get; set; }

}

Now When the language is English, then all the cities are displaying in English. Because we bind the text block to property CityNameEn which contains english values.

When user changes the language in Settings Page from English to Arabic. Then I implemented the localization like below.

if (selectedItem.Equals("English"))
{
   Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
 Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("en-US");
}
else
{
   Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("ar");
   Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("ar");
}

Now When user clicks on the cities button in Home Page, then all the cities sholud display in Arabic. *Because user changed language from English to Arabic.*

But cities are displaying in English only because textblock binded to the property which contains English value. *So to display the cities in Arabic, I've to change the textblock binding to the property which contains Arabic value.*

How should I change the binding property of text block based on the language change.

Thanks.

Answer 1

You could add a City.CityName getter property in your City class that will return the city name based on the current culture, like this:

class City
{
    public string CityId { get; set; }

    public string CityNameAr { get; set; }

    public string CityNameEn { get; set; }

    public string CityName
    {
        get
        {
            if (Thread.CurrentThread.CurrentCulture.Name == "en-US")
                return this.CityNameEn;
            else
                return this.CityNameAr;
        }
    }

    public string DisplayOrder { get; set; }

    public int FocusedCityIndex { get; set; }
}

Then use that property in your XAML:

<TextBlock x:Name="city" Text="{Binding CityName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" Width="420"/>