Voy a mostrar como podemos hacer que nuestra aplicación Silverlight este regionalizada. Esta propiedad es muy importante para aquellos que desarrollan aplicaciones que pueden ser utilizadas por personas de diferentes paÃses, ya que puede cambiar no sólo el idioma sino también la forma de mostrar una fecha o un importe.
La idea es la misma que en una aplicación Web, utilizando archivos resx (Resources), la diferencia es que hay pequeños trucos que debemos realizar para que funcione, ya que haciendo los pasos normales nos vamos a encontrar con algunos errores de implementación.
AGREGAR RESOURCES
El primer paso es desde nuestra aplicación Silverlight, agregar un nuevo Ãtem, del tipo Resources File.
Luego, vamos a ir agregando un resource por cada cultura que queremos regionalizar. Para este ejemplo serÃan Page.xaml.resx (por defecto), Page.xaml.fr.resx (para cultura francesa) y Page.xaml.en.resx (para cultura inglesa).
Vamos a agregar un item Texto y otro Imagen, donde vamos a colocar que queremos mostrar según la cultura.
Vamos al primer truco. Si nosotros vamos a acceder a cualquier resource, nos va a tirar error o no va a funcionar. Esto se debe a que por defecto, los resources que agregamos están definidos para uso Interno, y deberÃan estar para uso Público.
Modificamos para cada archivo, el modo de acceso, y lo ponemos en Public.
Además debemos modificar el constructor del resource, y definirlo como public.
Importante: Deben modificar el constructor cada vez que modifiquen un valor del resource, ya que Visual Studio lo vuelve a generar.
CONFIGURAR APLICACIÓN
Otro truco, que debemos realizar antes de seguir con la implementación, es definir en la aplicación que culturas vamos a aceptar. Para ello debemos abrir con Notepad el archivo de proyecto nuestra aplicación y modificar el tag SupportedCultures y agregar las culturas que vamos a aceptar.
ENLACE DE DATOS
Vamos a referenciar a los resources dentro de nuestra aplicación.
En Page.xaml, primero vamos a referenciar a la clase.
|
1 |
xmlns:Res="clr-namespace:LocalizationApp.Resources" |
Ahora agregamos el control resource para poder utilizarlo con los controles de nuestra aplicación.
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">UserControl.Resources</span><span style="color: rgb(0,0,255)">></span> |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">Res:Page_xaml</span> <span style="color: rgb(255,0,0)">x:Name</span><span style="color: rgb(0,0,255)">="PageResource"</span> <span style="color: rgb(0,0,255)">/></span> |
|
1 |
<span style="color: rgb(0,0,255)"></</span><span style="color: rgb(128,0,0)">UserControl.Resources</span><span style="color: rgb(0,0,255)">></span> |
Ahora vamos a agregar controles para mostrar texto, la bandera de la cultura que estamos visualizando y un combo para cambiar de cultura en lÃnea.
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">StackPanel</span> <span style="color: rgb(255,0,0)">Orientation</span><span style="color: rgb(0,0,255)">="Vertical"</span><span style="color: rgb(0,0,255)">></span> |
|
1 |
  |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">TextBlock</span> <span style="color: rgb(255,0,0)">x:Name</span><span style="color: rgb(0,0,255)">="textCultura"</span> |
|
1 |
<span style="color: rgb(255,0,0)">Text</span><span style="color: rgb(0,0,255)">="{Binding Texto}"</span> |
|
1 |
<span style="color: rgb(255,0,0)">Width</span><span style="color: rgb(0,0,255)">="100"</span> <span style="color: rgb(0,0,255)">/></span> |
|
1 |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">Image</span> <span style="color: rgb(255,0,0)">x:Name</span><span style="color: rgb(0,0,255)">="imagenCultura"</span> <span style="color: rgb(255,0,0)">Width</span><span style="color: rgb(0,0,255)">="16"</span> <span style="color: rgb(255,0,0)">Height</span><span style="color: rgb(0,0,255)">="11"</span> <span style="color: rgb(0,0,255)">/></span> |
|
1 |
  |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">ComboBox</span> <span style="color: rgb(255,0,0)">x:Name</span><span style="color: rgb(0,0,255)">="comboCultura"</span> |
|
1 |
<span style="color: rgb(255,0,0)">Width</span><span style="color: rgb(0,0,255)">="120"</span> <span style="color: rgb(255,0,0)">Margin</span><span style="color: rgb(0,0,255)">="1"</span> |
|
1 |
<span style="color: rgb(255,0,0)">SelectionChanged</span><span style="color: rgb(0,0,255)">="comboCultura_SelectionChanged"</span><span style="color: rgb(0,0,255)">></span> |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">ComboBoxItem</span> <span style="color: rgb(255,0,0)">Tag</span><span style="color: rgb(0,0,255)">="es"</span> <span style="color: rgb(255,0,0)">Content</span><span style="color: rgb(0,0,255)">="Español"</span> <span style="color: rgb(0,0,255)">/></span> |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">ComboBoxItem</span> <span style="color: rgb(255,0,0)">Tag</span><span style="color: rgb(0,0,255)">="en"</span> <span style="color: rgb(255,0,0)">Content</span><span style="color: rgb(0,0,255)">="Inglés"</span> <span style="color: rgb(0,0,255)">/></span> |
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">ComboBoxItem</span> <span style="color: rgb(255,0,0)">Tag</span><span style="color: rgb(0,0,255)">="fr"</span> <span style="color: rgb(255,0,0)">Content</span><span style="color: rgb(0,0,255)">="Francés"</span> <span style="color: rgb(0,0,255)">/></span> |
|
1 |
<span style="color: rgb(0,0,255)"></</span><span style="color: rgb(128,0,0)">ComboBox</span><span style="color: rgb(0,0,255)">></span> |
|
1 |
|
1 |
<span style="color: rgb(0,0,255)"></</span><span style="color: rgb(128,0,0)">StackPanel</span><span style="color: rgb(0,0,255)">></span> |
Vemos que al TextBlock lo estamos enlazando con la propiedad Texto del resource, por lo que al entrar a la aplicación va a buscar según la cultura que tenga, el valor correspondiente.
Vamos al code-behind.
|
1 |
<span style="color: rgb(0,0,255)">private</span> <span style="color: rgb(0,0,255)">void</span> UserControl_Loaded(<span style="color: rgb(0,0,255)">object</span> sender, RoutedEventArgs e) |
|
1 |
{ |
|
1 |
System.Globalization.CultureInfo cultureInfo = |
|
1 |
System.Globalization.CultureInfo.CurrentUICulture; |
|
1 |
<span style="color: rgb(0,0,255)">string</span> cultureName = cultureInfo.Name.ToLower(); |
|
1 |
|
1 |
<span style="color: rgb(0,0,255)">foreach</span> (ComboBoxItem item <span style="color: rgb(0,0,255)">in</span> comboCultura.Items) |
|
1 |
{ |
|
1 |
<span style="color: rgb(0,0,255)">string</span> tag = item.Tag.ToString(); |
|
1 |
<span style="color: rgb(0,0,255)">if</span> (cultureName.Equals(item.Tag)) |
|
1 |
comboCultura.SelectedItem = item; |
|
1 |
} |
|
1 |
<span style="color: rgb(0,0,255)">if</span> (comboCultura.SelectedIndex < 0) |
|
1 |
comboCultura.SelectedIndex = 0; |
|
1 |
  |
|
1 |
CulturaUpdate(); |
|
1 |
} |
Desde el load de la aplicación, vamos a asignarle el valor al combo de culturas, además vamos a actualizar por código la imágen según el valor del resource.
|
1 |
<span style="color: rgb(0,0,255)">private</span> <span style="color: rgb(0,0,255)">void</span> CulturaUpdate() |
|
1 |
{ |
|
1 |
<span style="color: rgb(0,0,255)">this</span>.DataContext = <span style="color: rgb(0,0,255)">new</span> Page_xaml(); |
|
1 |
  |
|
1 |
<span style="color: rgb(0,0,255)">string</span> bandera = Page_xaml.Imagen; |
|
1 |
  |
|
1 |
Uri uriImage = |
|
1 |
<span style="color: rgb(0,0,255)">new</span> Uri(<span style="color: rgb(0,0,255)">string</span>.Format(<span style="color: rgb(0,96,128)">"imagenes/{0}"</span>, bandera), UriKind.Relative); |
|
1 |
Stream objImageStream = Application.GetResourceStream(uriImage).Stream; |
|
1 |
BitmapImage objBI = <span style="color: rgb(0,0,255)">new</span> BitmapImage(); |
|
1 |
objBI.SetSource(objImageStream); |
|
1 |
imagenCultura.Source = objBI; |
|
1 |
} |
Esta es la función que actualiza la imágen, buscando en el resource el valor correspondiente.
ACTUALIZAR CULTURA DESDE CÓDIGO
|
1 |
<span style="color: rgb(0,0,255)">private</span> <span style="color: rgb(0,0,255)">void</span> comboCultura_SelectionChanged(<span style="color: rgb(0,0,255)">object</span> sender, |
|
1 |
SelectionChangedEventArgs e) |
|
1 |
{ |
|
1 |
<span style="color: rgb(0,0,255)">if</span> (comboCultura != <span style="color: rgb(0,0,255)">null</span>) |
|
1 |
{ |
|
1 |
<span style="color: rgb(0,0,255)">if</span> (0 <= comboCultura.SelectedIndex) |
|
1 |
{ |
|
1 |
ComboBoxItem item = comboCultura.SelectedItem <span style="color: rgb(0,0,255)">as</span> ComboBoxItem; |
|
1 |
System.Threading.Thread.CurrentThread.CurrentUICulture = |
|
1 |
<span style="color: rgb(0,0,255)">new</span> System.Globalization.CultureInfo(item.Tag.ToString()); |
|
1 |
CulturaUpdate(); |
|
1 |
} |
|
1 |
} |
|
1 |
} |
|
1 |
  |
Ahora la función que permite cambiar la regionalización. Vemos que debemos crear un nuevo CultureInfo según el valor seleccionado.
PARAMETRO DE CULTURA EN OBJETO SILVERLIGHT
Ahora vamos a ver de que manera podemos llamar a nuestra aplicación con la cultura que nosotros queramos.
|
1 |
<span style="color: rgb(0,0,255)"><</span><span style="color: rgb(128,0,0)">param</span> <span style="color: rgb(255,0,0)">name</span><span style="color: rgb(0,0,255)">="UICulture"</span> <span style="color: rgb(255,0,0)">value</span><span style="color: rgb(0,0,255)">="fr"</span> <span style="color: rgb(0,0,255)">/></span> |
Al crear el objeto Silverlight, podemos pasarle un parámetro para saber que cultura vamos a querer, en lugar de la que pusimos por defecto.
De esta manera regionalizamos nuestra aplicación, permitiendo tener soporte para varias culturas.
Pueden descarga el ejemplo de la aplicación aquÃ.