18. Avalonia UI Real World (Sub-View Model Binding)
00:00 Начало работы над страницей действий при печати • Создание меню выбора и кнопок удаления. • Настройка свойств элементов в списке. • Стилизация кнопки переключения. 00:55 Создание новой модели просмотра страницы действий • Добавление нового свойства для выбранного элемента списка печати. • Необходимость добавления дополнительных элементов: описание, модели для печати, чертежи для печати, диапазон печати, белый и чёрный списки. 01:50 Настройка свойств модели просмотра • Добавление свойств: описание, диапазон печати чертежей, список исключений для рисования. • Использование логических значений для определения белого и чёрного списков. • Обновление текста при изменении логического значения. 04:39 Исправление проблем со стилизацией флажков • Уменьшение размеров флажков путём изменения радиуса. • Решение проблемы с наведением курсора мыши путём добавления прозрачного фона. • Корректировка размера шрифта и интервала между элементами. 09:19 Завершение настройки пользовательского интерфейса • Добавление подкладки к элементу управления вкладками. • Привязка выбранного элемента к новому свойству. • Проверка интервалов и отступов в сетке. 10:26 Настройка текстового поля • Добавляем запас в текстовом поле: 0, -10, 0 и 10. • Увеличиваем расстояние до заголовка и оставляем зазор внизу. • Избегаем использования определений строк для разных строк. 11:17 Создание списка и общих настроек • Печатаем строку списка или столбец списка. • Добавляем строку для общих настроек ниже списка. 11:38 Работа с панелью «Стек» • Размещаем панель «Стек» во вторую колонку. • Используем интервалы и добавляем этикетку с классом H2. 12:08 Настройка текстового блока • Настраиваем текстовый блок с полями 0, 10 и 0, -10. • Проверяем соответствие текста настройкам. 12:35 Создание сетки с двумя столбцами • Создаём сетку с определениями столбцов. • Исправляем первый столбец, чтобы он вписывался в пространство. 13:07 Определение строк и элементов • Создаём автоматические строки с пробелами 15 и без пробелов. • Добавляем метку и текстовое поле. 14:33 Привязка текста к названию работы • Привязываем текст к выбранному элементу печати «название работы». • Устанавливаем высоту прямоугольника и переносим текст. 15:33 Настройка печатных моделей и чертежей • Размещаем панель «стопка» горизонтально. • Устанавливаем флажки и метки для печати моделей и чертежей. 16:44 Оптимизация отображения • Размещаем флажки слева направо. • Уменьшаем размер шрифта на этикетке и флажке. 18:10 Привязка элементов списка печати • Проверяем привязку элементов списка печати. • Копируем и вставляем текст для печатных рисунков. 18:32 Добавление колонки с рисунками • Добавляем четвёртую колонку для рисунков. • Задаём свойства, применимые только к чертежам. 19:05 Настройка диапазона печати • Привязываем файл к диапазону печати. • Перемещаем элементы на панель стека. 20:27 Настройка списка исключений • Добавляем список исключений. • Переносим строку для отображения. • Вставляем интерполированную строку. 21:19 Установка кнопки переключения • Компиляция кода должна показать результат при выборе первого элемента. • Необходимо установить кнопку переключения внутри панели стека с горизонтальной ориентацией. • Кнопка переключения должна быть вверху и иметь привязку к выбранному пункту печати. 22:19 Настройка стиля кнопки переключения • По умолчанию кнопка переключения занимает всю высоту элемента управления. • Нужно выровнять верхнюю часть кнопки по вертикали. • Создаём стиль для кнопки переключения, копируя и вставляя стиль кнопок и называя его `toggle button`. 23:02 Предварительный просмотр и настройка • Внутри кнопки toggle пока будет только одна кнопка. • Внутри кнопки нет контента, только значок, который будет перемещаться влево и вправо. • Рассматривается возможность изменения стиля и перемещения содержимого как части кнопки переключения. 23:49 Тестирование кнопки переключения • Запускаем программу предварительного просмотра для тестирования кнопки переключения. • Проверяем работу кнопки в двух состояниях: проверено и не проверено. 24:06 Обсуждение возможностей переключателя • Обсуждаются возможности переключателя с тремя состояниями. • Переключатель имеет больше возможностей, чем предполагалось изначально. • Решение оставить оформление переключателя для отдельного видео из-за сложности задачи. 25:01 Обработка нового элемента и состояния по умолчанию • Необходимо обработать новый элемент и состояние по умолчанию, когда элемента нет. • Предлагается отключить элемент до выбора или изменить на описательный текст. • Вводная страница может содержать текст: «Не хотели бы вы создать новую цель?»
00:00 Начало работы над страницей действий при печати • Создание меню выбора и кнопок удаления. • Настройка свойств элементов в списке. • Стилизация кнопки переключения. 00:55 Создание новой модели просмотра страницы действий • Добавление нового свойства для выбранного элемента списка печати. • Необходимость добавления дополнительных элементов: описание, модели для печати, чертежи для печати, диапазон печати, белый и чёрный списки. 01:50 Настройка свойств модели просмотра • Добавление свойств: описание, диапазон печати чертежей, список исключений для рисования. • Использование логических значений для определения белого и чёрного списков. • Обновление текста при изменении логического значения. 04:39 Исправление проблем со стилизацией флажков • Уменьшение размеров флажков путём изменения радиуса. • Решение проблемы с наведением курсора мыши путём добавления прозрачного фона. • Корректировка размера шрифта и интервала между элементами. 09:19 Завершение настройки пользовательского интерфейса • Добавление подкладки к элементу управления вкладками. • Привязка выбранного элемента к новому свойству. • Проверка интервалов и отступов в сетке. 10:26 Настройка текстового поля • Добавляем запас в текстовом поле: 0, -10, 0 и 10. • Увеличиваем расстояние до заголовка и оставляем зазор внизу. • Избегаем использования определений строк для разных строк. 11:17 Создание списка и общих настроек • Печатаем строку списка или столбец списка. • Добавляем строку для общих настроек ниже списка. 11:38 Работа с панелью «Стек» • Размещаем панель «Стек» во вторую колонку. • Используем интервалы и добавляем этикетку с классом H2. 12:08 Настройка текстового блока • Настраиваем текстовый блок с полями 0, 10 и 0, -10. • Проверяем соответствие текста настройкам. 12:35 Создание сетки с двумя столбцами • Создаём сетку с определениями столбцов. • Исправляем первый столбец, чтобы он вписывался в пространство. 13:07 Определение строк и элементов • Создаём автоматические строки с пробелами 15 и без пробелов. • Добавляем метку и текстовое поле. 14:33 Привязка текста к названию работы • Привязываем текст к выбранному элементу печати «название работы». • Устанавливаем высоту прямоугольника и переносим текст. 15:33 Настройка печатных моделей и чертежей • Размещаем панель «стопка» горизонтально. • Устанавливаем флажки и метки для печати моделей и чертежей. 16:44 Оптимизация отображения • Размещаем флажки слева направо. • Уменьшаем размер шрифта на этикетке и флажке. 18:10 Привязка элементов списка печати • Проверяем привязку элементов списка печати. • Копируем и вставляем текст для печатных рисунков. 18:32 Добавление колонки с рисунками • Добавляем четвёртую колонку для рисунков. • Задаём свойства, применимые только к чертежам. 19:05 Настройка диапазона печати • Привязываем файл к диапазону печати. • Перемещаем элементы на панель стека. 20:27 Настройка списка исключений • Добавляем список исключений. • Переносим строку для отображения. • Вставляем интерполированную строку. 21:19 Установка кнопки переключения • Компиляция кода должна показать результат при выборе первого элемента. • Необходимо установить кнопку переключения внутри панели стека с горизонтальной ориентацией. • Кнопка переключения должна быть вверху и иметь привязку к выбранному пункту печати. 22:19 Настройка стиля кнопки переключения • По умолчанию кнопка переключения занимает всю высоту элемента управления. • Нужно выровнять верхнюю часть кнопки по вертикали. • Создаём стиль для кнопки переключения, копируя и вставляя стиль кнопок и называя его `toggle button`. 23:02 Предварительный просмотр и настройка • Внутри кнопки toggle пока будет только одна кнопка. • Внутри кнопки нет контента, только значок, который будет перемещаться влево и вправо. • Рассматривается возможность изменения стиля и перемещения содержимого как части кнопки переключения. 23:49 Тестирование кнопки переключения • Запускаем программу предварительного просмотра для тестирования кнопки переключения. • Проверяем работу кнопки в двух состояниях: проверено и не проверено. 24:06 Обсуждение возможностей переключателя • Обсуждаются возможности переключателя с тремя состояниями. • Переключатель имеет больше возможностей, чем предполагалось изначально. • Решение оставить оформление переключателя для отдельного видео из-за сложности задачи. 25:01 Обработка нового элемента и состояния по умолчанию • Необходимо обработать новый элемент и состояние по умолчанию, когда элемента нет. • Предлагается отключить элемент до выбора или изменить на описательный текст. • Вводная страница может содержать текст: «Не хотели бы вы создать новую цель?»