Skip to content

Home

Jump to bottom
tetherscript edited this page Feb 15, 2025 · 24 revisions

WinUITranslator

Translate your WinappSDK WinUI Apps using the OpenAI API, a local model or any other method you can dream up.


Important

  • Requires Visual Studio 2022 with .Net 8 and WinAppSDK 1.6
  • This Visual Studio 2022 solution contains a Translator app that translates your WinAppSDK WinUI project to the languages of your choice. It will scan your project, create the necessary translations, and update your Resource.resw files.
  • OpenAI profiles are included. You can translate an app for under $5 USD.
  • Local translation profiles are included with the free LM Studio, with support for deepseek-r1-distill-llama-8b, llama-3.2-1b-instruct and LMS_SO-meta-llama-3.1-8b-instruct. You can copy and tweak these profiles for other models.
  • You can also code your own profiles to call whatever translation service you want, including local and free models!
  • You can scan and translate the sample apps without an OpenAI account or local LLM setup. It will just retrieve the already-translated cached translations. It'll give you a good idea of how it all works.
  • Run the included sample apps. They have already been translated from en-US to de-DE, fr-FR and ar-SA. You can modify these and re-translate them to see how it works. These sample apps show you how to translate and test packaged and unpackaged apps.
  • Explore the included static class Localized and updated Resource.resw files.
  • You only need to include the Localized static class in your project. It allows dynamic text translations, like for a 'Loading {0}, please wait...' status message. It also allows the retrieval of non-translated resources, such as icon files, colors etc.
  • Your deployable do not require any third party packages or libraries. All the Translator-required code is contained in the included TLocalized.cs which is very simple, short and reviewable. In fact, if you don't use any dynamic translations, you don't even need to include that.
  • Trimming is supported.
  • It is version-control-friendly, and your translation changes are diff-able.
  • You don't need to edit the .resew files. Ever.

Note

You use the Translator app to translate your target app.


Let's scan the included Sample-Packaged app project for anything that is translateable.

image

And then we translate the scan results with OpenAI from en-US to ar-SA, de-DE, and fr-FR.

image



Why Does this Exist?

I needed to translate several WinAppSDK Winui apps. I tried some Nuget package tools, but realized that I really don't understand how the resources/translation/localization thing works, and I did not like having to manually edit .resw files. I figured if I made my own tool that can meet the requirements listed below, I would understand. I posted this as a public repository to share it, and see what ideas/insights other devs may have. Now that AI is everywhere, I set out to use AI to do the translations, and it works really well.

This has greatly improved my dev-translate-test workflow.

Tip

Take a close look at the packaged and unpackaged sample apps. It helps clarify the obscure and somewhat undocumented process of setting the language and testing with RTL languages.



Introduction

The Requirements

I am building an app and will be translating it to other languages, and:

  1. I want to translate certain .xaml elements and dynamically generated text to varying physical lengths.
  2. I will not change languages while the app is running and expect to see the changes before restarting the app.
  3. I don't want to introduce additional code dependencies or trimming constraints.
  4. Translation changes must be diff-able in Git.
  5. It needs to be able to translate Packaged or Unpackaged apps.
  6. No additional runtimes or packages will be required for publishing the app.
  7. I need to specify certain icons and colors for certain languages.
  8. I need to literally be able to add several new languages TODAY, press a few buttons, and it's translated and releasable TODAY.

This Translator app can do that. Even #8.

Solution

  1. In your app to be translated (the "target"), add a \Translator folder and some files. Adjust your .xaml elements and dynamic text as shown in the x:Uid's and TLocalized.Get() tabs.
  2. In this Translator app, set the target to that app, scan, then translate.
  3. Build and run the target app. The translations are now visible.

Try it with the Sample Apps

  1. Run the packaged or unpackaged sample app in VS2022.
  2. Run this Translator app in another instance of VS2022, or just run the deployed version from the start menu.
  3. The sample app is ready to convert. Target, scan, and translate, then run the sample app to see the changes. Since it has already been translated, all the translations will be retrieved from the \translator\CacheEx.json and it will not attempt to connect to the OpenAI API, so you don't and OpenAI API account to try it. See the screenshot above to see what it looks like when it retrieved responses from the OpenAI API.

Ideal Real-World Usage

  1. Continue developing and debugging your app.
  2. When you are ready to translate, run this Translator app, then run your app again to see the changes.
  3. Tweak your app code, translate, tweak code, translate. Rinse. Repeat until it is fully translated.

Tip

If you are creating an app that will need to be translated, you need to set it up and test the translation on day one of development. Put a Hello World button, a dynamic text message, and define several languages. Translate it. Test the translations under different languages and understand how it works.

Then you'll know what you need to do to make your app localized. It will affect your decisions on layouts, text length, and spacing that are difficult to fix later. Starting this process of adding x:Uid's, .Get()'s, and running the Translator app after your app is already big is a pain. I know this. Best to start translating on day 1.

Clone this wiki locally