Universal Styling in Xamarin Form Apps

When using Xamarin Forms sometimes we have the need to make our applications look better by applying some styles.But what if our application uses a similar style for all our controls in the entire application and we just want to apply it to all these controls without too much effort.

The solution of that is using Global and Implicit styles:

1-Define our Style in the Application Subclass XAML (App.xaml)

2-Use the base control class type as TargetType and don’t specify the key

For example:

In this example, all the controls that were defined in the Application Style file will look the same.

Also note that you can use styles for any kind of element, Pages/Views/Layout, etc.

This works perfectly when we are doing simple UI, but what if we want to add some more complex styles. We can do this by using custom renderers and with the same concept shown before, specify the base control class type (like Button, Entry, Label, etc.). This will override the default renderer behavior and will allow us to apply the style to all the elements of that control class type.

For example, if we want to remove the entry line to all the entries in Android:

Now all our entries won’t have the entry bottom line on Android 🙂

Also, this approach is really helpful when we want to add the same custom font family in all our controls for the complete application without too much effort, just by adding a custom renderer to each control we want with the custom font.

This is an example of a Label with a custom font applied:

Complete Sample here:

https://github.com/CrossGeeks/Xamarin.Samples/tree/master/Xamarin%20Forms/FontSample

NOTE:

This example doesn’t have any custom renderers implemented for iOS because in this platform there’s no need to create it to apply a custom font, just by registering the font in the Info.plist file is enough (Fonts provided by application or UIAppFonts key).