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
Top comments (0)