Windows Phone 7 Development : Internationalization - Storing and Retrieving Current Culture Settings

On Windows Phone 7, the System.Globalization.CultureInfo class contains all of the necessary information about the phone's current culture settings. In this section, we will write code to retrieve basic properties of the CultureInfo class, as well as code to change the current culture of the phone and to react to those changes. In real-world applications, we are not likely to adjust the current culture in code, since the culture setting should be fully controlled by the user.

In the following walkthrough, you will create a simple announcement of an upcoming event, and then, with a click of a button, adjust culture settings to properly display the date, time, and the cost of the event in a different region of the world—Spain. To accomplish that, you will instantiate a new CultureInfo class and set the current thread's CurrentCulture property to this new class.

NOTE

You are probably wondering by now where and how the Windows Phone 7 culture is set. On both the phone and the emulator, the culture is adjusted in Settings => Region and Language. Region and Language Settings can be accessed by clicking the small arrow to the right of the tiles on the phone screen (it is right next to the Internet Explorer tile in the emulator). Click on Region Format, and select an international format from the list that you'd like. Notice how both Short and Long Date properties, as well as the First Day of the Week property, adjust to the new format specific to the locale selected. Figure 1 illustrates how you can adjust Regional Settings on your phone.

Figure 1. Changing the phone's regional settings

1. Start by creating a Visual Studio project and naming it "WP7LaunchParty."

2. Double-click MainPage.xaml in Solution Explorer to bring up the XAML designer window.

For this first walkthrough, you will display the contents of just two fields on the screen: the name of the event as well as the event's date and time.

3. Let's go ahead and remove one of two default textblocks automatically added to the design surface by Visual Studio. Highlight the textblock with "MY APPLICATION" text in it (either in XAML or on the design surface) and hit the Delete key.

4. Now let's add the additional six text box controls that you need. If the toolbox is not visible, either click the Toolbox button on the Visual Studio Application Bar or select View => Other Windows => Toolbox. Drag six textblocks to the design surface and position them two per row, one underneath each other, as shown in Figure 2.

5. Change the text of the three textblocks on the left to the following: "Event Date," "Event Time," and "Event Cost," as shown in Figure 2.

6. Click on each textblock in the right column, press F4, and change the textblock names to "txtEventDate," "txtEventTime," and "txtEventCost" correspondingly.

7. Finally, add a button to the design surface and change its content to "Español."

You should now end up with XAML code that matches the XAML shown in Listing 1 .

Listing 1. WP7 Launch Party UI Code (XAML)

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitleGrid is the name of the application and page title--> <Grid x:Name="TitleGrid" Grid.Row="0"> <TextBlock Text="WP7 Launch" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextTitle1Style}"/> </Grid> <!--ContentGrid is empty. Place new content here--> <Grid x:Name="ContentGrid" Grid.Row="1"> <TextBlock Height="44" HorizontalAlignment="Left" Margin="204,48,0,0" Name="txtEventDate" Text="TextBlock" VerticalAlignment="Top" Width="276" /> <TextBlock Height="43" HorizontalAlignment="Left" Margin="5,49,0,0" Name="textBlock1" Text="Event Date:" VerticalAlignment="Top" Width="193" /> <TextBlock Height="44" HorizontalAlignment="Left" Margin="204,98,0,0" Name="txtEventTime" Text="TextBlock" VerticalAlignment="Top" Width="276" /> <TextBlock Height="43" HorizontalAlignment="Left" Margin="5,99,0,0" Name="textBlock3" Text="Event Time:" VerticalAlignment="Top" Width="193" /> <TextBlock Height="44" HorizontalAlignment="Left" Margin="205,146,0,0" Name="txtEventCost" Text="TextBlock" VerticalAlignment="Top" Width="276" /> <TextBlock Height="43" HorizontalAlignment="Left" Margin="6,147,0,0" Name="textBlock4" Text="Event Cost:" VerticalAlignment="Top" Width="193" /> <Button Content="Español" Height="70" HorizontalAlignment="Left" Margin="6,233,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" /> </Grid> </Grid>

8. Double-click MainPage.xaml.cs to bring up the code view. Alternately, you can right-click the MainPage.xaml file and select "View Code."

9. Add the following statements to the very top of the page (right below the last using statement):

   using System.Globalization;
   using System.Threading;

   
   

10. Next, we will code the function that will populate event details and the function that toggles event locale. Add the code shown in Listing 2.

    Listing 2. ShowEventDetails and ToggleEventLocale functions (C#)

    private void ShowEventDetails() { textBlockListTitle.Text = "WP7 Launch"; //create the date of November 6, 2010 at 9:00 PM DateTime dtLaunchDate = new DateTime(2010, 11, 6, 21, 0, 0); //make the cost equal to $5 decimal decEventCost = 5.0M; //ToString() can also return values in specified culture //txtEventDate.Text = dtLaunchDate.ToString("D"); txtEventDate.Text = dtLaunchDate.ToString("D", Thread.CurrentThread.CurrentCulture); txtEventTime.Text = dtLaunchDate.ToString("T"); txtEventCost.Text = decEventCost.ToString("C"); } private void ToggleEventLocale() { //default to English-US culture String cul = "en-US"; if (button1.Content.ToString() == "Español") { //change the culture to Spanish cul = "es-ES"; } else { cul = "en-US"; } CultureInfo newCulture = new CultureInfo(cul); Thread.CurrentThread.CurrentCulture = newCulture; ShowEventDetails(); }

Now you will call a function to show event details right after the application loads.

1. Paste the call to the ShowEventDetails() function in the MainPage() constructor to show event details in English when the application is launched:

ShowEventDetails();

Finally, you need to add an event handler to handle the button click, which will toggle the current culture between English and Spanish. The best way to add it is to bring up MainPage.xaml in design view and double-click the button.

11. Add the following code:

    private void button1_Click(object sender, RoutedEventArgs e)
            {
                ToggleEventLocale();
            }

    
    

    Figure 2. Design surface of the WP7LaunchSample application

    

12. Press F5 to run the application. Notice how the date, time, and cost are all shown in the familiar American format. If you press the "Español" button, you will see the date in Spanish, time in the 24-hour format, and the cost in euros. The labels with "Date," "Time," and "Cost" did not change, however, since we have not provided any localization provisions in our code for those.

In the preceding walkthrough, there are a couple of interesting points that are worth discussing in a bit more detail. The first one is how we switched from one culture to another in code. To accomplish that, we instantiated a new CultureInfo class and set the current thread's CurrentCulture property to this new class. During the instantiation of the CultureInfo class, we passed a string to its constructor representing a specific culture ("es-ES" for Spanish and "en-US" for American English). The second important point is the illustration of the use of standard formatting constructs in our code to make internationalizing our application easier. For example, let's put the following line of code at the end of the ShowEventDetails() function:

txtEventDate.Text = dtLaunchDate.ToString("MM/dd/yyyy");

Now when you run the application, notice how the date will be displayed as "11/06/2010" for both Spanish and English versions of our event. This certainly is confusing for residents of Spain, who would think that the Windows Phone 7 launch date is actually on June 11, 2010. Remember to use standard formatting options for all UI elements—in the case of the date, the standard formatting we have used with the following line of code to show the "long date representation" is certainly more appropriate:

txtEventDate.Text = dtLaunchDate.ToString("D");

The third and final important point in the foregoing walkthrough is the ease of switching specific cultures on Windows Phone 7. If we pass "es-MX" instead of "es-ES" into the CultureInfo() constructor in the ToggleEventLocale() function, we can still see the date translated into the Spanish language, but thecurrency and time are formatted according to the Mexican standard and not the standard of Spain.