Расширенная форма данных с элементами пользовательского интерфейса в WPF и Silverlight

Автор: Акаш Кава (Akash Kava)

Построив ряд бизнес-приложений в течение нескольких лет, мы пришли к выводу, что Silverlight DataForm предлагает слишком маленькое подмножество функций, необходимых в течение длительного периода времени. Мы поняли проблему с приложениями на основе форм, которая мешает разработчикам. Это управление изменениями.

Хотя в WPF и Silverlight не предлагается хорошо настраиваемая платформа проектирования пользовательского интерфейса, но при переходе в область разработки ряда бизнес-приложений мы осознаем, что первоначальная разработка почти не занимает времени, но обслуживание очень трудное.

Давайте рассмотрим проблемы проектирования таких областей, как Grid, StackPanel, Canvas и др.

Стандартный проект формы

Давайте рассмотрим стандартный проект желаемой формы. Это макет, который нельзя сделать без области полотна, поскольку нет способа поддержки переменного количества столбцов в строке. Как можно заметить, первые две строки имеют 3 равномерно размещенных столбца, а последние две строки имеют 2 равномерно размещенных столбца. Каждое поле имеет внизу описание и необходимую красную звездочку (*).

Начальный проект формы

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

Необходимые изменения

Основная проблема всегда возникает позднее, когда требуются изменения.

Атомарная гибкая сетка

Это причина создания атомарной гибкой сетки "AtomFlexibleGrid", поддерживающей переменное количество столбцов в строках, как показано на рисунке выше. Можно видеть, что форма и гибкая сетка имеют свойство с именем "RowLayout", которое принимает разделенные запятой значения ячеек для отображения в строке. Это показано в примере ниже.

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

  • Интеллектуальный потоковый макет с возможностью общего доступа к нескольким элементам в одной строке.
  • Не требуются атрибуты для дочерних элементов.
  • Свойство "RowLayout" с запятой в качестве разделителя мгновенно отрисовывает сетку с переменным количеством столбцов.
  • Например 3,2,1 = 3 ячейки в первом ряду, 2 ячейки во втором ряду и 1 ячейка в третьем ряду с автоматическим распределением.

Преимущества атомарной гибкой сетки перед полотном, сеткой и стековой областью

  • Дочерние объекты Atom Form (атомарной формы) аналогичны дочерним объектам Wrap Panel (области обтекания), но обтекание полностью настраивается с помощью простых атрибутов.
  • Легко перемещать элементы без необходимости изменения множества атрибутов; сетка представляет очень мощный инструмент, но изменение дочерних объектов сетки может быть слишком трудным.
  • С полотном очень просто работать, но необходим мощный конструктор, а изменение макета также может быть очень утомительной работой.

Макет поля формы

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

Управление изменениями

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