Стиль UI с UI Builder
В UI Builder вы можете стилизовать элемент с помощью встроенных стилей или селекторов USS. Встроенные стили обычно используются для одноразового использования или экспериментальных целей, в то время как управление стилями через таблицы стилей, как правило, проще и эффективнее. Вы можете извлечь встроенные стили в класс USS. Вы также можете управлять таблицами стилей и селекторами USS в UI Builder.
Установить встроенные стили для элементов
Вы можете установить встроенные стили для элементов в разделе Встроенные стили в окне Inspector элемента.
Поля стиля, которые отображаются жирным шрифтом с сплошной линией слева от метки поля представляют свойства стиля, которые уже установлены или переопределено. Важно следить за этим переопределено свойства стиля, поскольку они всегда переопределяют одноимённое свойство из StyleSheet или значение по умолчанию из C#. Чтобы сбросить или удалить override для свойства стиля, щелкните правой кнопкой мыши поле стиля и выберите Отменить.
Примечание: Вы не можете использовать встроенный стиль для стиля псевдоклассы или элементы только для чтения.
Управление таблицей стилей
Чтобы добавить таблицу стилей, воспользуйтесь выпадающим меню + и выберите один из следующих вариантов:
- Create New USS: Открывает диалог Save File Dialog для создания новой таблицы стилей в вашем проекте.
- Add Existing USS: Открывает диалог Open File Dialog для добавления существующей таблицы стилей в Документ UI.
Чтобы удалить таблицу стилей из активного Документа UI, щелкните правой кнопкой мыши таблицу стилей и выберите Remove USS.
Чтобы активировать таблицу стилей, щёлкните её правой кнопкой мыши и выберите Сделать активным USS. Активная таблица стилей Активный StyleSheet отображается полужирным шрифтом.
При редактировании поддокументов таблицы стилей, принадлежащие родительским документам, отображаются в темном цвете и доступны только для чтения.
Примечание: Вы можете добавить комментарии в USS файл с помощью текстового редактора так же, как вы делаете с файлом CSS файл. Однако, если вы откроете USS файл в UI Builder, комментарии удаляются, как только вы сохраните USS файл из UI Builder.
Создание селекторов USS
Любые новые селекторы USS создаются в окне StyleSheets. Новый селектор класса можно создать и в StyleSheets в окне Inspector. Новый селектор всегда добавляется в раздел Активный StyleSheet.
Чтобы создать новый селектор в окне StyleSheets:
-
В окне StyleSheets нажмите в поле Добавить новый селектор…. Это откроет окно синтаксиса селекторов USS вверху окна Видовой проем, как показано на рисунке ниже:
USS Селекторы Введите селектор с правильным синтаксисом. Например, селектор класса должен начинаться с
..Нажмите клавишу Enter.
В окне StyleSheets выберите вновь созданный селектор.
В окне Inspector селектора установите желаемые стили для селектора.
Чтобы создать новый селектор класса в окне Inspector элемента:
В окне Hierarchy выберите элемент.
В окне Inspector введите селектор класса в Список классов стилей текстовое поле.
-
Выбрать Добавить класс стиля в список. Жёлтая метка класса появляется в Список классов стилей.
StyleSheet раздел Inspector Если жёлтая метка стилевого класса выглядит блёклой, значит, такого селектора нет в прикреплённых StyleSheet. Двойным щелчком по ней можно создать новый селектор класса. Если селектор уже существует, двойной щелчок откроет окно Inspector для него.
Манипулирование селекторами USS
Чтобы скопировать, вставить, дублировать, переименовать или удалить один или несколько селекторов USS:
- В окне StyleSheets выберите группу.
- Щелкните группу правой кнопкой мыши и выберите необходимое действие.
Тип: Вы можете скопировать и вставить USS между UI Builder’s StyleSheets окно и текстовый редактор.
Сопоставление стилевого класса USS с элементами
Вы можете сопоставлять классы USS с элементами. Например, если у вас есть следующий стиль USS:
Чтобы сопоставить стилевой класс USS с элементами, сделайте одно из следующего:
- Перетащите метку класса стиля, например
, на элемент в любом из Hierarchy или Canvas. - Введите имя селектора в поле StyleSheet > Список классов стилей в окне Inspector элемента, а затем выберите Добавить класс стилей в список:
