#21 AvaloniaUI - Простой список дел
00:02 Введение • Приветствие от Ронака и представление темы видео: создание простого списка дел в Avalonia. • Упоминание о необходимости базовых знаний по Avalonia, C#, XAML, MVVM и командам. • Рекомендация посмотреть предыдущее видео для создания нового проекта Avalonia. 01:08 Подготовка к реализации • Определение требований к приложению: просмотр списка дел, поиск пунктов, отметка и снятие галочек, добавление и удаление пунктов. • Запуск Visual Studio и создание нового проекта Avalonia .NET MVVM. • Выбор инструментария Community Toolkit вместо React UI. 03:02 Настройка модели • Добавление класса TodoItem в папку Models. • Настройка свойств элемента списка дел: «проверено» и «содержимое». • Использование модели для сохранения и восстановления списка дел. 04:26 Создание ViewModel • Создание класса TodoItemViewModel в папке ViewModels. • Наследование от базовой модели представления и добавление наблюдаемых свойств. • Добавление конструкторов для создания новых моделей. 06:44 Реализация основной модели просмотра • Удаление ненужного свойства «приветствия» в MainViewModel. • Добавление наблюдаемой коллекции TodoItems. • Реализация команд для добавления и удаления элементов. 10:21 Настройка вида окна • Изменение размера окна и добавление сетки. • Добавление текстового блока с заголовком «Мой список дел». • Использование элемента управления элементами для отображения списка дел. • Привязка текстового поля к содержимому нового элемента. 12:21 Добавление кнопок и привязок клавиш • Добавление кнопки для добавления элемента в список. • Настройка привязок клавиш для добавления элементов с клавиатуры. • Запуск приложения для проверки работы интерфейса. 14:08 Добавление нового элемента в список • Кнопка добавления нового элемента становится активной при вводе текста. • При нажатии на кнопку добавляется новый элемент в список. • Проблема: вместо содержимого элемента отображается название модели представления. 14:48 Настройка шаблона элемента • Определение шаблона элемента для управления items. • Использование флажка с привязкой к модели просмотра задач. • Добавление кнопки для удаления элемента рядом с флажком. 15:45 Тестирование функций • Добавление нескольких элементов и проверка работы жестов. • Возможность отмечать и снимать галочки, а также удалять элементы из списка. 16:28 Улучшение пользовательского интерфейса • Улучшение заголовка и содержимого кнопок. • Добавление значков вместо рекламы. • Подсветка элементов при наведении указателя. 16:52 Настройка стилей • Добавление стилей в XAML-файл. • Настройка веса шрифта, размера шрифта и отступов. • Изменение текстового блока «Мой список дел». 18:29 Стили для флажков и указателей • Настройка выравнивания флажков по горизонтали. • Установка фона указателей мыши. • Проверка изменений при запуске приложения. 19:13 Добавление значков • Использование значка пути для отображения значков. • Получение геометрии потока из Avalonia. • Вставка геометрии потока в ресурсы приложения. 22:07 Настройка значка удаления • Поиск и добавление значка удаления. • Настройка динамического ресурса данных для значка. • Изменение цвета переднего плана значка. 23:40 Тестирование значка удаления • Демонстрация работы значка удаления. • Удаление элемента из списка при нажатии на кнопку «Удалить». • Завершение видео с призывом к подписке и лайкам.
00:02 Введение • Приветствие от Ронака и представление темы видео: создание простого списка дел в Avalonia. • Упоминание о необходимости базовых знаний по Avalonia, C#, XAML, MVVM и командам. • Рекомендация посмотреть предыдущее видео для создания нового проекта Avalonia. 01:08 Подготовка к реализации • Определение требований к приложению: просмотр списка дел, поиск пунктов, отметка и снятие галочек, добавление и удаление пунктов. • Запуск Visual Studio и создание нового проекта Avalonia .NET MVVM. • Выбор инструментария Community Toolkit вместо React UI. 03:02 Настройка модели • Добавление класса TodoItem в папку Models. • Настройка свойств элемента списка дел: «проверено» и «содержимое». • Использование модели для сохранения и восстановления списка дел. 04:26 Создание ViewModel • Создание класса TodoItemViewModel в папке ViewModels. • Наследование от базовой модели представления и добавление наблюдаемых свойств. • Добавление конструкторов для создания новых моделей. 06:44 Реализация основной модели просмотра • Удаление ненужного свойства «приветствия» в MainViewModel. • Добавление наблюдаемой коллекции TodoItems. • Реализация команд для добавления и удаления элементов. 10:21 Настройка вида окна • Изменение размера окна и добавление сетки. • Добавление текстового блока с заголовком «Мой список дел». • Использование элемента управления элементами для отображения списка дел. • Привязка текстового поля к содержимому нового элемента. 12:21 Добавление кнопок и привязок клавиш • Добавление кнопки для добавления элемента в список. • Настройка привязок клавиш для добавления элементов с клавиатуры. • Запуск приложения для проверки работы интерфейса. 14:08 Добавление нового элемента в список • Кнопка добавления нового элемента становится активной при вводе текста. • При нажатии на кнопку добавляется новый элемент в список. • Проблема: вместо содержимого элемента отображается название модели представления. 14:48 Настройка шаблона элемента • Определение шаблона элемента для управления items. • Использование флажка с привязкой к модели просмотра задач. • Добавление кнопки для удаления элемента рядом с флажком. 15:45 Тестирование функций • Добавление нескольких элементов и проверка работы жестов. • Возможность отмечать и снимать галочки, а также удалять элементы из списка. 16:28 Улучшение пользовательского интерфейса • Улучшение заголовка и содержимого кнопок. • Добавление значков вместо рекламы. • Подсветка элементов при наведении указателя. 16:52 Настройка стилей • Добавление стилей в XAML-файл. • Настройка веса шрифта, размера шрифта и отступов. • Изменение текстового блока «Мой список дел». 18:29 Стили для флажков и указателей • Настройка выравнивания флажков по горизонтали. • Установка фона указателей мыши. • Проверка изменений при запуске приложения. 19:13 Добавление значков • Использование значка пути для отображения значков. • Получение геометрии потока из Avalonia. • Вставка геометрии потока в ресурсы приложения. 22:07 Настройка значка удаления • Поиск и добавление значка удаления. • Настройка динамического ресурса данных для значка. • Изменение цвета переднего плана значка. 23:40 Тестирование значка удаления • Демонстрация работы значка удаления. • Удаление элемента из списка при нажатии на кнопку «Удалить». • Завершение видео с призывом к подписке и лайкам.