Styling Xamarin.Forms Apps with Reusable Resources & Styles

[@truedaystar]

Thanks for the video! Very useful to me learning to program using Xamarin.

[@harag9]

Great video, just trying to learn MAUI and watching some random images that pop up that YT recommends, but all interesting. One question -- Width/Height Requests. I see you put numbers like 30, 50, 150 etc. but what exactly is this number - I'm so use to working in pixels it doesn't make sense to me as the displays for different devices are all different. Is there a general size I should work to?

[@olby_band]

Thanks for this video. How about dynamic resources and dynamic theme change?

[@JamesMontemagno]

Next week :)

[@imtiyazAhmad-gb7tn]

its always great to watch your tutorial thanks for share it with us. Also one request how we implement correct way "Kiosk mode" in Xamarin it will great support

[@trevorkobilo2480]

Great refresher! Thanks.

[@camilovega4914]

Great explanation! Have you considered making a video about C#?

[@JamesMontemagno]

We have so many good ones out there already channel9.msdn.com/Series/CSharp-Fundamentals-for-Absolute-Beginners and also dot.net/videos ;)

[@Jad.abouzaki]

Thank you

[@belmiris1371]

Thanks for another great video. I think I may need a new computer. I had to turn off Hot Reload because it was hammering on my CPU even when I wasn't using the emulator.

[@wacm]

Great video as always... Thank you for this. Is there a way we can move all the styles to a different file? For example a file called "styles.xaml" and keep all the styles there?

[@JamesMontemagno]

Yup, take a look at merged dictionaries -> docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/resource-dictionaries#merged-resource-dictionaries

[@steffi2128]

I would like to create a Dark Mode toggle!

[@JamesMontemagno]

Coming soon in a video :)

[@smiel7777]

Hi James. I've converted one of my larger projects to use Styles. With regards to performance, Is there a recommended limit to how many items one can add to the app.xaml resource dictionary ? I've added a lot of styles and noticed that the IntelliSense are no longer picking up the keys when trying to add a static resource, so now I have to go back each time and double check which style I want to use. This raised the concern that a large resource dictionary might impact performance ?

[@JamesMontemagno]

I haven't had any issues at all to be honest. General guidance is if you are using across multiple pages then put in app, else put it local in the page for stuff specific on that page.

[@VEOdev]

I wanna know how can I reference the style from the C# code ? like if I have cards that I can generate in code and i want to assign that style to it how would i ?

[@JamesMontemagno]

See the documentation -> docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/style-class

[@samt1905]

Hey James thanks, can you explain grid row definitions (simplified) with on platform from application resources?

[@JamesMontemagno]

You could do like ColumnDefinitions="{OnIdiom Phone='Auto,*,Auto', Default='.05*,.9*,.05*'}"

[@Otonium]

x=Crystal clear Thank you!

[@denisbmonteiro]

I always used it when working with WPF, it's a nice feature to reuse styles. Could you explain how the device theme works with Xamarin controls? One time I tried to implement a light/dark theme but the controls keep changing colors when the device theme changed. I mean, how can we style an Entry for example to be independent from the device theme? Anyway, thanks for the great content!

[@JamesMontemagno]

Yup, video is coming on its way next week.

[@cristisandu678]

Quick question. How you recommend to make dark mode, using styles and with a switch to change all styles or another method?

[@JamesMontemagno]

That video is coming this week!

[@zx-xn1lb]

I wish I could see this video sooner

[@RenegadeVile]

This is a great overview. Though I have a fairly specific question. I'm currently creating sort of a styles library that contains various common styles that I use across multiple apps. Separate from them, I have a variables.xaml file that contains things like the colors I use, or values for height/width, etc. Is it possible to import the styles from an external library, BUT create a new variables resource dictionary and use the colors there instead? In other words, the styles I import from that library will use the colors I define in my app, not the 'default' ones in the library. I've gotten this to work up to a point. The styles import and I can see them, but they are unable to find any other static resources. The end goal is to have a large collection of reusable styles but in an individual app, I can still change the actual colors being used. I know I can just copy all the resource dictionaries over into my app and then make changes there, but that kind of beats the point, I feel.

[@JamesMontemagno]

I believe you could inherit from the base like i showed... but i haven't tried that. I have to assume that is possible

[@RenegadeVile]

@@JamesMontemagno That would work, but then I would be redefining the styles all over again, just with a few different values set. And as far as I know, I cannot inherit from, for example, or .

[@loladeking]

It's almost impossible to use resources in code behind. All hits on stack overflow or xamarin blogs are all searching for answers

[@anandshindey]

?

[@JamesMontemagno]

Everything is documented well on how to write and access them in c# docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/style-class

[@sjorsmiltenburg]

var style = new Style(typeof(PancakeView)); style.Setters.Add(new Setter { Property = PancakeView.BorderColorProperty, Value = Color.FromHex(Application.Current.Resources["LightColor"].ToString()) });

[@sjorsmiltenburg]

woops, my code sample does not work (on uwp)... (maybe that's what you mean??)

[@sjorsmiltenburg]

this does work: TextColor = (Color)Application.Current.Resources["LightColor"];

[@drivetrainerYT]

Here’s my lots of thanks (+ YT tax)

[@eddienoureddine7408]

Big thumbs up

[@khaliphathiane584]

The downside of adding reusable style in app.xaml is slow the application start up.

[@JamesMontemagno]

I have never had any issues with that at all to be honest. Apps are ahead of time compiled and parsed quickly. Like I said though you can put page specific styles in the pages.

[@khaliphathiane584]

I understand it’s doable but not the best practices, issue is another word. I just mean wish could have reusable components like Flutter or an approche like Blazor

[@JamesMontemagno]

@@khaliphathiane584 Could easily setup control templates, which are reusable components -> docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-template

[@khaliphathiane584]

Thank will have a look

[@RallySystem]

the next one should be animations and used svg and not img

[@williamprogramer4168]

⭐⭐⭐⭐⭐

[@NightKingMarhoom]

You should open a university u know

[@nicholasma5695]

too many ADs 😂