Avalonia first meeting

  • Tutorial
When we meet a new language, we write “Hello world”, and when we meet a new UI, we create a notebook. Here I want to show a simple example of friendship with the Framework korssplatformennym the GUI AvaloniaUI .



First, install the required template.

To do this, save this repository on your machine.

Open the console and write:

dotnet new --install [путь до скачанного шаблона]

And create a starting project:

dotnet new avalonia.mvvm -o Notebook

Add a simple markup as in wpf in the MainWindow.xaml file.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Notebook.ViewModels;assembly=Notebook"
        Icon="resm:Notebook.Assets.avalonia-logo.ico"
        Title="Notebook">
    <!--Биндим горячие клавиши-->
    <Window.KeyBindings>
        <KeyBinding Gesture="Ctrl+O" Command="{Binding Open}" />
        <KeyBinding Gesture="Ctrl+S" Command="{Binding Save}" />
    </Window.KeyBindings>
    <Design.DataContext>
        <vm:MainWindowViewModel />
    </Design.DataContext>
    <!--Стандартная разметочка гридом-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!--Менюшечка-->
        <Menu Grid.Row="0" Grid.Column="0">
            <MenuItem Header="File">
                <MenuItem Header="Open" Command="{Binding Open}" />
                <MenuItem Header="Save As" Command="{Binding Save}" />
            </MenuItem>
        </Menu>
        <!--Основное текстовое поле-->
        <TextBox Grid.Row="1" Grid.Column="0" Text="{Binding Data}"
                 AcceptsReturn="True" />
    </Grid>
</Window>

C mvvm everything is a little different here, since ReactiveUI is used by default.

So in the MainWindowViewModel.cs file we add:

 private string _data;
        public string Data
        {
            get => _data;
            set => this.RaiseAndSetIfChanged(ref _data, value);
        }


But in contrast to the default wpf, avaloniya allows the team to bind commands directly to the methods.
And it is also worth noting that the file dialogs in this framework are only asynchronous.
Then opening the document will look like this:
 public async Task Open()
        {
            var dialog = new OpenFileDialog();
            string[] result = null;
            dialog.Filters.Add(new FileDialogFilter() {Name = "Text", Extensions = {"txt"}});
            result = await dialog.ShowAsync();
            if (result != null)
            {
                Data = File.ReadAllText(result.First());
            }
        }

And here is the preservation:

 public async Task Save()
        {
            var dialog = new SaveFileDialog();
            dialog.Filters.Add(new FileDialogFilter() 
            {Name = "Text", Extensions = {"txt"}});
            var result = await dialog.ShowAsync(new MainWindow());
            if (result != null)
            {
                File.WriteAllText(result, Data);
            }
        }

In order for the application to run on Linux, you will have to add another dependency: Avalonia.Skia.Linux.Natives.

But unfortunately, not all assemblies will be able to display our window. Ubuntu (including Mate) does an excellent job on both the large (x64) architecture and the arm, but Raspbian obviously fails.


PS

The project is incredibly interesting and enjoyable. It has a lot of targeted platforms, including apple ones, we hope that soon it will work fine on all platforms.

Also popular now: