DEV Community

William Amaya
William Amaya

Posted on

Soporte multilenguaje en WinUI 3

#winui3 #csharp #dotnet

Introducción

El soporte multilenguaje en aplicaciones permite ampliar el alcance a usuarios y clientes de diferentes regiones e idiomas, mejorando la accesibilidad y la experiencia del usuario. En este post, exploraremos cómo implementarlo en aplicaciones de escritorio desarrolladas con WinUI 3.

Configuración del proyecto

Para implementar soporte multilenguaje en una aplicación WinUI 3, el primer paso es configurar la estructura de carpetas y archivos de recursos. Esto permitirá que el sistema cargue los textos adecuados según el idioma del usuario.

Crear la carpeta Strings

Dentro del proyecto, en la raiz crea una carpeta llamada Strings. Esta será el contenedor principal para los recursos.

Strings\
├── en-US\
│   └── Resources.resw
├── es-ES\
│   └── Resources.resw
Enter fullscreen mode Exit fullscreen mode

¿Qué es el archivo Resources.resw y para qué se utiliza?

El archivo Resources.resw es un contenedor de recursos en formato XML que se utiliza en aplicaciones para definir textos y cadenas.

Pero en el contexto de este post, su propósito principal es permitir que la interfaz de usuario muestre contenido en el idioma correspondiente según la configuración regional del sistema o la preferencia del usuario.

Cada entrada se define como un par clave–valor, donde:

  • La clave es un identificador único que se usa en el código.
  • El valor es el texto traducido que se mostrará al usuario.

Ejemplo de entrada en Resources.resw:

<data name="Message" xml:space="preserve">
  <value>Bienvenido</value>
</data>

<data name="Message" xml:space="preserve">
  <value>Welcome</value>
</data>
Enter fullscreen mode Exit fullscreen mode

Implementación

Para establecer el idioma en la aplicación lo debes hacer antes que cargue la ventana principal de la aplicación, esto lo puedes especificar en la clase App.xaml.cs en el metodo OnLaunched.

ApplicationLanguages.PrimaryLanguageOverride = "es-ES";
Enter fullscreen mode Exit fullscreen mode 
/// <summary>
/// Invoked when the application is launched.
/// </summary>
/// <param name="args">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (ApplicationData.Current.LocalSettings.Values.TryGetValue("language", out object? language))
        ApplicationLanguages.PrimaryLanguageOverride = language?.ToString();
    else
        ApplicationLanguages.PrimaryLanguageOverride = "es-ES";
    _window = new MainWindow();
    _window.Activate();
}
Enter fullscreen mode Exit fullscreen mode

Con esto logramos que cuando se ejecute la aplicación el sistema cargue los resources.resw según el idioma seleccionado.

Para que el usuario pueda seleccionar el idioma de su preferencia podemos usar diferentes controles en este caso utilizaremos el control ComboBox

<ComboBox x:Name="LanguageSelector"
          SelectionChanged="LanguageSelector_SelectionChanged"
          PlaceholderText="Select a language"
          Width="200">
    <ComboBoxItem Tag="en-US">English</ComboBoxItem>
    <ComboBoxItem Tag="es-ES">Español</ComboBoxItem>
</ComboBox>
Enter fullscreen mode Exit fullscreen mode

Una vez definimos el control podemos disparar el evento SelectionChanged el cual se ejecuta cada vez que el usuario cambie la opción del control ComboBox.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.Windows.AppLifecycle;
using Windows.ApplicationModel.Resources;
using Windows.Storage;

private void LanguageSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (LanguageSelector.SelectedItem is ComboBoxItem comboBoxItem)
    {
        if (ApplicationData.Current.LocalSettings.Values["language"].ToString() != comboBoxItem.Tag.ToString())
        {
            ApplicationData.Current.LocalSettings.Values["language"] = comboBoxItem.Tag.ToString();
            AppInstance.Restart("");
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

La opción que el usuario seleccione la debemos guardar, puede ser en una base de datos también archivos de recursos por ejemplo un archivo .json o almacenamiento interno del sistema usando LocalSettings del using Windows.Storage.

Para acceder a los valores de los archivos resources.resw podemos realizarlo de la siguiente manera en el code-behind.

using Windows.ApplicationModel.Resources;

public string Message { get; set; } = new ResourceLoader().GetString("Message");
Enter fullscreen mode Exit fullscreen mode

Y desde nuestro frontend podemos acceder usando esa propiedad Message mediante el uso del Bindingde la siguiente manera.

<TextBlock Text="{x:Bind Message}"></TextBlock>
Enter fullscreen mode Exit fullscreen mode

Conclusión

Comparto el resultado final de la implementación del soporte multilenguaje para una aplicación WinUI 3.

Notas y mejoras

  • Se puede implementar usando MVVM.
  • La clase ResourceLoader se puede abstraer creando una clase helper o provider implementando IoC.
  • La aplicación actualmente se debe reiniciar para cargar los archivos de recursos desde el inicio de la ventana pero podrías implementar con archivos .json y propiedades usando la interfaz INotifyPropertyChanged o usando el paquete nuget CommunityToolkit.Mvvm para evitar el reinicio de la aplicación.

Top comments (0)