How to design efficiently on Xamarin Forms - Implicit Styles

Implicit Styles

Design Efficiently on Xamarin Forms

Using XAML Styles is probably one of the best things you can do when developing XAML applications, especially as they grow and you have more and more pages that you need to maintain, and they need to keep the same looks. This is true of course for Xamarin Forms applications as well, even when this UIs are going to be shared across Android, iOS and sometimes even Windows.

This post is about implementing implicit styles, those that are automatically applied to the entirety of the definitions from one type.

FYI, the entire code is in this repository, you can switch branches to explore the code step by step.

The Scenario

Say we have a calculator app, and we have defined the elements with no styling yet (except for the result label). If we want all the buttons to have the same style (same font size, same background color, same foreground color), do we go one by one establishing this style? Of course not, that would be so inefficient, tedious and very hard to update.

It would be inefficient because it would be the same code, over and over again, not ever reusing it.

It would be tedious because you would have to write (or copy and paste) the code in 19 buttons, at least in the case that we are dealing with right now.

And so hard to maintain and update because, if we ever want to change any value from the styling, say the background and font size, we would have to go again, to each and every one of these buttons, and update the values to match the new style.

Initially, in this example, I am setting the style for the label directly in the element itself. In this case, the disadvantage barely exists, there is only one label.

But doing this on a button would cause a huge disadvantage since there are 18 other buttons that would need to use the same style, let's learn then how we can apply a style to all Buttons.

Defining a style

So let's be more efficient, let's create an implicit style inside our ContentPage. Let's say we want the buttons to use a bigger font size, and we've established that we are not going to do it button by button, all we need is to define a style inside of a ResourceDistionary inside of the Resources for, in this case, the ContentPage:

<ContentPage.Resources>
   <ResourceDictionary>
        <Style TargetType="Button">
            
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Notice that the Style is setting a TargetType, through which we establish to what type of elements is this style going to be applied to. From here, every property that we want to set, we do it through setters. If we want a bigger font size, inside the Style definition, we add a setter:

<Setter Property="FontSize" Value="30"/>

If we want a different background, we add another setter, right bellow the first one:

<Setter Property="BackgroundColor" Value="Orange"/>

I recommend you go to a Button definition to check the name of the actual Property since autocompletion for this is not available in Xamarin Forms, but as you may be able to see, changes are immediately applied (you can check the changes by opening the Xamarin.Forms Previewer window.

This will be how implicit styles work, you just need to define them, and start adding the setters, along with the Property that you want to set, and the value that you want to assign to that property.

It is absolutely simple and efficient, now, if you want to change the color from orange to say, blue, on all buttons, you only need to change the value that you assign in the BackgroundColor setter, and the same goes for the FontSize setter.

Hopefully, you notice how this can be useful in applications that have buttons in many different pages, and not just buttons that need to have the same style, but labels, and text boxes, and pickers....

But you may also notice that we have a new problem, all the buttons have the same style, does that mean that if we want only one button to be blue, we have to manually set it?

That would send us back to an inefficient situation, how to deal with it is covered in the next post, meanwhile, fork that repository, like and share this post, and comment down below if this was useful!

---

This topic, along with many many others, is covered in greater depth in my 25-hour long "The Complete Xamarin Developer Course: iOS and Android" course, which you can practically steal from me by