Localize UI Elements

• Feb 20, 2023
• 3 minutes to read

This lesson explains how to localize an XAF application. It describes how to translate UI elements into German and create a multi-language application.

Note

For more information on localization, review the following topics:

• How to: Localize an XAF .NET 6+ Application
• Localization Basics

Step-by-Step Instructions

1. Add the following packages to the MySolution.Blazor.Server and MySolution.Win projects:

   Project name	Package name
   MySolution.Blazor.Server	DevExpress.ExpressApp.de DevExpress.ExpressApp.Blazor.de
   MySolution.Win	DevExpress.ExpressApp.de DevExpress.ExpressApp.Win.de

   The packages are available only for the following languages: German (de), Spanish (es), and Japanese (ja). For other languages, use the Localization Service to download satellite assemblies. See the Localize Standard XAF Modules and DevExpress Controls Used in an Application topic for more information on how to use this service to localize XAF modules.

2. In the MySolution.Blazor.Server project, open the appsettings.json file. Add the German language to the DevExpress:ExpressApp:Languages section and enable the runtime language switcher. You should always use the fully qualified language name that includes the country code (for example, de-DE instead of de):

   appsettings.json

   { 
       // ... 
       "DevExpress": { 
           "ExpressApp": { 
               "Languages": "en-US;de-DE",
               "ShowLanguageSwitcher": true,  
                // ...
           } 
       } 
   }  
   

   See the Current Culture in XAF ASP.NET Core Blazor Applications help section for more information on how an XAF ASP.NET Core Blazor application determines the default language.

3. Open the Model.DesignedDiffs.xafml file in the Model Editor. Focus the MySolution node and click Languages Manager… in the Language combo box on the Model Editor Toolbar.

   

4. Add the target language in the invoked dialog and click OK.

   

   Save the model changes but don’t restart Visual Studio as the Languages Manager suggests. When you restart Visual Studio, the Model Editor loads the localized property value from the assemblies that you added previously and they become available at design time. For the purposes of this tutorial, these values aren’t necessary.

5. In the Solution Explorer, right-click the Model.DesignedDiffs.Localization.de-DE.xafml file and open its Properties window. Make sure that the Build Action field is set to Embedded resource.

6. Open the Model.DesignedDiffs.xafml file in the Model Editor. Select the newly added language in the Language combo box.

   

7. The localization packages translate standard strings/messages used in XAF. You also need to translate the strings that are unique to your current application (such as object or property names). To do that, locate properties denoted by the “globe” glyph in all the nodes and child nodes and assign a German translation to them. For the purposes of this tutorial, translate the Employees navigation item to Angestellte:

   

   Tip

   Instead of going through each node to find strings that require translation one by one, use the Localization Tool to streamline your localization process.

8. In the MySolution.Win project, open the Model.xafml file in the Model Editor and navigate to the MySolution node. Set the PreferredLanguage property to de-De to display the localized strings in the UI when you run the Windows Forms application.

9. Run the application.

   In ASP.NET Core Blazor, you can switch the language in the application settings menu. To access the settings menu, click the gear icon in the upper right corner:

   

10. The application should display the German translation of the Employees navigation item.

    ASP.NET Core Blazor

    

    Windows Forms

    

Next Lesson

Assign a Standard Image