It's important to be consistent with how you use spacing, fonts, colors and other resources across your entire app. You should aim to have exactly the same Margins or Paddings, use the same font families and the same Color palette on every page of your app. This will assure that your app looks consistently, which is a key principle in the user experience design. This will then allow users to familiarise themselves with the app quicker - reducing the learning time.

The above can be achieved by reusing StaticResources. There are three main areas that I think developers are not leveraging the flexibility and power of XAML:

  1. Margins and Padding
  2. Colors
  3. Code

Let's talk about in more depth about these three.

Margins and Paddings

We're all used to define our Margins and Paddings using the inline syntax of the Thickness XAML element. Usually we write it like this:

<Thickness x:Key="DefaultMarginAll">16</Thickness>
<Thickness x:Key="DefaultMarginLeftRight">16,0</Thickness>
<Thickness x:Key="DefaultMarginLeftTopRight">16,16,16,0</Thickness>

That looks all good, we're using the same value for all of the margins, right? Yes, although we're not reusing the same resource. Margin value 16 is written multiple times in multiples different places. Imagine if you need to change the margin value from 16 to 20 or any other value. Obviously, with only few instances that's not a big deal. However, with larger projects this could be a lot of refactoring and could cause some test cycles, if you've missed or forgotten to change some of them.

It would be much easier if you had your default margin value defined just in one place and then reuse it everywhere else. One change and all the elements relying on related to that value resources will change immediately.

The solution is to simply define a x:Double resource and then reuse it in your Thickness elements with properties assignment (instead of the inline syntax), like so:

<x:Double x:Key="DefaultSpacing">16</x:Double>

<Thickness x:Key="DefaultMarginAll"
           Left="{StaticResource DefaultSpacing}"
           Top="{StaticResource DefaultSpacing}"
           Right="{StaticResource DefaultSpacing}"
           Bottom="{StaticResource DefaultSpacing}" />
<Thickness x:Key="DefaultMarginLeftRight"
           Left="{StaticResource DefaultSpacing}"
           Right="{StaticResource DefaultSpacing}" />
<Thickness x:Key="DefaultMarginLeftTopRight"
           Left="{StaticResource DefaultSpacing}"
           Top="{StaticResource DefaultSpacing}"
           Right="{StaticResource DefaultSpacing}" />

Now, if we change the DefaultSpacing value it will propagate to all of the other resources that are using it. Done.

Colors

Colors are another area where I think we can improve the overall reusability of the resources. We usually tend to duplicate colors because we need them to use in different places. For instance, imagine that you need your navigation bar and the bottom tab bar to be red - your theme color. These are two completely separate parts of your app but they need to be of the same color. In most cases you would probably duplicate your Color StaticResources like so:

<Color x:Key="NavigationBarBackgroundColor">#FFFF0000</Color>
<Color x:Key="BottomTabsBarBackgroundColor">#FFFF0000</Color>

Obviously that's not ideal from the perspective of refactoring the code. If we were to change our theme color from red to orange, then this modification would required finding all of the red color  (#FFFF0000) occurrences and replacing it with the new color. These kind of operations might be quite time consuming and are error prone, as you might modify value of a resource(s) that shouldn't be amended.

What if I told you that there's a way of defining a StaticResrouce based on another StaticResource? There's this magical class called StaticResrouceExtension, that's annotated as

For internal use by the XAML infrastructure.

nevertheless, there's nothing stopping us from taking advantage of it!

<Color x:Key="Red">#FFFF0000</Color>

<StaticResourceExtension  x:Key="NavigationBarBackgroundColor"
                          Key="Red" />
<StaticResourceExtension  x:Key="BottomTabsBarBackgroundColor"
                          Key="Red" />

At the first glance it might be a bit confusing, as there's two keys in it. The x:Key is just the same exact key that you define in any other StaticResource - it's the name that you identify your resource by. The Key property is the already existing StaticResrouce key/name. In this case it's the Red resource defined at the top. Defining StaticResource using StaticResourceExtension can be consumed just as a regular resource.

<Grid BackgroundColor={StaticResource NavigationBarBackgroundColor}>
    // Some elements
</Grid>

Ignore the fact that Visual Studio will try to forbid you from using this markup extension with all sorts of different warnings and potentially errors. Once you build and run your app everything is going to work fine.

NOTE: This is not only limited to the Color resources. You can literally reuse any StaticResource. I tend to use these mostly for colors.

Code

There are rare cases when one needs to create/update/change UI from the code behind (C#) instead using XAML. In such cases I've seen that developers tend to re-create the same resource values (e.g. margins or colors) somewhere in the C# code.

To avoid code duplication and to keep the consistency of defining your UI resources in one place, I create a class in which I define static properties that retrieve my apps ResourceDictionaries.  If we take for example DimensionsResources, one of the resource dictionaries, that I usually create for my apps (see my previous post, where I talk about organising StatiResources). The earlier mentioned class could look like this

public class ResourceDictionaries
{
    public static ResourceDictionary DimensionsResourcesDictionary { get; } = Application.Current.Resources.MergedDictionaries.OfType<DimensionsResources>().FirstOrDefault();
}

Now we can query the DimensionsResourcesDictionary for any StaticResource defined in that dictionary by their x:Key.

Provided that we've created the DimensionsResources.xaml file and it defines a Thickness with a x:Key="DefaultMarginAll", we could retrieve that margin value and apply it to the Content of our page.

public class YourContentPage : ContentPage
{
    public YourContentPage()
    {
        InitializeComponent();
        
        Content.Margin = (Thickness)ResourceDictionaries.DimensionsResourcesDictionary["DefaultMarginAll"];
    }
}