.NET MAUI – Margin and Padding

Starting a new series titled Developer Tips which offers small hints to enhance developer productivity. All the articles in this series can be accessed from here.

We’ll start with the Margin and Padding that effectively position the View.

Both the properties have been appropriately defined at the View level and are of the type Thickness, which is a structure that defines 4 important properties: Left, Top, Right, and Bottom.

The type is defined by three overloaded constructors intended to initialize its value.

Each constructor helps to make the code more concise.

• First, that takes a single value to specify a uniform size across all sides
• The second one delineates varying values for the Horizontal (left and right) and Vertical (top and bottom) sides
• The third one that delineates distinct values for each side

On XAML, this is what makes code much more readable.

Code Sample:

Specifies a Padding of 10 units across all sides:

<Grid Padding="10"></Grid>

Specifies a Padding of 10 units on the Horizontal and 5 units on the Vertical sides:

<Entry Padding="10,5" />

Specifies separate units on each of the sides (This defines 10 units on the Left side alone):

<Label Margin="10,0,0,0" />

While defining the values for all sides, remember the acronym LTRB, which represents the order of values: Left, Top, Right, and Bottom.

This significantly differs from web CSS, which uses the order Top, Right, Bottom, and Left, and in .NET MAUI does not accept three values in any constructor.

At this juncture, I would like to include the quote by Charles Petzold, who is widely recognized as the Windows Guru.

“Padding inside. Margin outside.”

Note: Thickness values can also be negative, which typically clips or overdraws the content.

This can also be defined as a resource and then used accordingly. Define the value matching to any of the three constructors.

The resource can be referenced for both Margin and Padding as the underlying type is the same, so define the resource key name meaningfully.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Thickness x:Key="Content">30</Thickness>
    </ResourceDictionary>
  </ContentPage.Resources>
  <Grid Padding="{StaticResource Content}"></Grid>
</ContentPage>

For developers who embrace working with C#, the CommunityToolkit.Maui.Markup package encompasses three Fluent methods for specifying Margin and Padding.

The methods are named as:

• Margin (overloaded) and Margins
• Padding (overloaded) and Paddings

The method name, in its plural form, refers to the one that accepts distinct values for each of the sides.

// First
new Grid().Padding(10);
// Second
new Entry().Padding(10,5);
// Third
new Label().Margins(10,0,0,0);
// Third, further simplified
// Since the other 3 values are zero that is the same as the default parameter value in the method definition itself
// Use named parameter to simplify if defining for other sides
new Label().Margins(10);
// If only top margin
new Label().Margins(top: 10);

Use the simplified format to make the code more concise.

If you would like to recognize the work, kindly consider sponsoring on the GitHub Sponsor page or Buy Me a Coffee page. Thanks in advance.

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.