Руководство по выживанию в UI

Неактуально

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

Сначала научитесь ходить, прежде чем бегать

Итак, вы решили взяться за суровую пустошь программирования UI и работы со стилевыми листами?

Отлично!

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

Быстро и грязно (использование FancyWindow)

Quote

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

  • Bear Grylls

Значит, вашему 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 для меток и OpenRight\OpenLeft для кнопок.

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

Когда вы видите навороченный UI с компонентом, оформленным так, как вам нужно, и написанным на XAML, вы можете попробовать просто скопировать его и посмотреть, сработает ли это.

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

Quote

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

  • Bear Grylls

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

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

Взглянув на StyleNano.cs, вы вселите в себя страх ошеломитесь его 1318 строками кода.

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

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

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

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

    Stylesheet = new Stylesheet(BaseRules.Concat(new[]
    {

В этом объявлении стилевого листа находятся все стилевые классы.

Здесь (и в аналогичной конструкции в StyleBase.cs) вы можете искать и добавлять стилевые классы.

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

Сейчас большинство стилевых классов написано трудночитаемым способом, вот так: hard-to-read-style.png

  1. Новые стилевые классы создаются путём создания экземпляра класса StyleRule
  2. Вы указываете тип элемента управления, для которого предназначен класс, создавая экземпляр SelectorElement с типом класса элемента управления
  3. Затем вы определяете имена стилевых классов как массив строк (StyleClassWindowCloseButton — это просто строковая константа)
  4. Четвёртый параметр конструктора SelectorElement — это псевдокласс, который можно использовать для таких вещей, как состояния наведения. Он может быть null.
  5. Второй параметр конструктора StyleRule — это массив свойств Style. Конструктор 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")) присваивает значение свойству, где первый аргумент — это свойство, а второй аргумент — значение. В данном случае он задаёт цвет фона для контейнера-панели.

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

Quote

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

  • Bear Grylls

Subpages