Начало работы с Контролами Eremex для Avalonia UI¶

В этом руководстве демонстрируется, как создать новое приложение Avalonia UI в Visual Studio 2022 с помощью контролов Eremex Avalonia. В нем показан регистрационный код темы Eremex, необходимый для отображения контролов.

В этом руководстве Eremex Контрол Data Grid добавлен в окно и привязан к источнику объекта. Источником объекта в этом примере является коллекция бизнес-объектов, реализованных с использованием CommunityToolkit.Библиотека Mvvm.

gs-run-app

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

В этом руководстве используется Eremex Avalonia App Template для создания нового проекта. Этот шаблон создает новый проект, добавляет библиотеку контролов Eremex в проект и регистрирует тему Eremex, необходимую для отображения контролов.

Вы также можете использовать стандартные шаблоны Avalonia UI для создания проектов. Смотрите следующий раздел для получения дополнительной информации: Используйте стандартные шаблоны Avalonia UI для создания нового проекта с контролами Eremex

1.1 Установка шаблонов Eremex Avalonia¶

Выполните следующую команду:

dotnet new install Eremex.Avalonia.Templates

Установленные шаблоны включают в себя:

Eremex.avalonia.app¶

Этот шаблон приложения создает пустой проект Avalonia UI, который ссылается на библиотеку контролов Eremex. Этот шаблон выполняет следующие действия:

Добавляет пакеты Nuget Eremex в проект:
- Eremex.Avalonia.Controls - Содержит контролы и библиотеки Eremex.
- Eremex.Avalonia.Themes.DeltaDesign - Содержит тему DeltaDesign для контролов Eremex.
- Использует класс MxWindow в качестве главного окна проекта. MxWindow обеспечивает поддержку тем оформления Eremex.
- Регистрирует тему Eremex DeltaDesign.
Записка

Если тема Eremex в вашем приложении не зарегистрирована, контролы Eremex отображаются пустыми.

Eremex.avalonia.mvvm¶

Этот шаблон приложения создает проект Avalonia UI с поддержкой MVVM, который ссылается на библиотеку контролов Eremex. Шаблон разделяет код на представление (MainWindow) и ViewModel (MainWindowViewModel). Остальные функции этого шаблона такие же, как и у шаблона eremex.avalonia.app.

Eremex.avalonia.window¶

Шаблон, который создает новое окно Avalonia на основе MxWindow. Этот шаблон создает только два файла, которые определяют окно: Window.axaml и Window.axaml.cs.

1.2 Создание нового проекта¶

Перейдите в папку, в которой вам нужно создать проект. Используйте dotnet новый Eremex.avalonia.mvvm команда для создания нового проекта, поддерживающего MVVM. Чтобы указать имя для проекта, используйте -n name командная опция.

Следующая команда создает новый проект AvaloniaApplication1.

dotnet new eremex.avalonia.mvvm -n AvaloniaApplication1

Откройте созданный проект в Visual Studio.

1.3. Выберите светлый или темный вариант темы¶

Шаблоны приложений 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, определенной в модели представления.

2. Определите данные для 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;
    }
}

3. Добавление пространств имен контролов 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"`

4. Добавьте 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 определяет видимость окна поиска, которое позволяет пользователю быстро находить строки таблицы по содержащимся в них значениям.

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

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

gs-run-app

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