Exercise 3 – Multilingual Support

Bi-Directional (BiDi) support is new in Silverlight 4 and allows applications to display controls in both left-to-right flow and in right-to-left (for languages such as Arabic, Persian or Hebrew). Silverlight 4 also supports Bi-Directional input to allows users to input text written from right to left (for example, Hebrew text).

In this exercise we will learn how to use the application's culture to determine the direction of the controls and how we can use culture based resources.

Task 1 –BiDi (Bi-Directional) Support

Silverlight 4 adds support for bi-directional text. In this exercise we will add support for Right-To-Left languages such as Hebrew and Arabic.

1. Close the existing solution in Visual Studio if one is currently open
2. On the File menu click OpenProject/Solution…
3. At the Open Project dialog navigate to the Lab installation folder
4. Navigate to RichTextBox\Source\Ex03\Begin folder
5. Click the RichTextBox.sln file and then click the Open button
6. Open MainPage.xaml and search for a Border control that contains the FlowDirection attribute – a new property which belongs to the FrameworkElement class. The attribute is bound to a property called IsRTL.
7. Open MainPage.xaml.cs and examine the property code:

   C#

   #region Properties public bool IsRTL { get { return (bool)GetValue(IsRTLProperty); } set { SetValue(IsRTLProperty, value); } } // Using a DependencyProperty as the backing store for IsRTL. This enables animation, styling, binding, etc... public static readonly DependencyProperty IsRTLProperty = DependencyProperty.Register("IsRTL", typeof(bool), typeof(MainPage), null);

8. Next, we'll add a ToggleButton that will be responsible for changing the property's value. Open MainPage.xaml and locate the comment <!-- TODO - Display, Highlight, Xaml Buttons-->. Add the following code below the comment:

   XAML

   <ToggleButton x:Name="btnRTL" Checked="btnRTL_Checked" Unchecked="btnRTL_Checked" Grid.Column="4" Margin="15,-22,0,24" HorizontalAlignment="Center" Grid.Row="1"> <ToolTipService.ToolTip> <ToolTip FontSize="16" Content="Text Direction"/> </ToolTipService.ToolTip> <Image Source="Images/ltr.png" Width="30"/> </ToggleButton>

9. Right-click on the Checked event handler name and select Navigate to Event Handler to go to it in MainPage.xaml.cs. Add the following code into the event handler to handle showing different images based upon the value of the IsRTL property:

   C#

   IsRTL = !IsRTL; if (IsRTL) btnRTL.Content = CreateImageFromUri( new Uri("/RichNotepad;component/images/rtl.png", UriKind.RelativeOrAbsolute), 30, 32); else btnRTL.Content = CreateImageFromUri( new Uri("/RichNotepad;component/images/ltr.png", UriKind.RelativeOrAbsolute), 30, 32); ReturnFocus();
10. Compile and run the application by pressing F5. Enter some text and then press the LTR toggle button – The entire RichTextBox control's content is now right aligned – buttons, controls, and grids are all aligned to the right. Now our application is BiDi aware and takes in account the direction of the text and changes to the FlowDirection property.

Task 2 –Culture based UI with Resources

In this task, we'll use 3 cultures – en-US (English), ar-SA (Arabic) and he-IL (Hebrew) and will dynamically change the UI culture of our application according to the user's language setting.

1. The first thing we'll do is decide whether the flow direction of the application should be LTR (left-to-right) or RTL (right-to-left), according to the selected culture. Open MainPage.xaml.cs and observe the following in the constructor:

   C#

   IsRTL = Thread.CurrentThread.CurrentUICulture.Parent.Name.ToLower() == "he" || Thread.CurrentThread.CurrentUICulture.Parent.Name.ToLower() == "ar";

2. In the Solution Explorer, expand the content of the RichTextBox.Web project, right-click the SelectCulture.htm file and select Set As Start Page.
3. Open SelectCulture.htm file in the code editor window. You'll see that the html page contains a ComboBox and a Button – pressing the button makes the browser navigate to the Silverlight page with the selected culture as part of the URL.
4. Open RichTextBoxTestPage.aspx and look at the culture parameter passed to the Silverlight object (bottom of the page). This is how we pass the selected culture from the URL to the Silverlight Control.

5. Compile and run the application by pressing F5. You'll see the following page

   Figure 5

   Language Selection Page in Browser

6. Select English and press the Open Editor Button. The application will open with LTR mode enabled.
7. Run the application again, this time select either Hebrew or Arabic. Notice how the application changes its flow to RTL.