Архитектура графического элемента

Статья
08/11/2011

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

Для архитектуры сред. Конструктор WPF важна возможность быстро и легко создавать эскизы графических элементов, уточнять их и изменять стиль. В этом обзоре объясняется, как модель расширения графических элементов сред. Конструктор WPF упрощает создание собственных графических элементов при настройке средств разработки элементов управления.

сред. Конструктор WPF предоставляет гибкий механизм для отображения графических элементов. Этот механизм сочетается с гибкой системой команд, позволяющей графическим элементам реагировать на ввод пользователя. Чтобы добавить графический элемент в элемент управления, необходимо реализовать интерфейс IProvideAttributeTable.

Типы графических элементов

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

Графический элемент	Описание
Скоба захвата	Поддерживает перемещение и изменение размера элемента управления; не масштабируется.
Граница	Добавляет маркер или линейку вдоль одной стороны элемента управления; не масштабируется по одной оси.
Фрейм	Представляет границы элемента управления; масштабируется по всем осям.
Наложение	Захватывает движения мыши в области элемента управления; масштабируется по обеим осям. Примерно эквивалентен элементу "Body Glyph" в структуре конструктора System.ComponentModel.

Характеристики графических элементов

сред. Конструктор WPF предоставляет графические элементы, которые имеют следующие характеристики.

Позволяют графическим элементам быть производными от любого класса UIElement и поддерживать стили Windows Presentation Foundation.
Позволяют указывать все размеры, положения и масштабы отдельно для измерений по горизонтали и вертикали.
Исключают потребность в базовом классе графического элемента. Типы графических элементов могут наследовать от любого типа UIElement, удовлетворяющего поставленным требованиям.

Создание пользовательских графических элементов

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

Расширяемость графических элементов

Графические элементы добавляются в соответствии с политикой поставщика графических элементов. Политика добавляется к классу AdornerProvider путем добавления атрибута UsesItemPolicyAttribute к определению класса.

Если проверка IsInPolicy заканчивается успешно, графический элемент появляется в области конструктора.

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

сред. Конструктор WPF реализует класс PrimarySelectionAdornerProvider, предлагающий набор графических элементов, отображающихся для основного выделенного объекта. Большинство пользовательских поставщиков графических элементов являются производными от этого класса.

Графические элементы и макеты

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

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

В WPF обычным механизмом управления макетом служит панель. сред. Конструктор WPF управляет макетом посредством использования класса AdornerPanel в качестве родительского контейнера для графических элементов данного элемента управления на поверхности разработки.

Класс AdornerPanel предоставляет методы, которые позволяют изменять размеры и расположение декоративных элементов относительно элемента управления, с которым связаны декоративные элементы. Чтобы указать расположение графического элемента, используйте методы SetAdornerHorizontalAlignment, SetAdornerVerticalAlignment и SetAdornerMargin.

Примечание

Когда графический элемент добавляется в качестве элемента управления в другой элемент управления, он размещается в соответствии с шириной, высотой и преобразованием элемента, в который он добавляется.Это может привести к проблемам усечения элементов при наложении.Эти проблемы проще всего устранить, добавив элемент управления в объект Canvas, а затем добавить объект Canvas в качестве графического элемента.Таким образом, ширина и высота объекта Canvas изменяются, но элемент управления Canvas не подвергается усечению и масштабированию при масштабировании содержимого, в котором он размещается, т. е. пользовательский элемент управления всегда размещается внутри элемента Canvas.

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

' Setup the adorner panel.
' All adorners are placed in an AdornerPanel
' for sizing and layout support.
Dim myPanel = Me.Panel

' The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment( _
    opacitySlider, _
    AdornerHorizontalAlignment.Stretch)

' Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment( _
    opacitySlider, _
    AdornerVerticalAlignment.OutsideTop)

' Position the adorner 5 pixels above the control. 
AdornerPanel.SetAdornerMargin( _
    opacitySlider, _
    New Thickness(0, 0, 0, 5))

// Setup the adorner panel.
// All adorners are placed in an AdornerPanel
// for sizing and layout support.
AdornerPanel myPanel = this.Panel;

// The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment( 
    opacitySlider, 
    AdornerHorizontalAlignment.Stretch);

// Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment(
    opacitySlider, 
    AdornerVerticalAlignment.OutsideTop);

// Position the adorner 5 pixels above the control. 
AdornerPanel.SetAdornerMargin(
    opacitySlider, 
    new Thickness(0, 0, 0, 5));

Масштабирование

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

DesignerView

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

DesignerView view = new DesignerView();
view.Child = documentManager.View;
view.Context = editingContext;

Класс DesignerView реализует два аспекта сред. Конструктор WPF.

Графические элементы

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

Перенаправление входных данных

Класс DesignerView направляет входные данные пользователя командам графических элементов, средств и задач.

Класс DesignerView вводит два дополнительных элемента в начале всего содержимого: слой графического элемента и слой проверки нажатия. На следующей диаграмме показана связь слоев представления конструктора с визуальным деревом.

Просмотр конструктора

Класс DesignerView имеет пустой конструктор для использования в коде XAML.

См. также

Поделиться через