Приступайте к работе с Контролами Eremex для Avalonia UI в ALT Linux¶

В этом руководстве вы узнаете о создании приложения Avalonia UI с контролами Eremex в ALT Linux. Во-первых, мы настроим среду для разработки .NET приложений, а затем создадим проект с помощью контрола EMX DataGrid.

1. Предварительные условия¶

Убедитесь, что .NET SDK и код Visual Studio установлены в ALT Linux. В следующих разделах показано, как установить их из командной линии.

1.1 Установка .NET SDK¶

Для разработки .NET приложений в ALT Linux установите пакет .NET SDK. Например, чтобы установить .NET 8 SDK, выполните в терминале следующую команду:

sudo apt-get install dotnet-sdk-8.0

1.2 Установка кода Visual Studio и расширения C# Dev Kit¶

Инструкции по установке VS Code в ALT Linux приведены по адресу: Education applications: VS Code.

В качестве альтернативы вы можете загрузить пакет VS Code RPM со страницы Download Visual Studio Code, а затем установить его с помощью следующей команды:

sudo apt-get install code_xxx.rpm

(Замените code_xxx.rpm на фактическое название загруженного пакета.)

Запустите VS Code и установите надстройку C# Dev Kit на вкладке "Расширения".

get-started-alt-vscode-cDevkit

2. Установите шаблоны проектов Eremex¶

Библиотека контролов EMX включает в себя коллекцию шаблонов проектов , которые помогут вам создавать новые проекты Avalonia с контролами EMX. Установите эти шаблоны, выполнив следующую команду в терминале:

dotnet new install Eremex.Avalonia.Templates

3. Создайте новый проект¶

Перейдите в каталог, в котором вы хотите создать проект. Выполните приведенную ниже команду, чтобы создать проект с поддержкой MVVM с именем AvaloniaApplication1 в соответствии с шаблоном проекта eremex.avalonia.mvvm.

dotnet new eremex.avalonia.mvvm -n AvaloniaApplication1

Если вы сталкиваетесь с предупреждениями о сертификатах для nuget.org, вам следует вручную добавить необходимые корневые сертификаты в свою ОС. Чтобы временно обойти проверку сертификата, выполните следующую команду:

DOTNET_NUGET_SIGNATURE_VERIFICATION=false dotnet new eremex.avalonia.mvvm -n AvaloniaApplication1

Созданный проект включает в себя:

Все необходимые Eremex контролирует ссылки на пакеты
Тема 'DeltaDesign' рисуйте зарегистрирована в App.axaml.
MxWindow используется в качестве главного окна приложения. MxWindow - это определенное окно, которое рисует свои элементы (фон, границу и панель заголовка) в соответствии с текущей темой Eremex.

4. Откройте проект в VS Code¶

В VS Code откройте сгенерированную папку AvaloniaApplication1.

Перейдите на вкладку Run and Debug (Ctrl+Shift+D) и нажмите кнопку Run and Debug:

get-started-alt-vscode-runanddebug

Выберите c# в качестве среды отладки:

get-started-alt-vscode-csharp-debugger

Выберите C#: Launch Startup Project:

get-started-alt-vscode-launch-conf

Выберите AvaloniaApplication1.csproj в качестве стартового проекта:

get-started-alt-vscode-startup-project

Затем VS Code создаст и запустит проект.

get-started-alt-empty-app

Вы также можете запустить проект из терминала, используя следующую команду:

dotnet run

5. Выберите светлый или темный вариант темы оформления¶

Шаблоны приложений Eremex автоматически добавляют регистрационный код для темы DeltaDesign в созданный проект. Откройте файл App.axaml, чтобы найти этот код в определении объекта Application.

Тема DeltaDesign поддерживает варианты тем Light и Dark. Используйте свойство Application.RequestedThemeVariant, чтобы указать требуемый вариант темы.

<Application xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="AvaloniaApplication1.App"
    xmlns:local="using:AvaloniaApplication1"
    xmlns:theme=
    "clr-namespace:Eremex.AvaloniaUI.Themes.DeltaDesign;assembly=Eremex.Avalonia.Themes.DeltaDesign"
    RequestedThemeVariant="Light">
  <!-- "Default" - The application's theme variant is defined by the system setting. 
       "Light" - Enables the Light theme variant.
       "Dark" - Enables the Dark theme variant. 
  -->
    <!-- .... -->
    <Application.Styles>
        <theme:DeltaDesignTheme/>
        <!-- .... -->
    </Application.Styles>
</Application>

В разделах ниже мы добавим контрол Eremex DataGridControl в представление и привяжем его к коллекции Employees, определенной в модели представления.

6. Определение данных для Data Grid¶

Откройте модель основного представления (MainWindowViewModel.cs) и определите коллекцию Employees, к которой будет привязана Data Grid.

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;

namespace AvaloniaApplication1.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
    [ObservableProperty]
    IList<EmployeeInfo> employees;

    public MainWindowViewModel()
    {
        Employees = new List<EmployeeInfo>
        {
            new EmployeeInfo("Alex", "Smith", new DateTime(1990, 1, 1)),
            new EmployeeInfo("Samantha", "Brown", new DateTime(1988, 2, 5)),
            new EmployeeInfo("Nick", "Morris", new DateTime(2000, 8, 25)),
            new EmployeeInfo("Julia", "Lee", new DateTime(2005, 12, 3))
        };
    }
}

public partial class EmployeeInfo : ObservableObject
{
    [ObservableProperty]
    public string firstName;
    [ObservableProperty]
    public string lastName;
    [ObservableProperty]
    public DateTime birthDate;
    public EmployeeInfo(string firstName, string lastName, DateTime birthDate)
    {
        FirstName = firstName;
        LastName = lastName;
        BirthDate = birthDate;
    }
}

7. Добавление пространств имен контролов Eremex Avalonia в XAML¶

Прежде чем вы определите контролы Eremex Avalonia в XAML, сначала объявите пространства имен, содержащие эти контролы. Чтобы использовать DataGridControl в главном окне, добавьте следующее пространство имен в файл MainWindow.axaml:

<mx:MxWindow 
...
xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
>

Список пространств имен для контролов Eremex и вспомогательных классов приведен в таблице ниже:

Продукт/Классы	Пространство имен
Data Grid	`xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"`
Tree List и Tree View	`xmlns:mxtl="https://schemas.eremexcontrols.net/avalonia/treelist"`
Редакторы и Вспомогательный контрол	`xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"`
Графики	`xmlns:mxc="https://schemas.eremexcontrols.net/avalonia/charts"`
Property Grid	`xmlns:mxpg="https://schemas.eremexcontrols.net/avalonia/propertygrid"`
Лента	`xmlns:mxr="https://schemas.eremexcontrols.net/avalonia/ribbon"`
Панели инструментов и меню	`xmlns:mxb="https://schemas.eremexcontrols.net/avalonia/bars"`
Докинг	`xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"`
Graphics3DControl	`xmlns:mx3d="https://schemas.eremexcontrols.net/avalonia/controls3d"`
Общие вспомогательные классы	`xmlns:mx="https://schemas.eremexcontrols.net/avalonia"`

8. Добавьте Data Grid в XAML¶

В файле MainWindow.axaml определите DataGridControl и привяжите его к коллекции Employees.

<mx:MxWindow xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaApplication1.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
        xmlns:mxdg="https://schemas.eremexcontrols.net/avalonia/datagrid"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaApplication1.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/EMXControls.ico"
        Title="AvaloniaApplication1">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, 
             set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <mxdg:DataGridControl AutoGenerateColumns="True" ItemsSource="{Binding Employees}"
     SearchPanelDisplayMode="Always"/>

</mx:MxWindow>

Опция DataGridControl.AutoGenerateColumns включена для автоматического создания столбцов из публичных свойств связанного источника объекта.

Свойство DataGridControl.SearchPanelDisplayMode определяет видимость окна поиска, которое позволяет пользователю быстро находить строки таблицы по содержащимся в них значениям.

9. Запустите приложение¶

Теперь вы можете запустить приложение (нажмите клавишу F5). При запуске приложения появляется окно с полнофункциональным контролом Data Grid. Сетка позволяет вам сортировать и группировать данные "из коробки". Чтобы найти значения ячеек, введите текст на панели поиска.

gs-run-app

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.