#18 C# WPF UI - Настраиваемый стиль полос прокрутки

00:08 Введение и цель видео • Настройка внешнего вида полос прокрутки в WPF. • Использование тёмной темы Windows для демонстрации проблемы. • Создание собственного стиля полосы прокрутки. 00:43 Метод работы • Разбиение задачи на части и сборка обратно для лучшего понимания. • Создание нового стиля scroll и добавление его в XAML. 01:49 Доступ к стилям • Поиск стилей в Visual Studio через «Инструменты проектирования» → «Системные темы» → «WPF». • Выбор темы Aero 2 и открытие её кода. 02:49 Копирование стиля • Поиск стиля полосы прокрутки и копирование его целиком. • Вставка стиля в XAML и проверка его работы. 04:04 Удаление ненужных стилей • Удаление статического фона, границы и других ненужных стилей. • Изменение цвета стрелок на красный для лучшего визуального эффекта. 09:28 Настройка ширины полосы прокрутки • Изменение ширины полосы прокрутки с помощью ключа ширины вертикальной полосы прокрутки. • Привязка минимальной ширины к фактической ширине. 11:22 Работа с шаблоном • Настройка шаблона полосы прокрутки и триггеров. • Удаление ненужных триггеров для упрощения стилизации. 13:23 Определение строк • Определение трёх строк в шаблоне: верхняя и нижняя кнопки со стрелками, расширяющаяся строка. • Удаление границы и изменение фона для лучшего визуального эффекта. 14:31 Удаление стрелок вверх и вниз • Удаление кнопок выравнивания по левому и правому краю. • Удаление стрелок вверх и вниз для оставления только полосы прокрутки. • Удаление определения строки для устранения пробелов. 15:12 Работа с дорожкой и кнопками • Удаление нижней части полосы прокрутки для изменения порядка кнопок. • Изменение направления реверса на false для изменения порядка кнопок. 17:09 Стилизация полосы прокрутки • Установка нулевой прозрачности для кнопок повтора. • Стилизация основной полосы прокрутки как прямоугольника со скруглёнными углами. • Добавление отступов со всех сторон. 18:20 Настройка ширины и выравнивания • Установка ширины дорожки равной 8 пикселям. • Выравнивание полосы прокрутки по центру по горизонтали. • Добавление рамки и отступов. 20:49 Работа с фоном и полями • Изменение фона сетки на прозрачный. • Добавление отрицательного поля для полосы прокрутки. • Настройка отступов для предотвращения врезания полосы прокрутки в текст. 24:22 Стилизация горизонтальной полосы прокрутки • Переопределение шаблона для горизонтальной полосы прокрутки. • Удаление триггеров и границ. • Стилизация бегунка. 26:40 Сравнение стилей вертикальной и горизонтальной полос прокрутки • Анализ стилей бегунка вертикальной и горизонтальной полос прокрутки. • Обнаружение идентичности стилей, кроме команды. • Оптимизация стиля для обоих типов полос прокрутки. 28:55 Настройка цвета бегунка • Изменение заливки бегунка на красную. • Настройка цвета при наведении курсора и перетаскивании. • Исправление ошибок с отступами. 29:43 Настройка полосы прокрутки • Добавление трёхцветной полосы прокрутки: красная, синяя и зелёная. • Изменение стиля полосы при наведении и перетаскивании. 30:16 Скругление углов и прозрачность • Скругление углов полосы прокрутки. • Настройка прозрачности: 0,3 в обычном состоянии, 1 при наведении. 31:14 Радиус скругления и цвет • Добавление радиуса скругления углов, равного ширине. • Изменение цвета полосы на полупрозрачный синий. 32:28 Плавная анимация • Настройка плавной анимации появления полосы при наведении. • Использование триггера события для анимации. 35:11 Отступы и проверка работы • Добавление отступов для списка чатов. • Проверка работы горизонтальной полосы прокрутки. 40:07 Проблемы с видимостью треков • Обнаружение проблемы с видимостью треков горизонтальной полосы прокрутки. • Решение проблемы путём установки нулевой прозрачности для треков. 42:42 Завершение работы с полосой прокрутки • Анонс следующего видео: создание выпадающего меню. • Предложение зрителям предложить темы для будущих видео. 43:46 Возможные темы для будущих видео • Добавление изображений в сообщения чата. • Создание всплывающего окна с эмодзи. • Добавление панели поиска и выделения текста. • Создание страницы настроек.

Иконка канала C# WPF Avalonia UI уголок
2 подписчика
12+
1 просмотр
4 дня назад
12+
1 просмотр
4 дня назад

00:08 Введение и цель видео • Настройка внешнего вида полос прокрутки в WPF. • Использование тёмной темы Windows для демонстрации проблемы. • Создание собственного стиля полосы прокрутки. 00:43 Метод работы • Разбиение задачи на части и сборка обратно для лучшего понимания. • Создание нового стиля scroll и добавление его в XAML. 01:49 Доступ к стилям • Поиск стилей в Visual Studio через «Инструменты проектирования» → «Системные темы» → «WPF». • Выбор темы Aero 2 и открытие её кода. 02:49 Копирование стиля • Поиск стиля полосы прокрутки и копирование его целиком. • Вставка стиля в XAML и проверка его работы. 04:04 Удаление ненужных стилей • Удаление статического фона, границы и других ненужных стилей. • Изменение цвета стрелок на красный для лучшего визуального эффекта. 09:28 Настройка ширины полосы прокрутки • Изменение ширины полосы прокрутки с помощью ключа ширины вертикальной полосы прокрутки. • Привязка минимальной ширины к фактической ширине. 11:22 Работа с шаблоном • Настройка шаблона полосы прокрутки и триггеров. • Удаление ненужных триггеров для упрощения стилизации. 13:23 Определение строк • Определение трёх строк в шаблоне: верхняя и нижняя кнопки со стрелками, расширяющаяся строка. • Удаление границы и изменение фона для лучшего визуального эффекта. 14:31 Удаление стрелок вверх и вниз • Удаление кнопок выравнивания по левому и правому краю. • Удаление стрелок вверх и вниз для оставления только полосы прокрутки. • Удаление определения строки для устранения пробелов. 15:12 Работа с дорожкой и кнопками • Удаление нижней части полосы прокрутки для изменения порядка кнопок. • Изменение направления реверса на false для изменения порядка кнопок. 17:09 Стилизация полосы прокрутки • Установка нулевой прозрачности для кнопок повтора. • Стилизация основной полосы прокрутки как прямоугольника со скруглёнными углами. • Добавление отступов со всех сторон. 18:20 Настройка ширины и выравнивания • Установка ширины дорожки равной 8 пикселям. • Выравнивание полосы прокрутки по центру по горизонтали. • Добавление рамки и отступов. 20:49 Работа с фоном и полями • Изменение фона сетки на прозрачный. • Добавление отрицательного поля для полосы прокрутки. • Настройка отступов для предотвращения врезания полосы прокрутки в текст. 24:22 Стилизация горизонтальной полосы прокрутки • Переопределение шаблона для горизонтальной полосы прокрутки. • Удаление триггеров и границ. • Стилизация бегунка. 26:40 Сравнение стилей вертикальной и горизонтальной полос прокрутки • Анализ стилей бегунка вертикальной и горизонтальной полос прокрутки. • Обнаружение идентичности стилей, кроме команды. • Оптимизация стиля для обоих типов полос прокрутки. 28:55 Настройка цвета бегунка • Изменение заливки бегунка на красную. • Настройка цвета при наведении курсора и перетаскивании. • Исправление ошибок с отступами. 29:43 Настройка полосы прокрутки • Добавление трёхцветной полосы прокрутки: красная, синяя и зелёная. • Изменение стиля полосы при наведении и перетаскивании. 30:16 Скругление углов и прозрачность • Скругление углов полосы прокрутки. • Настройка прозрачности: 0,3 в обычном состоянии, 1 при наведении. 31:14 Радиус скругления и цвет • Добавление радиуса скругления углов, равного ширине. • Изменение цвета полосы на полупрозрачный синий. 32:28 Плавная анимация • Настройка плавной анимации появления полосы при наведении. • Использование триггера события для анимации. 35:11 Отступы и проверка работы • Добавление отступов для списка чатов. • Проверка работы горизонтальной полосы прокрутки. 40:07 Проблемы с видимостью треков • Обнаружение проблемы с видимостью треков горизонтальной полосы прокрутки. • Решение проблемы путём установки нулевой прозрачности для треков. 42:42 Завершение работы с полосой прокрутки • Анонс следующего видео: создание выпадающего меню. • Предложение зрителям предложить темы для будущих видео. 43:46 Возможные темы для будущих видео • Добавление изображений в сообщения чата. • Создание всплывающего окна с эмодзи. • Добавление панели поиска и выделения текста. • Создание страницы настроек.

, чтобы оставлять комментарии