Multi-Language Apps with .NET MAUI Blazor Localization

Просмотров 8 тыс.

% 240

Localization is a great way to let your app reach a broader audience and be more inclusive! In this video we will learn how to add localization to your .NET MAUI Blazor app with Microsoft.Extensions.Localization. With the help of the IStringLocalizer and resx files we will see how to add translations for different languages to our app in minutes!
💝 Join this channel to get access to perks:
ru-vid.com/show-GeraldVersluisjoin
Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
🛑 Don't forget to subscribe to my channel for more cool content: ru-vid.com
🐦 Follow me on Twitter: jfversluis
🤝 Join the Discord server: discord.gg/2cAyTGNHBD
🔗 Links
Sample App Repository: github.com/jfversluis/MauiBlazorLocalizationSample
Show Dialogs Video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gTLEIe0SWpI.html
Automatic Localizer: github.com/IEvangelist/resource-translator
⏱ Timestamps
00:00 - Add Localization to .NET MAUI Blazor
00:22 - Why Localization?
01:27 - .NET MAUI Blazor Dialog Sample Explained
02:08 - Install Microsoft.Extensions.Localization
03:53 - Adding Localizable Resources (resx)
04:40 - Pro-Tip: ResxManager!
05:37 - Localization in Razor Files
07:34 - Add Localized Resources resx File
10:29 - Add Localization Through Code
11:37 - Localize Strings with Parameters In It
14:28 - Use AI to Implement All Your Localization
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋‍♂️ Also find my...
Blog: blog.verslu.is
Twitch: twitch.tv/jfversluis
All the rest: jfversluis.dev
#dotnetmaui #localization #blazor #dotnet #resx

Наука

Опубликовано:

21 мар 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@davidsaylor4032 2 года назад

Would really like to know how to dynamically switch the language. If I have a kiosk-style app and the user wants to see a different language but cannot change the device language, how can that be done?

@jfversluis 2 года назад

Got it working locally, I’ll show it soon!

@mikehouweling6297 2 года назад

Great videos! We are currently working on maui blazor apps for the flower industry, maui blazor makes developers lives much easier 😁

@jfversluis 2 года назад

That's amazing! What does the app do?!

@mikehouweling6297 2 года назад

@@jfversluis Several checks within the process, for example when a supplier delivers the goods. We use an android scanner to check if the amounts / products are correct. That's just one of the many things 😁

@jfversluis 2 года назад

@@mikehouweling6297 Sounds very cool! Let me know if you need anything!

@mikehouweling6297 2 года назад

@@jfversluis Thanks! 😁👍

@PierreBritoM 2 года назад

I'm a big fan of your videos! Thank you for sharing with us.

@jfversluis 2 года назад

Thank you Pierre! My pleasure!

@amirh.jabari5401 2 года назад

That was fantastic. But what about right to left (RTL) languages? In that case, I think there is a lot of stuff to do in the UI. Can you make a video about that?

@jfversluis 2 года назад

I don’t think it’s “a lot of stuff” anymore to be honest. And in this case of Blazor: how would you do it on the web? That’s how you can implement it here. And for regular .NET MAUI the RTL properties should be much better

@Martin-kj1od 2 года назад

Great, but how do I add localization to pure MAUI app (not Blazor) ? In Xamarin forms i am loading localized strings in a service and then binding them to xaml. Problem is that the service do not implement INotifyPropertyChange (seems complex, boilerplate and not performant to me), so users have to restart the app when they change language. What is the correct way here ? Maybe MVU is to recue ?

@jfversluis 2 года назад

This is definitely possible and should not be much different from Forms. It's right that you need to add the refresh of labels yourself depending on how your UI is setup, but you can definitely do so! I'll see if I can make something for a regular .NET MAUI app as well.

@giovanninovati6024 2 года назад

@@jfversluis I would also be interested, can you make a video about it?

@liborhlavac2181 Год назад

@@jfversluis Hello Gerald, how are you? I only want to ask if you have prepared some video about localization in regular .NET MAUI app, or you haven't had time for it? While searching in your channel I am not able to find a video with such content. Thank you...

@jfversluis Год назад

Not yet! I want to do it but don’t have it yet

@robjo__ Год назад

Great video, if you publish another for Blazor, I'll watch it!

@jfversluis Год назад

I’ll keep you to that!

@MrLazyleader 2 года назад

Awesome video. How would a user change the language within the app?

@jfversluis 2 года назад

Thank you! That one is coming, probably next week :)

@MrLazyleader 2 года назад

@@jfversluis Awesome again :D

@Tronex2009 2 года назад

I guess you only need to change the CurrentCulture and CurrentUICulture properties to the desired language as with all other .NET applications.

@jfversluis 2 года назад

@@Tronex2009 yep!

@vagner9090 7 месяцев назад

Can you teach how to change the language of components such as file type input? because I'm Brazilian and everything on my computer is in Portuguese, but "Choose File" appears instead of "Selecionar Arquivo" (in Portuguese).

@Tronex2009 2 года назад

Back in the days I used to localize c++ applications using GNU gettext with .po files if I remember correctly. When calling into gettext using a key that doesn't actually exist, there was a mechanism that fell back to the key itself instead. So the default localization didn't have to reside in a specific resource file, but instead in form of keys. For example: gettext("Hello World."). Actually I liked that a lot, because it was way more readable in code than artificially thought of keys that people tend to start shorten or even use magic numbers for at the end of the day... I didn't study the source of Microsoft.Extensions.Localization in detail yet, but it looks like LocalizedString does this as well, right?

@jfversluis 2 года назад

Reading from what you describe, indeed it looks like it pretty much does the same kind of thing :)

@IIARROWS 2 года назад

This falls apart when you have a string that's the same in your fallback language but it needs to have 2 different values in one of the translation.

@jfversluis 2 года назад

@@IIARROWS Of course the other thing you could do is add the paths as strings to the resx files and differentiate for each language. Use the string localizer to get the path with the key and it should localize together with the rest

@IIARROWS 2 года назад

@@jfversluis I think you replied to the wrong thread but that could work... I also tried to embed the files into a resource file but I'm not a fan, as there is no async get and I'm not sure how that would behave with big files (especially for memory allocation, if it's properly collected, etcetera).

@jfversluis 2 года назад

Oh whoops seems I did. Sorry about that. RU-vid commenting isn’t the greatest..

@MeDjezze Год назад

Great introduction to the localizer. But instead of using the key of the resources as string I would suggest using nameof(MyStrings.HelloWorld). So you can be sure you don't misspell the key and renaming the key later is also much easier.

@jfversluis Год назад

Great suggestion!

@Thom1000 Год назад

Hi, i reached to implement this in my app. However i wasn't able to access the Localizer in code outside of a razor page in a cs class. I know you talked about the access modifier in the resx file, but i would need somehow the Object of the localizer. Sorry, i am quite new here and don't understand if i need a using directive or somethin different. I tried with using Microsoft.Extensions.Localization; and myText = Localizer["mydefaultText"] but the compiler doesn't recognize it...

@tahirjaved3205 3 месяца назад

Can you apply a dropdown for both English and other language conversion like in a MainLayout page.>> if someone want to translate Arabic then select dropdown

@ahmadsalim1726 2 года назад

So helpful thanks Gerald,please do the one with api

@jfversluis 2 года назад

Thank you Ahmad! What do you mean by API exactly?

@mohammedMusabKhan Год назад

@@jfversluis AI Localization I guess

@tofu1687 Год назад

I'm watching all your content about Maui Blazot which is great for implementing my components. Now I'm stuck with the input date which keeps using US format when my system uses fr. I'm even willing to temporaly use US format as a temporaly solution but nothing seems to do the trick. Does anyone have a suggestion?

@Neha-lh6ok 2 года назад

Great video , how can we set device language ? and is it possible to translate to other language not by changing device language but through a dropdown using Microsoft extension hosting package !

@jfversluis 2 года назад

Thank you! How the user can switch the language is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_ZFXk3vbxwQ.html

@Neha-lh6ok 2 года назад

@@jfversluis thankyou for your quick response 😀

@cissemy 2 года назад

Thanks Gerald How to add xamarin essential to MAUI Blazor like camera for example ?

@jfversluis 2 года назад

Exactly the same as you would in a Xamarin app :) more content on that soon. This one might be helpful: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8W1HSu2-tI0.html

@1987gemma1987 2 года назад

Ahh I was so happy you started in Dutch, haha, well English it is :D

@jfversluis 2 года назад

Fooled ya! :D

@Leqsus5 2 года назад

create InputSelect to user yourself change language

@jfversluis 2 года назад

That will be the topic of a next video indeed!

@RavikumarPatra Год назад

How to set the language from app and not use the device language

@Irizanjo 2 года назад

Does this also work for Esperanto? (including changes to the CurrentCulture and CurrentUICulture properties) (And in case you wonder: yes, this is a serious question because I have an app with at least 15k Esperanto speakers/users, and I had a lot of issues trying to do that with Xamarin and eventually kinda made an ugly hack 😂)

@jfversluis 2 года назад

Good question! I can't promise you anything tbh. But if it's a supported culture on the platform it should work!

@Irizanjo 2 года назад

@@jfversluis I looked into it again (because it has been a while): the issue I was experiencing related to having my phone (iOS) set to English, but then selecting a different language as the preferred one. I would then get a culture like eo-EN or eo-NL and they don't exist (and Xamarin/the app would crash, because 'no such culture'). On android I don't even have the option to select a language that doesn't exist as a culture (afaik). I found a work-around which is more like a translation than a true localisation (because it doesn't deal with dates properly) through something like: ResourceManager = new ResourceManager(theLanguage, resource.Assembly); (where 'theLanguage' is 'Strings-nl.resx' or 'Strings-eo.resx' based on settings and/or preference) I would prefer true localisation, however, only iOS lets me add Esperanto as a preferred language, and Android doesn't. It can get tricky… Really enjoying your videos btw! They've helped me solve several problems 😀

@IIARROWS 2 года назад

There is an easy way to localize raw content like images, audio, or serialized data (ie: json) specific to the language? Without the need to manually interpret the current culture and locate the correct file.

@jfversluis 2 года назад

You might want to look at this docs: docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/localization/text?pivots=windows#localize-images it is not specific to .NET MAUI nor Blazor, but maybe this will work just as well?

@IIARROWS 2 года назад

@@jfversluis I read about that, but how would that work with MAUI? Do I need to double all the files* for both Android and iOS? What about Windows? Does that work for non-images too, especially if I access them from code with path? I might give it a shot. * without setting up a script on pre-build.

@townmilk 2 года назад

Hi I don't know what Maui Blazor app is at the first place. I developed in Maui. I heard about blazor which is a framework to develop web apps. I don't know about Maui Blazor Apps. Can you please help with this.

@jfversluis 2 года назад

A course that will explain it all is coming!

@townmilk 2 года назад

@@jfversluis how I can get notification for the same

@jfversluis 2 года назад

I don’t have a concrete date or anything yet. But I want to publish the first videos as soon as possible. So keep your eye on what is published here!

@zhh174 2 года назад

video on using desktop menubar with maui blazor?

@jfversluis 2 года назад

Shouldn't be much different from what I show in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n48MiBh_SxM.html Just place your menu in the MainPage.xaml :)

@Mielesplayz 2 года назад

I wanted to add this to my project, but I have too much text to translate it all

@jfversluis 2 года назад

It’s definitely a chore to get it all in!

@Mielesplayz 2 года назад

@@jfversluis klopt, het is best veel werk.

@cissemy 2 года назад

Hi How to localize a try catch error message coming from a web api call ?

@jfversluis 2 года назад

You ideally get back some kind of code from the backend that you can use as a key for the translations. Another way, if you also control the server code, is to send the language with the request so you know what you need to send back and localize on the server

@risingwise 2 года назад

When we do it with this method, the microsoft store only shows the main language in supported languages. Is there a way to show other languages I've added in supported languages as well?

@jfversluis 2 года назад

Hm didn’t look into it. Maybe you can specify the supported languages in the windows app manifest file?

@risingwise 2 года назад

@@jfversluis The part contained in the normal manifest file above. Below is the version that I have changed. I guess that's what you meant?

@jfversluis 2 года назад

I guess! Did that make it showing right in the store?

@risingwise 2 года назад

@@jfversluis yup it worked (:

@jfversluis 2 года назад

@@risingwise yay great!