Двухмерные графические преобразования

Expression Blend --- Основы работы --- Двухмерные графические преобразования

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

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

По мере приобретения опыта работы в среде Expression Blend IDE вы непременно обнаружите, что графические преобразования можно подвергать анимации и внедрять в специальные шаблоны для создания ряда весьма изящных визуальных эффектов А до тех пор рассмотрим основные инструменты преобразования на примере нового проекта в Expression Blend.

Итак, создайте новый проект приложения WPF, присвоив ему имя Transformations. Для данного примера может вполне подойти и приложение Silverlight, но создавать рекомендуется все же приложение WPF, поскольку далее будет рассмотрен ряд функциональных возможностей, отсутствующих в прикладном интерфейсе Silverlight API. А для того чтобы сделать данный пример более интересным, необходимо прежде всего определить систему вложенной компоновки для имеющегося объекта типа Window.

Прежде всего разделите первоначальную сетку на два ряда, выбрав узел LayoutRoot на панели Objects and Timeline и щелкнув на пиктограмме внешнего редактора с изображением голубой сетки, чтобы добавить новый ряд. Конкретные размеры рядов сетки особого значения не имеют, но первый ряд должен быть значительно меньше второго. Убедившись в том, что объект типа Grid по-прежнему выбран на панели Objects and Timeline найдите элемент управления типа StackPanel на панели Tools:

Найдя элемент управления типа StackPanel, дважды щелкните на его пиктограмме, находящейся на панели Tools, чтобы добавить этот элемент к объекту типа Grid, а затем растяните его чтобы заполнить им все свободное пространство в первом ряду сетки. Выберете новый объект типа StackPanel на панели Objects and Timeline и найдите элемент управления типа Button.

Дважды щелкните на элементе управления типа Button три раза подряд. В итоге три объекта типа Button должны быть вложены в объект типа StackPanel. Выберите все три элемента управления типа Button в качестве объектов панели Objects and Timeline, нажав клавишу <Shift> и щелкнув сначала на первом элементе, а затем на последнем, после чего воспользуйтесь панелью Properties, чтобы установить значение 100 в поле свойства Width, а также значение 10 в поле свойства Margin.

А теперь выберите каждый из элементов управления Button по очереди инструментом Selection и замените значения их свойства Content (Содержимое), доступного в области Common Properties панели Properties, на Skew (Наклонить), Rotate (Повернуть) и Flip (Перевернуть) соответственно. Кроме того, воспользуйтесь полем Name на панели Properties, чтобы присвоить каждому объекту кнопки подходящее имя.

Щелкните сначала на кнопке Events, находящейся на панели Properties и имеющей знак молнии на пиктограмме, а затем организуйте обработчик события Click, наступающего после щелчка на кнопке, для каждого элемента управления типа Button.

Не забывайте о том, что можно дважды щелкнуть на отдельном событии, чтобы сформировать обработчик событий Имя_ Элемента_ Имя_ События, используемый по умолчанию. Так, если обрабатывается событие Click, связанное с элементом управления btnFlip, соответствующий обработчик этого события будет называться btnFlip_Click.

И в завершение компоновки пользовательского интерфейса создайте любую геометрическую форму по вашему выбору любыми инструментами доступными на панели Tools, а затем введите эту форму во второй ряд сетки. (Напомним, что в области Layout панели Properties содержатся свойства, с помощью которых графический элемент назначается для отдельной ячейки сетки. Но в то же время можно перетащить мышью графический элемент на ячейку сетки.) Присвойте новому элементу пользовательского интерфейса имя myShape:

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

Прежде чем вводить код в обработчики событий, покажем, каким образом графические преобразования выполняются на стадии разработки в редакторе преобразований, интегрированном в среду Expression Blend. С этой целью выделите специальную форму инструментом Selection на монтажном столе и перейдите к области Transform на панели Properties:

Как и в области Brushes, в области Transform имеется целый ряд вкладок, предназначенных для настройки различных видов графических преобразований элемента, выбранного на панели Objects and Timeline. Ниже кратко описано назначение каждого вида преобразования, перечисляемого по порядку следования вкладок слева направо в области Transform на панели Properties:

Translate

Перемещает графический элемент, находящийся в точке с координатами X, Y

Rotate

Поворачивает графический элемент на угол до 360

Scale

Увеличивает или уменьшает графический элемент, находящийся в точке с координатами X, Y

Skew

Наклоняет рамку, ограничивающую выбранный графический элемент, находящийся в точке с координатами X, Y

Center Point

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

Flip

Переворачивает выбранный графический элемент по оси X или Y

Рекомендуется опробовать каждое из упомянутых выше графических преобразований, используя любую выбранную геометрическую форму в качестве цели и нажимая комбинацию клавиш <Ctrl+Z> для отмены предыдущей операции преобразования.

Аналогично многим другим свойствам, доступным на панели Properties, для каждого вида преобразования имеется особый ряд свойств, с которыми вы должны познакомиться поближе, чтобы научиться их настраивать. Например, в редакторе преобразования наклоном (Skew) можете задавать величины наклона графического объекта по осям X и Y, используя ползунковые элементы управления, а в редакторе преобразования переворачиванием (Flip) — выбирать переворачивание по оси X или Y.

Перейдя к области Transform панели Properties, вы обнаружите там область дополнительных свойств. Если развернуть эту область, то в ней появится вспомогательный редактор преобразований, более или менее похожий на исходный. Отличие между ними состоит в том, что преобразования в исходном (расположенном сверху) редакторе считаются выполняющимися во время визуализации, тогда как преобразования во вспомогательном (расположенном снизу) редакторе считаются выполняющимися во время компоновки:

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

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

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

private void btnFlip_Click(object sender, System.Windows.RoutedEventArgs e)
{
		myShape.LayoutTransform = new RotateTransform(90);
}

private void btnRotate_Click(object sender, System.Windows.RoutedEventArgs e)
{
		myShape.LayoutTransform = new ScaleTransform(-1, 1);
}

private void btnSkew_Click(object sender, System.Windows.RoutedEventArgs e)
{
		myShape.LayoutTransform = new SkewTransform(40, -20);
}