Главная » Silverlight » Создание шаблонов для пользовательских элементов управления

0

Изначально каждый стандартный элемент управления, разработанный создателя­ми Silverlight, безликий. Это сделано специально, чтобы его внешний вид можно было настраивать. Почти не изменяется только поведение элемента управления, жестко встроенное в его класс. Например, если вы решили использовать стандартный элемент управления Button, значит, в решаемой задаче он должен вести себя как кнопка, т.е. выводить содержимое и реагировать на щелчки.

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

Настройка элементов управления

• Шаблоны данных. Встроенные в Silverlight объекты списков поддерживают шаблоны данных. Это позволяет создавать и выводить мощные представления списков любых типов данных. С помощью шаблонов данных можно выводить каждый элемент списка как комбинацию текста, изображений и даже редактируемых элементов управления в любом контейнере (см. главу 14).

Прежде чем создавать пользовательский элемент управления, подумайте, нельзя ли настроить его более простым способом. Более простое решение легче реализовать и во многих случаях повторно использовать. Итак, когда же действительно необходимо создавать пользовательский элемент управления? Ответ простой: это не­обходимо, если нужно изменить функциональность стандартного элемента или присвоить ему дополнительный набор свойств, методов и событий. Если же нужно всего лишь настроить внешний вид элемента, создание пользовательско­го элемента управления — не лучшее решение.

Переворачивающаяся панель FlipPanel

В следующем примере рассматривается полезный элемент управления FlipPanel. Он предоставляет две поверхности для размещения содержимого. В каждый момент времени видна только одна поверхность. Чтобы увидеть другую, нужно перевернуть па­нель. Создать эффект переворачивания можно с помощью шаблона пользовательского элемента управления, однако в данном примере применяются анимация и трехмерное проецирование, позволяющие имитировать переворачивание листа бумаги на другую сторону (рис. 13.8). В реальных приложениях FlipPanel можно использовать для объ­единения формы ввода данных с отображением справочной информации. Кроме того, FlipPanel можно использовать в простой игре с вопросами и ответами.

Рис. 13.8. Панель FlipPanel

Панель можно перевернуть программно, установив свойство Is Flipped. Можно так­же добавить кнопку, щелкнув на которой пользователь переворачивает панель. В клас­се панели есть кнопка, предназначенная для этого. Можете удалить ее и создать другую.

Чтобы встроить панель FlipPanel в приложение, нужно создать пользовательскую панель и разместить на ней анимацию и содержимое скрытой поверхности. Как это сде­лать, описано в следующих разделах. В идеале можно создать хорошо структурирован­ный пользовательский шаблон, позволяющий применять к FlipPanel разные стили.

Создание решения

Пользовательский элемент управления Silverlight можно создать в сборке приложе­ния, однако лучше разместить его в отдельной библиотечной сборке. Тогда его можно будет редактировать и отлаживать, не затрагивая приложение. Кроме того, его можно бу­дет использовать в разных приложениях Silverlight.

Чтобы добавить проект библиотеки классов Silverlight в существующее решение, содержащее приложение Silverlight, выберите команду File^Add^New Project (ФайлО Добавить1^ Новый проект). Затем выделите проект Silverlight Class Library (Библиотека классов Silverlight), задайте имя и расположение проекта и щелкните на кнопке ОК. Теперь все готово для создания пользовательского элемента приложения.

Создание переворачивающейся панели

Базовая структура панели FlipPanel довольно простая. Панель состоит из двух об­ластей содержимого, которые нужно заполнить одним элементом — контейнером с вло­женными элементами. Это означает, что элемент FlipPanel не является, строго говоря, панелью, потому что он не предоставляет процедуры размещения дочерних элементов. Однако это не проблема, поскольку структура FlipPanel интуитивно очевидна. Элемент FlipPanel содержит кнопку, щелкнув на которой пользователь может перевернуть па­нель, выводя одну из двух областей содержимого.

В принципе для реализации эффекта переворачивания можно создать пользова­тельский элемент управления, производный от класса ContentControl или Panel, но FlipPanel наследует непосредственно класс Control. Если вам не нужны средства специальных классов, класс Control служит лучшей начальной точкой. Однако не на­следуйте более простой класс FrameworkElement, потому что в этом случае вы не полу­чите доступ к стандартной инфраструктуре элементов и шаблонов. Чтобы унаследовать класс Control, применяется следующий оператор.

public class FlipPanel : Control

{…}

В первую очередь, нужно создать свойства класса FlipPanel. Как заведено в Sil­verlight, создайте зависимые свойства. В главе 4 показано, что создание зависимого свойства состоит из двух этапов. Во-первых, нужно создать статическое определение метаданных свойства — имени, типа свойства, типа родительского класса и необяза­тельного метода обратного вызова, запускаемого при изменении свойства.

Ниже приведено определение свойства FrontContent, содержащего элементы перед­ней поверхности.

public static readonly DependencyProperty FrontContentProperty =

DependencyProperty.Register("FrontContent", typeof(object), typeof(FlipPanel), null);

Во-вторых, нужно добавить традиционные процедуры доступа .NET, вызывающие базовые методы GetValue () и SetValue (), которые изменяют зависимое свойство. Ниже приведены эти процедуры для свойства FrontContent.

public object FrontContent

{

get

{

return base.GetValue(FrontContentProperty);

}

set

{

base.SetValue(FrontContentProperty, value);

Свойство BackContent определяется аналогично.

public static readonly DependencyProperty BackContentProperty =

DependencyProperty.Register("BackContent", typeof(object), typeof(FlipPanel), null);

public object BackContent {

get {

return base.GetValue(BackContentProperty);

}

set {

base.SetValue(BackContentProperty, value);

}

}

В класс FlipPanel нужно добавить булево свойство IsFlipped, которое отслежива­ет текущее состояние панели (какой стороной она повернута в данный момент време­ни) и позволяет повернуть панель программно.

public static readonly DependencyProperty IsFlippedProperty= DependencyProperty.Register("IsFlipped", typeof(bool), typeof(FlipPanel), null);

public bool IsFlipped {

get {

return (bool)base.GetValue(IsFlippedProperty);

}

set

{

base.SetValue(IsFlippedProperty, value);

ChangeVisualState (true);

} •

}

Процедура установки свойства IsFlipped вызывает пользовательский метод ChangeVisualState О , который обновляет панель при ее переворачивании. Код проце­дуры рассматривается далее.

Для элемента FlipPanel не нужно много свойств. Все, что ему может понадобиться, он наследует от класса Control. Необходимо лишь определить свойство CornerRadius, задающее радиус скруглення рамки. Класс Control предоставляет свойства BorderBrush и BorderThickness, позволяющие управлять толщиной и заливкой рамки. Свойство CornerRadius применяется для конфигурирования элемента Border в шаблоне FlipPanel, используемом по умолчанию.

public static readonly DependencyProperty CornerRadiusProperty =

DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FlipPanel), null);

public CornerRadius CornerRadius

{

get { return

(CornerRadius)GetValue(CornerRadiusProperty); } set { SetValue(CornerRadiusProperty, value); )

)

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии