Главная » Silverlight » Использование модели частей в ползунке

0

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

Чтобы понять, как работают части, нужно подробнее рассмотреть элемент управления, в котором они используются. Иногда части применяются в небольших компонентах эле­мента управления. Например, в календаре DatePikcer части применяются для иденти­фикации раскрывающейся кнопки, которая выводит текстовое поле с выбранной датой. В полосе прокрутки ScrollBar части используются для очерчивания перетаскиваемого ползунка, полосок и кнопок со стрелками. В ползунке Slider используются те же части, однако кнопки прокрутки расположены над полоской и невидимы. Это позволяет переме­щать ползунок не только путем перетаскивания, но и щелкнув слева или справа от него.

Каждая конкретная часть используется с атрибутом TemplatePart. Ниже приведены атрибуты TemplatePart элемента управления Slider.

[TemplatePart(Name="HorizontalTemplate", Type=typeof(FrameworkElement))] [TemplatePart(Name=

"HorizontalTrackLargeChangelncreaseRepeatButton", Type=typeof(RepeatButton))] [TemplatePart(Name=

"HorizontalTrackLargeChangeDecreaseRepeatButton", Type=typeof(RepeatButton))]

[TemplatePart(Name="HorizontalThumb", Type=typeof(Thumb))] [TemplatePart(Name="VerticalTemplate", Type=typeof(FrameworkElement))] [TemplatePart(Name=

"VerticalTrackLargeChangelncreaseRepeatButton", Type=typeof(RepeatButton))] [TemplatePart(Name=

"VerticalTrackLargeChangeDecreaseRepeatButton", Type=typeof(RepeatButton))]

[TemplatePart(Name="VerticalThumb", Type=typeof(Thumb))]

[TemplateVisualState(Name="Disabled", GroupName="CommonStates")] [TemplateVisualState(Name="Unfocused", GroupName="FocusStates")] [TemplateVisualState(Name="MouseOver", GroupName="CommonStates")] [TemplateVisualState(Name="Focused", GroupName="FocusStates")] [TemplateVisualState(Name="Normal", GroupName="CommonStates")]

public class Slider : RangeBase { … }

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

<ControlTemplate TargetType="Slider">

<! — В этой решетке сгруппированы две ориентации —> <Grid>

<! — В этой решетке определяется

горизонтальная ориентация —> <Grid x:Name="HorizontalTemplate">

</Grid>

<! — В этой решетке определяется вертикальная ориентация —> <Grid x:Name="VerticalTemplate">

</Grid>

</Grid> </ControlTemplate>

Если свойство Slider .Orientation содержит значение Horizontal, объект Slider выведет элемент HorozontalTemplate и скроет элемент VerticalTemplate (если он су­ществует). Обычно оба этих элемента являются контейнерами. В данном примере каж­дый из них является контейнером Grid, содержащим разметку ориентации.

Итак, есть две отдельные компоновки, внедренные в один шаблон, и два набора ча­стей. В данном примере элемент Slider всегда выводится горизонтально, поэтому он предоставляет только соответствующие горизонтальные части: HorizontalTemplate, HorizontalTrackLargeChangelncreaseRepeatButton, HorizontalTrackLargeChangeDecr easeRepeatButton и HorizontalThumb.

На рис. 13.6 показано, как эти части взаимодействуют. Существенно то, что ползу­нок находится посредине полоски. Слева и справа расположены две невидимые кнопки, позволяющие быстро присвоить ползунку новое значение, щелкнув справа или слева.

Рис. 13.6. Именованные части шаблона HorizontalTemplate ползунка Slider

Атрибут TemplatePart определяет имя, которое должен иметь элемент. Имя необхо­димо потому, что код ищет элемент по имени. Кроме того, имя указывает на тип эле­мента, который может быть либо специфичным (например, Thumb при использовании части HorizontalThumb), либо общим (например, FrameworkElement при использовании части HorizontalTemplate). Общее имя позволяет использовать любой элемент.

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

Для создания данного эффекта пользовательский шаблон должен предостав­лять элемент HorizontalTemplate, содержащий элемент HorizontalThumb. Атрибут TemplatePart сообщает о том, что элемент управления Thumb нельзя заменить другим элементом, однако можно настраивать шаблон элемента Thumb для изменения внешне­го вида объекта, как в данном примере.

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

<ControlTemplate TargetType="Slider"> <Grid>

<Grid x:Name="HorizontalTemplate">

CGrid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="[3]" />

</Grid.ColumnDefinitions>

<!— Полоска —>

<Rectangle Stroke="SteelBlue" StrokeThickness="l" Fill="AliceBlue" Grid.Column="0" Grid.ColumnSpan="3" Height="7" RadiusX="3" RadiusY="3" />

<!— Левая кнопка RepeatButton, ползунок Thumb и правая ‘кнопка RepeatButton —>

<RepeatButton x:Name= "HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Background="Transparent" 0pacity="0" IsTabStop="False" />

<Thumb x:Name="HorizontalThumb" Height="28" Width="28" Gr id. Column= " 1" > CThumb.Template> <ControlTemplate TargetType="Thumb"> <Ellipse x:Name="Thumb" 0pacity="0.3" Fill="AliceBlue" Stroke="SteelBlue" StrokeThickness="3" Stretch="Fill"x/Ellipse> </ControlTemplate> </Thumb.Template>

</Thumb>

<RepeatButton x:Name=

Нарис. 13.7 показан пользовательский элемент управления Slider. Пользовательский шаблон элемента управления изменяет внешний вид полоски (скругленного элемента Rectangle) и ползунка (полупрозрачной окружности).

Рис. 13.7. Пользовательский элемент slider

"HorizontalTrackLargeChangelncreaseRepeatButton" Grid.Column="2" Background="Transparent" 0pacity="0" IsTabStop="False" /> </Grid>

<!— При необходимости сюда можно добавить шаблон VerticalTemplate —> </Grid> </ControlTemplate>

Создание "творческих" обложек элементов управления

Примеры данной главы демонстрируют все, что нужно знать о модели частей и состояний. Однако в них нет глав­ного: демонстрации мастерства. Вы уже знакомы с концепциями, необходимыми для создания настраиваемых кно­пок и ползунков, но еще не можете самостоятельно разработать графику эстетически привлекательного элемента управления. Рассмотренные выше простые анимационные эффекты (изменение цвета, пульсация, масштабирование) весьма важны, но в таком виде они определенно не радуют глаз. Для получения эффектных результатов необходимо творчески подойти к задаче и применить знания о графике и анимации, полученные в предыдущих главах. Чтобы получить представление о том, что можно сделать с помощью рассмотренных средств Silverlight, ознакомь­тесь с примерами элементов управления, доступными в Интернете, включая стеклянные и мерцающие кнопки, соз­данные другими разработчиками. Можете также применить новые шаблоны, включенные в расширенный набор тем пакета Silverlight Toolkit (www.silverlight.codeplex.com). Приведенные в пакете темы предоставля­ют широкий диапазон профессиональных шаблонов. Темы устанавливаются автоматически благодаря инструмен­ту implicitStyleManager. Нужно лишь добавить тему в элемент контейнера (например, на панель). Объект OmplicitStyleManager применит стили ко всем вложенным элементам и найденным шаблонам.

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

По теме:

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