Visual UI Designer

Содержание:

Структура интерфейса дизайнера

Интерфейс дизайнера UI включает несколько элементов: окно визуального представления UI (1), окно текстового представления UI (2), панель управления (3), панель инструментов VisualStudio стандартного вида(4), содержащую шаблоны элементов управления, и панель Properties, которая отображает свойства выбранного активного объекта UI.

ui-designer-1

Окно визуального представления содержки макет экрана мобильного устройства с размещенными на нем элементами UI (controls). Кроме того, визуальное представление поддерживает технологию Drag-and-Drop, т.е., шаблоны графических элементов можно перетаскивать мышью как внутри окна визуального представления, так и брать с панели инструментов. С помощью нажатия клавиш Tab или Shift+Tab можно перемещаться по дереву графических элементов, представляющему создаваемый интерфейс, выбирая следующий или предыдущий элемент в дереве соответственно.

Окно текстового представления содержит xml-текст специального формата (который, собственно, и есть UbiqML) с описанием структуры дерева графических элементов интерфейса и свойств каждого объекта. Можно прямо редактировать xml-разметку в этом окне, но нужно делать это с особой осторожностью, т.к. некорретная xml-разметка приведет к тому, что вы не сможете использовать визуальное представление и ваше приложение не сможет корректно использовать этот UbiqML-ресурс.

На панели управления располагаются следующие элементы:

  • Кнопки и поле изменение масштаба – иногда макет экрана c разметкой может не поместиться в вашу раскладку окон в VisualStudio; в таком случае вы можете, поменяв масштаб, добиться полной видимости макета экрана с разметкой.
  • Размер макета экрана ‑ с помощью этого элемента вы можете изменить видимый размер макета экрана, чтобы посмотреть, как интерфейс вашего приложения будет выглядеть на устройствах с различными разрешениями экрана.
  • Кнопка поворота макетаэкрана ‑ с помощью этого элемента управления вы можете посмотреть , как интерфейс вашего приложения будет выглядеть как при вертикальном расположении устройства, так и горизонатольном.

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

В панели Properties отображаются все доступные свойства выделенного в окне визуального представления объекта. Список свойств для каждого класса можно посмотреть в разделе «Классы графических элементов и их свойства» В этой панели вы можете изменить необходимые значения свойств и сразу же увидеть в окне визуального представления результат проделанных изменений.

Доступ к элементам управления из программы

Список функций объекта Screen для работы с UbiqML:

void GrabResources(Assembly currentAssembly) – загружает все UbiqML-ресурсы из сборки во внутренюю коллекцию. Следует вызывать эту функцию один раз при инициализации сборки.

Пример использования:

Screen.GrabResources(Assembly.GetExecutingAssembly());

VisualElement Screen.CreateElement(String resourceName) – возвращает дерево элеметнтов управления, соответствующее структуре из файла resourceName.ubiqml, или null если UbiqML-ресурса с таким именем не существует.

Пример использования:

_viewScreen = Screen.CreateElement("View");

Кроме того у класса VisualElement есть функция VisualElement GetChildByName(String controlName), которая возвращает элемент управления с именем controlName из поддерева элементов или null если элемента с таким именем не существует.

Пример использования:

btBack = (SelectableArea)_viewScreen.GetChildByName("ButtonBack");
tlNumber = (TextBlock)_viewScreen.GetChildByName("TlNumber");

Стандартные свойства элементов управления

Все свойства элементов управления можно разделить на три группы: общие для всех элементов (например размеры), общие для группы, специфические для данного элемента (например текст для Button).

Список возможных типов свойств:

  • String – строковый тип
  • Enum – один из фиксированных вариантов, в описании свойства указываются возможные значения
  • Boolean – булевый тип
  • Breadh – специальный тип адаптивного размера. Определяется вещественным положительным числом и единицой измерения. Значения этого типа могут использоваться для задания «фиксированных размеров» в рамках конкретного экземпляра приложения, но зависимых от размера экрана конечного устройства. Возможные единицы измерения:
    • Absolute – единица измерения пиксел (вариант по умолчанию), неизменно для всех размеров экрана
    • Small – вычисляемое в зависимости от размеров экрана значение, можно использовать как размер шрифта для мелких надписей
    • Medium – вычисляемое в зависимости от размеров экрана значение, можно использовать как размер шрифта для большинства надписей
    • Large – вычисляемое в зависимости от размеров экрана значение, можно использовать как размер шрифта для заголовков или других важных надписей
    • ExtraLarge – вычисляемое в зависимости от размеров экрана значение, можно использовать как размер шрифта для заголовков верхнего уровня
    • ScreenWidth – вычисляемое значение равное ширине экрана
    • ScreenHeight – вычисляемое значение равное высоте экрана
    • MaxDim – вычисляемое значение равное максимуму из размеров экрана
    • MinDim – вычисляемое значение равное минимуму из размеров экрана
  • Int – число целого тип
  • Double – число вещественного типа
  • Color – цвет в формате (A, R, G, B)
  • Brush – специальный тип заливки, вомзожны три варианта:
    • Заливка сплошным цветом – определяется свойством типа Color
    • Градиентная заливка – в данный момент недоступно для редактирования в визуальном дизайнере
    • Заливка с использованием картинки – определяется картинкой и способом размещения изображения. Возможны три варианта размещения: None — изображение размещается без изменений по центру подложки; если надо, края «обрезаются»; Scale – изображение масштабируется так, чтобы размер по одному из измерений совпадал с размером основного изображения по этому измерению Измерение выбирается так, чтобы избежать «обрезания» по другому измерению; Tile – изображение «размножается» на подложке основного изображения, начиная с левого верхнего угла подложки.
  • Thickness – тип отступа. Состоит из 4 компонент: Left, Top, Right, Bottom, каждая из которых является значением типа Breadh.

Возникли вопросы? Нужна помощь? Нашли ошибку?

Задайте вопрос, сообщите нам об ошибке или напишите на электронную почту