Skip to main content
Version: 11.0.x

The Main Window

You can now start your tour of an Avalonia project. We'll start with the main application window. Open the MainWindow.axaml file.

info

In Avalonia, XAML files have the extension .axaml (and not .xaml). This represents 'Avalonia XAML' and the file extension was introduced for technical reasons.

What is Happening?​

In the MainWindow.axaml XAML file, the <Window>...</Window> XAML tag represents an Avalonia window. Like other Avalonia controls; the window will be drawn on the target platform with 4 layout zones: margin, border, padding and content.

The MainWindow Content​

Inside the Windows Content, you will see a <TextBlock>...</TextBlock> XAML tag. This represents a TextBlock control which draws Text to the screen. The Text property of the TextBlock is bound to the Greeting property of the MainViewModel class.

XAML
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

You can change the text in the file MainWindowViewModel.cs to see the change reflected in the user interface.

C#
namespace GetStartedApp.ViewModels;

public class MainWindowViewModel : ViewModelBase
{
    public string Greeting => "Welcome to Avalonia! This is my added text.";
}
Application runningApplication running
info

For more information about the concept of control layout zones, see here.

The XAML Previewer​

If you're using an IDE with one of our IDE Extensions installed, such as Rider, Visual Studio or Visual Studio Code, you can see live changes to your XAML code in the previewer view.

The XAML Previewer create an instance of your app in a special authoring mode, known as design mode. When your app runs in design mode, it can execute special logic that enables coordination with the visual designer. Design.IsDesignMode

Navigate to the MainWindow.axaml file and click the Split View button at the top right of the editor window.

Rider Avalonia Previewer ControlsRider Avalonia Previewer ControlsRider with the Avalonia XAML Previewer OpenRider with the Avalonia XAML Previewer Open
  • Build the project.
Avalonia XAML PreviewerAvalonia XAML Previewer
  • Remove the binding {Binding Greeting} and change the text <TextBlock Text="my text" />

You will see the new text in the preview pane change as you type. This is an example of the Avalonia design-time preview behaviour that will help you develop user interface presentation accurately and quickly.

  • Run the project to see your new text also appear at runtime.

On the next page, you will add a simple Button to the window.