DEV Community: Carlos Fabara

Avalonia UI on Ubuntu: Margin and Padding

Carlos Fabara — Thu, 21 Jan 2021 03:22:39 +0000

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.

Avalonia UI on Ubuntu: Interacting with Controls

Carlos Fabara — Fri, 24 Jul 2020 17:16:58 +0000

Welcome to the second post of the series about Avalonia UI. In this post we are going to see how to interact with Controls using the default template created in the previous post.

You can get the starting code in the Avalonia UI in Ubuntu Tutorial Git repository with the tag 02-start

You can open the MyApp folder by using Visual Studio Code. If might be prompted to install any missing extension like the C# one.

Adding controls

First, we need to open the MainWindow.xaml file. Here we need to find the "Welcome to Avalonia!" text and change it to a StackPanel layout manager with a vertical orientation.

This will make the controls to stack one after the other so we don't worry about their positioning by now.



<StackPanel Orientation="Vertical">
</StackPanel>

Next, we need to add inside the StackPanel a TextBlock with the name NameLabel, a TextBox with the name NameTextBox, a Button with the name GreetButton and another TextBlock with the name MessageLabel.



<TextBlock Name="NameLabel">What is your name?</TextBlock>
<TextBox Name="NameTextBox"></TextBox>
<Button Name="GreetButton">Say Hello!</Button>
<TextBlock Name="MessageLabel"></TextBlock>

If you run the project using dotnet run you should see the following:

The window at the moment is big, but can be resized. Changing the Window properties will be explored in upcoming tutorials.

Managing the click event

To manage the click we need to first add an Event Handler with the following signature inside the class from the MainWindow.xaml.cs.



public void GreetButton_Click(object sender, RoutedEventArgs e)
{
    //Add logic here
}

This will require to add the using Avalonia.Interactivity; for this file.

Then modify the Button tag in the XAML by adding the Click property with the method name as a value



<Button Name="GreetButton" Click="GreetButton_Click">Say Hello!</Button>

Accessing controls

Given that our project is using the base Avalonia template we need to access the controls manually from the code behind. Inside the GreetButton_Click method we need to add the following:



public void GreetButton_Click(object sender, RoutedEventArgs e)
{
    //Getting Controls references
    var nameControl = this.FindControl<TextBox>("NameTextBox");
    var messageControl = this.FindControl<TextBlock>("MessageLabel");

    //Setting the value
    messageControl.Text = $"Hello {nameControl.Text} !!!";
}

The FindControl<T> method allows to retrieve the reference of the Controls from the window.

For this example we are using the Text property to read the value from the TextBox and set it into the Message Label.



messageControl.Text = $"Hello {nameControl.Text} !!!";

Next, run the program, fill your name and click the button. The label with a greeting message with appear.

Remember that all the code for this tutorial in the Avalonia UI in Ubuntu Tutorial Git repository with the tag 02-end

Avalonia UI on Ubuntu: Getting Started

Carlos Fabara — Sat, 27 Jun 2020 16:39:41 +0000

Avalonia UI is a cross-platform UI framework available for Dotnet Core. It is a project part of the .Net Foundation. Its main appeal is to provide the ability to create desktop applications for Windows, Linux and MacOS with a single code base.

In this tutorial we will see how to install the Avalonia templates and create a blank application.

Installing templates

The first thing we need to do is installing the Avalonia Templates so the dotnet new command could use them when creating new applications.

You need to go to the following Github Repository Avalonia Templates for dotnet new and download the zip version. Alternatively, you could clone it to your machine if you have git installed.

After you have unzipped the file in the location you prefer. It is needed to run the following command. Keep in mind the path you need to use is the route to the unzipped templates



dotnet new --install [path-to-templates-folder]

Tip: An easy way to add the folder path to the command line is to drag and drop the folder from the File Explorer

Creating an Avalonia application

The command executed on the previous step adds a few more templates to the dotnet new command.

There are two project templates added are the following:

avalonia.app: To create a barebones Avalonia application
avalonia.mvvm: To create an application that uses the Model-View-ViewModel pattern with ReactiveUI

To create a new application you need to run the following command:



dotnet new avalonia.app -o MyApp

Where MyApp is the name of the application we are creating.

Running the application

To run the application you need to get into the MyApp folder



cd MyApp

and then run the app with the dotnet CLI



dotnet run

The result will be the following as a blank app shows on screen.

I hope you find this useful. In following entries we will continue exploring the Avalonia UI framework.

Installing DotNet Core in Ubuntu 20.04

Carlos Fabara — Fri, 24 Apr 2020 15:55:20 +0000

UPDATE: Microsoft added the official docs to Install .NET Core on Ubuntu 20.04 package manager.

UPDATE 2: Added link to scripted installation alternative Scripted Install

The newest Ubuntu LTS release is available now. Sadly, at the time of this writing (April 24th), there is no official installation method for Ubuntu 20.04 listed on the .Net website.

Manual Installation

For this tutorial we are going to manually install DotNet Core 3.1.201 SDK using the binaries provided in the official page.

Download the binaries

Head to .Net Core Downloads and look for the x64 Binaries in the Linux.

Alternatively you can use this link to get the specific version used in this tutorial.

Extract and link

After the download finishes, open a Terminal (you can use Super+Alt+T as a shortcut).

Navigate to the folder where it was downloaded and run the following command



mkdir -p $HOME/dotnet && tar zxf dotnet-sdk-3.1.201-linux-x64.tar.gz -C $HOME/dotnet

This command will create a dotnet folder on the user's home directory and extract there the contents of the file.

Note: Please be aware that the file name dotnet-sdk-3.1.201-linux-x64.tar.gz matches the one you downloaded, otherwise you might need to modify the previous command accordingly to your download.

Export variables

Run the following commands to temporarily add the dotnet binaries in your terminal session.



export DOTNET_ROOT=$HOME/dotnet

and



export PATH=$PATH:$HOME/dotnet

Note: This will work only for the current session, at the end of the tutorial you will find instructions to add it permanently.

Test the installation

Run dotnet in the Terminal, and the following should show appear:

Congratulations! You have installed dotnet core.

Permanently add the dotnet command

To add the dotnet commands permanently, you need to add the dotnet folder to the path of your system. To achieve this need to modify the ~/.bashrc file by running.



gedit ~/.bashrc

This will open an editor with the file contents. At the end of the file add the following two lines:



export PATH=$PATH:$HOME/dotnet
export DOTNET_ROOT=$HOME/dotnet

Save the file (Ctrl+S) and close all the open Terminal windows. Next time you open a new one dotnet will be available.

Other installation methods

Package Manager

This is the official way to install dotnet core for Ubuntu based systems. The instructions for the 20.04 version can be found in Package Manager Install

Scripted Install

It has been reported that some PopOS! users might have issues with the official and manual installation methods. In that case it might be solved by using the scripted install method whose instructions can be found in the following link Scripted Install. Thanks to Emma for the contribution.

Installing DotNet Core in Ubuntu 18.04

Carlos Fabara — Sat, 28 Apr 2018 22:45:05 +0000

Update

Since the time this article was published Microsoft has released the official way of installing DotNet Core you can find them in DotNet Ubuntu 18.04 Downloads

With the release of Ubuntu 18.04 the new LTS version of the popular Operating System, people might be eager to try dotnet on the platform.

Sadly, at the time of writing this post, neither the page getting stater page DotNet Get Stated nor the downloads page DotNet Downloads list a compatible package with this OS.

In fact, if you try to install following the instruccions for the closest release which was 17.04 Instructions Ubuntu 17.04 you will get an error of missing dependencies.

In order to install you have to used the following steps as it is indicated in this GitHub issue.

Registering Microsoft keys and feeds

It is necessary to add the keys and the feed to the system so you have to type in a terminal the following commands.

sudo apt-key adv --keyserver packages.microsoft.com --recv-keys EB3E94ADBE1229CF

sudo apt-key adv --keyserver packages.microsoft.com --recv-keys 52E16F86FEE04B979B07E28DB02C46DF417A0893

To add the feed you need to type:

sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-ubuntu-bionic-prod bionic main" > /etc/apt/sources.list.d/dotnetdev.list'

And update the packages list with

sudo apt-get update

Installing DotNet Core

To install dotnet you can use the stable version with:

sudo apt-get install dotnet-sdk-2.1.105

Or the newest preview version with:

sudo apt install dotnet-sdk-2.1.300-preview2-008533

Remember that you can have both installed side by side, newer dotnet have the dotnet --list-sdks and dotnet --list-runtimes, although the newest will be used if it is not overridden with a global.json file. You can find more info in this Scott Hanselman's post. Also

Testing the installation

Inside a folder create a new console project with:

dotnet new console

To run it, you need to use:

dotnet run

And everything works correctly qou will be able to see a Hello World message on your terminal:

Hello World!