> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ss14.art/llms.txt
> Use this file to discover all available pages before exploring further.

# UI: руководство по выживанию

<Danger title="Неактуально">Информация, представленная на этой странице, скорее всего, устарела и может быть уже неактуальна.</Danger>

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

Итак, вы решили ступить на суровую пустошь, которой является написание кода UI и работа со Stylesheets?

Отлично!

Но прежде чем вы сможете начать ~~приносить в жертву щенков~~ создавать красивые UI с помощью нашей системы UI, вам сначала нужно узнать, как определить базовый макет UI, поэтому я рекомендую сначала прочитать [базовую документацию по пользовательскому интерфейсу](../robust-toolbox/user-interface).

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

<Note>
  Грань между жизнью и смертью определяется тем, на что мы готовы пойти.

  * Беар Гриллс
</Note>

Итак, ваш UI не требует магии стилей, но вы хотите, чтобы он выглядел как финальные макеты на нашей [странице figma](https://www.figma.com/file/KE5eKymegsLrsQdjZGbTIs/UI?node-id=0%3A188)?

Считайте, что вам повезло, потому что вы можете обойтись простым использованием `FancyWindow` вместо `DefaultWindow`!

Чтобы использовать его, просто измените:

```xml theme={null}
<DefaultWindow xmlns="https://spacestation14.io" ... >
  ...
</DefaultWindow>
```

На:

```xml theme={null}
<ui:FancyWindow xmlns="https://spacestation14.io" 
                xmlns:ui="clr-namespace:Content.Client.UserInterface"
                ... >
  ...
</ui:FancyWindow>
```

Возможно, вам придётся изменить некоторые отступы, но вы получите, буквально, красивое окно.

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

Делая свои первые шаги в пустоши UI, вы должны посмотреть, как смелые кодеры UI, пришедшие до вас, выжили в этой суровой среде.

Один из лучших примеров для изучения — [GravityGeneratorWindow](https://github.com/space-wizards-federation/space-station-14/blob/master/Content.Client/Gravity/UI/GravityGeneratorWindow.xaml).

Он содержит несколько базовых классов стилей, которые вы можете просто использовать для своего собственного UI, такие как: `StatusFieldTitle` для label и `OpenRight\OpenLeft` для кнопок.

Вы можете просто скопировать атрибут `StyleClasses="..."` в ваш компонент UI, чтобы использовать их.

Всякий раз, когда вы видите красивый UI, у которого есть компонент, стилизованный так, как вам нужно, и он написан на xaml, вы можете попробовать, поможет ли простое копирование этого.

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

<Note>
  Награды дикой природы и награды выжившего достаются тем, кто может копать глубоко и, в конечном счёте, тому парню, который может остаться в живых.

  * Беар Гриллс
</Note>

Вы использовали `FancyWindow` и ~~украли код~~ посмотрели на классы стилей из других UI, но это всё ещё недостаточно **красиво**?

Тогда у вас нет выбора, кроме как углубиться в коварные земли кода stylesheet. *\*звучит драматическая музыка\**

Взглянув на [StyleNano.cs](https://github.com/space-wizards-federation/space-station-14/tree/master/Content.Client/Stylesheets/StyleNano.cs), вы ~~исполнитесь страха~~ будете поражены его 1318 строками кода.

`StyleNano` в основном состоит из трёх вещей:

* Объявления переменных/констант
* Классы стилей, написанные трудночитаемым способом
* Классы стилей, написанные легкочитаемым способом

Теперь вы **хотите** писать новые классы стилей, используя легкочитаемый способ, но вам также нужно понимать трудночитаемый способ, чтобы вы могли смотреть на уже существующие классы стилей.

Вы можете спокойно пропустить все объявления переменных и констант, пока не дойдёте до следующих строк (сейчас это строка 465):

```cs theme={null}
    Stylesheet = new Stylesheet(BaseRules.Concat(new[]
    {
```

Это объявление stylesheet — то место, куда добавляются все классы стилей.

Здесь (и в аналогичной конструкции в [StyleBase.cs](https://github.com/space-wizards-federation/space-station-14/tree/master/Content.Client/Stylesheets/StyleBase.cs)) вы можете искать и добавлять классы стилей.

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

В настоящее время большинство классов стилей написаны трудночитаемым способом, как показано ниже:

<img src="https://mintcdn.com/meowmew/ziQKzpWpMFQkx6ZJ/images/ss14-by-example/hard-to-read-style.png?fit=max&auto=format&n=ziQKzpWpMFQkx6ZJ&q=85&s=4be1b081fd6057fe6188bae55114ea50" alt="hard-to-read-style.png" width="1159" height="244" data-path="images/ss14-by-example/hard-to-read-style.png" />

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

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

```csharp theme={null}
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.

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

<Note>
  Но дикая природа непредсказуема, всякое случается, и всегда, когда меньше всего этого ожидаешь.

  * Беар Гриллс
</Note>