Avalonia UI on Ubuntu: Margin and Padding

This chapter of the Avalonia series will focus on adding some space to the UI. But before we can proceed, we have to make to some small changes.

The release of .Net 5 was a big step forward for the framework, so we are going to update the project to work with it.

Updating the project

To update the Avalonia project to .Net 5 is necessary to edit the file MyApp.csproj

<TargetFramework>net5.0</TargetFramework>

Then you can manually update the version for the Avalonia Nuget packages accordingly to the latest available, which is 0.9.12 at the moment of writing this post.

<PackageReference Include="Avalonia" Version="0.9.12" />
<PackageReference Include="Avalonia.Desktop" Version="0.9.12" />

Alternatively, you can automatically get the latest version by using the dotnet CLI. By running the following commands:

dotnet add package Avalonia
dotnet add package Avalonia.Desktop

No matter which way was used to update the packages, in the end you need to run dotnet restore to get the new packages.

dotnet restore

After running dotnet run, the application will be updated and running as usual.

Improving the current UI

The current application works, but it has some minor issues. The default window size is quite big in comparison to the other elements, there is a lot of unused space and the controls are too close to each other. So we are going to fix it.

Fixing the windows size

If you open MainWindow.xaml the first instinctive change would modify the following attributes, but sadly those are only used by the Visual Studio designer that is why they have a d: prefix

d:DesignWidth="800" d:DesignHeight="450"

The correct way to change the window size is by adding the attributes Width and Height with a numeric value that represent its "pixel" size.

<Window ...
        ...
        Width="300" Height="200">

As you can see the new window size suits its purpose better. Next we are going to add some space between the controls.

Adding some space

If your have used CSS you might be familiar with the concepts of Margin and Padding, which are basically space you can add outside the boundaries of the control (margins) or inside its boundaries (padding)

The Avalonia team has created a great explanation of them in the following docs entry Avalonia Docs: Alignment, Margins and Padding

This properties Margin or Padding need to be added to a Window, Container or Control. The syntax from the following example is also applicable to Margin too.

<Window Padding="10">
All sides have the same padding

<Window Padding="10, 10">
Represents <Window Padding="left-rigth, top-bottom">

<Window Padding="10, 10, 10, 10">
Represents <Window Padding="left, top, right, bottom">

Be aware that not all the controls can have a Padding/Margin property.

For the example we are going to add a Padding: 10 to the Window and a Margin: 0, 0, 0, 10 to the first label, textbox, and button.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="MyApp.MainWindow"
        Title="MyApp"
        Width="300" Height="200" Padding="10">
    <StackPanel Orientation="Vertical" >
        <TextBlock Name="NameLabel" Margin="0,0,0,10">What is your name?</TextBlock>
        <TextBox Name="NameTextBox" Margin="0,0,0,10"></TextBox>
        <Button Name="GreetButton" Margin="0,0,0,10" Click="GreetButton_Click">Say Hello!</Button>
        <TextBlock Name="MessageLabel"></TextBlock>
    </StackPanel>
</Window>

If you run the application, you will have the following result.

As you can see now there is some spacing that can be improve legibility and usability.

The code for this chapter will be located in the repo Avalonia UI in Ubuntu Tutorial with the tag 03-end.

I hope you find this post useful, in the following chapter we are going to explore how to style controls.