Avalonia UI on Ubuntu: Interacting with Controls
Tags: avalonia, dotnet, ui, ubuntu
Published: 2020-07-24 17:16:58

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](https://github.com/Carlos487/avalonia-ui-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.

```xml
<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`.

```xml
<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:

![Controls added](https://dev-to-uploads.s3.amazonaws.com/i/cqw0rqi05xvm2nxpcdsw.png)

> 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`.

```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

```xml
<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:

```cs
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.

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xmzf7t4ghvw5s4nhx1n4.png)



> Remember that all the code for this tutorial in the [Avalonia UI in Ubuntu Tutorial](https://github.com/Carlos487/avalonia-ui-ubuntu-tutorial) Git repository with the tag `02-end`