Xamarin Forms & Custom CSS Properties
Do you ever plan to make your CSS properties? I will show you how 😋
As far as we could start using CSS in our Xamarin Forms application we stock with a problem that not all things we want are in. All-time count of supported properties is growing but not all the time it met our requirements. Or we create some controls and want to style some properties of it also from CSS like other controls.
How CSS in Xamarin Forms applies to controls?
Xamarin.Forms.Core project you may find registration of all CSS properties for Xamarin Forms. All they are registered as an
AssemblyInfo.cs file. At the initializing of Xamarin Forms static class
Registrar start registration of attributes, also CSS attributes. His function
RegisterStylesheets which makes all registration works.
RegisterStylesheets by himself get all
Xamarin.Forms.Core assembly(added at
AssemblyInfo.cs) and assign into
Registrar.StyleProperties property, which takes CSS name as a dictionary key and list of
StylePropertyAttribute as a value.
After registration, when any CSS file or inline CSS are applied(in Page, Control or App.xaml Dictionary)
StyleSheet class start reading and parsing CSS with
CssReader . If reading whole property succeed — it will add selector and style into style collection(
StyleSheet object that will be returned(same as for Xaml Styles).
Now during drawing elements on the screen
VisualElement class comes to play. As you may know, Visual Element implements
IStylable interface and provide realization of
GetProperty method. There we try to get by
key our Style, where
key is the name of a CSS property.
Also good to mention that each property that has his interpretation in CSS are required to have a type converter.
What’s there with Style Property Attribute?
Right now this is
private sealed class and you can’t create instance of it in your project. Even if new attributes will be frequently added to Xamarin Forms, it’s not solving a problem when we want to create a custom one.
A Pull Request at GitHub with opening Style Property Attribute or Adding easy possibility to register own CSS Properties, but it’s blocked by reviewers, hope it will change one day.
Add Possibility To Register Custom CSS Properties by bbenetskyy · Pull Request #7653 ·…
Description of Change How it was requested at Adding Custom Properties to CSS #7547 issue we are looking for an easy…
Your attention there may change something also 🙃
How to make CSS property now?
Reflection, reflection and one more time — reflection. Here is an example of implementation and how to register it:
Sources are taken from Open Source Magic Gradients — Xamarin Library based on SkiaSharp to draw enhanced gradients in light and fast way.
Thanks for reading, more is coming soon 🤯…