Avalonia UI on Ubuntu: Interacting with Controls

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