Перейти к основному содержанию
Информация, представленная на этой странице, скорее всего, устарела и может быть уже неактуальна.

​
Учимся ходить, прежде чем бежать

Итак, вы решили ступить на суровую пустошь, которой является написание кода UI и работа со Stylesheets? Отлично! Но прежде чем вы сможете начать приносить в жертву щенков создавать красивые UI с помощью нашей системы UI, вам сначала нужно узнать, как определить базовый макет UI, поэтому я рекомендую сначала прочитать базовую документацию по пользовательскому интерфейсу.

​
Быстро и грязно (используя FancyWindow)

Грань между жизнью и смертью определяется тем, на что мы готовы пойти.
  • Беар Гриллс
Итак, ваш UI не требует магии стилей, но вы хотите, чтобы он выглядел как финальные макеты на нашей странице figma? Считайте, что вам повезло, потому что вы можете обойтись простым использованием FancyWindow вместо DefaultWindow! Чтобы использовать его, просто измените: 
<DefaultWindow xmlns="https://spacestation14.io" ... >
  ...
</DefaultWindow>
На: 
<ui:FancyWindow xmlns="https://spacestation14.io" 
                xmlns:ui="clr-namespace:Content.Client.UserInterface"
                ... >
  ...
</ui:FancyWindow>
Возможно, вам придётся изменить некоторые отступы, но вы получите, буквально, красивое окно.

​
Учимся у выживших

Делая свои первые шаги в пустоши UI, вы должны посмотреть, как смелые кодеры UI, пришедшие до вас, выжили в этой суровой среде. Один из лучших примеров для изучения — GravityGeneratorWindow. Он содержит несколько базовых классов стилей, которые вы можете просто использовать для своего собственного UI, такие как: StatusFieldTitle для label и OpenRight\OpenLeft для кнопок. Вы можете просто скопировать атрибут StyleClasses="..." в ваш компонент UI, чтобы использовать их. Всякий раз, когда вы видите красивый UI, у которого есть компонент, стилизованный так, как вам нужно, и он написан на xaml, вы можете попробовать, поможет ли простое копирование этого.

​
Копаем глубже

Награды дикой природы и награды выжившего достаются тем, кто может копать глубоко и, в конечном счёте, тому парню, который может остаться в живых.
  • Беар Гриллс
Вы использовали FancyWindow и украли код посмотрели на классы стилей из других UI, но это всё ещё недостаточно красиво? Тогда у вас нет выбора, кроме как углубиться в коварные земли кода stylesheet. *звучит драматическая музыка* Взглянув на StyleNano.cs, вы исполнитесь страха будете поражены его 1318 строками кода. StyleNano в основном состоит из трёх вещей:
  • Объявления переменных/констант
  • Классы стилей, написанные трудночитаемым способом
  • Классы стилей, написанные легкочитаемым способом
Теперь вы хотите писать новые классы стилей, используя легкочитаемый способ, но вам также нужно понимать трудночитаемый способ, чтобы вы могли смотреть на уже существующие классы стилей. Вы можете спокойно пропустить все объявления переменных и констант, пока не дойдёте до следующих строк (сейчас это строка 465): 
    Stylesheet = new Stylesheet(BaseRules.Concat(new[]
    {
Это объявление stylesheet — то место, куда добавляются все классы стилей. Здесь (и в аналогичной конструкции в StyleBase.cs) вы можете искать и добавлять классы стилей.

​
Трудночитаемый способ объявления класса стиля

В настоящее время большинство классов стилей написаны трудночитаемым способом, как показано ниже: hard-to-read-style.png
  1. Новые классы стилей создаются путём создания экземпляра класса StyleRule
  2. Вы указываете тип элемента управления, для которого предназначен класс, создавая экземпляр SelectorElement с типом класса элемента управления
  3. Затем вы определяете имена классов стилей как массив строк (StyleClassWindowCloseButton — это просто строковая константа)
  4. Четвёртый параметр конструктора SelectorElement — это псевдокласс, который вы можете использовать для таких вещей, как состояния наведения. Может быть null.
  5. Второй параметр конструктора StyleRule — это массив свойств стиля. Конструктор StyleProperty принимает имя свойства в виде строки (обычно из строковой константы внутри элемента управления, который вы пытаетесь стилизовать) и значение, которое вы хотите установить для этого свойства.

​
Легкочитаемый способ объявления класса стиля

Element<PanelContainer>().Class("BackgroundDark")
                    .Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat(Color.FromHex("#25252A"))),
  1. Element<PanelContainer> и .Class("BackgroundDark") указывают тип элемента управления и класс, к которому вы хотите применить стиль.
  2. .Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat(Color.FromHex("#25252A")) присваивает значение свойству, где первый аргумент — это свойство, а второй — значение. В данном случае он устанавливает цвет фона для panel container.

​
Скрытые опасности

Но дикая природа непредсказуема, всякое случается, и всегда, когда меньше всего этого ожидаешь.
  • Беар Гриллс
Последнее изменение 21 июня 2026 г.