Создание стилизованного шаблона из графики

52

Как пояснялось выше, всякая попытка видоизменить копию существующего шаблона — дело безнадежное, поскольку это весьма трудоемкий процесс — даже в Expression Blend. Правда, имеется другой, более простой способ создания шаблонов с помощью команды меню Tools --> Make Into Control (Сервис --> Преобразовать в элемент управления). Действие этой команды опирается на то обстоятельство, что большинство специальных шаблонов создается на основании существующей графики.

Допустим, что доступными в Expression Blend инструментами была создана идеальная графика или же она была импортирована из Expression Design. Эту графику можно выбрать в качестве отправной точки для создания нового шаблона элемента управления на платформе WPF или Silverlight. А после этого во вновь созданный шаблон можно добавить триггеры, чтобы внедрить визуальные подсказки.

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

Создание исходной графики

Прежде всего создайте новый проект приложения на платформе WPF, присвоив ему имя StyleTemplateFromGraphic. Затем создайте произвольную геометрическую форму доступными в Expression Blend инструментами рисования (Pen или Pencil) или же выберите готовую геометрическую форму из категории Shapes в библиотеке ресурсов.

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

<ed:RegularPolygon Fill="#FFF4F4F5" HorizontalAlignment="Left" 
		InnerRadius="0.47211" Margin="137,106,0,188" PointCount="8" 
		Stretch="Fill" Stroke="Black" Width="152"/>

Извлечение стилизованного шаблона

Выберите сначала вновь созданную геометрическую форму на монтажном столе, а затем команду меню Tools --> Make Into Control. Или щелкните правой кнопкой мыши на геометрической форме и выберите команду Make Into Control из всплывающего контекстного меню:

Выбор команды Make Into Control

В открывшемся диалоговом окне вы сможете указать имя нового стилизуемого шаблона, место его сохранения как нового ресурса, а самое главное — целевой элемент управления. Для целей рассматриваемого здесь примера определите новый шаблон как ресурс, называемый starButtonStyle (стиль кнопки в форме звезды) и применяемый на уровне приложения, а в качестве его целевого элемента управления — объект типа Button:

Создание нового шаблона кнопки из геометрической фигуры

Как только вы щелкните на кнопке OK, новый стиль станет доступным для правки:

Извлеченный стилизованный шаблон

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

<Stylе x:Key="starButtonStyle" TargetType="{x:Type Button}"&rt;
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Grid>
							<ed:RegularPolygon Fill="#FFF4F4F5" InnerRadius="0.47211" PointCount="8" Stretch="Fill" Stroke="Black"/>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" 
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="IsFocused" Value="True"/>
							<Trigger Property="IsDefaulted" Value="True"/>
							<Trigger Property="IsMouseOver" Value="True"/>
							<Trigger Property="IsPressed" Value="True"/>
							<Trigger Property="IsEnabled" Value="False"/>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
</Style>

Как видите, в свойстве TargetType нового стиля задан целевой элемент управления типа Button. Кроме того, в автоматически сформированном элементе разметки <ControlTemplate> определен элемент <ContentPresenter>, а также ряд пустых триггеров на платформе WPF, которые будут заполнены далее. Обратите внимание на то, каким образом исходная геометрическая форма была удивительным образом превращена в элемент разметки <Button>, в котором применяется новый стиль!

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

Построение стилизованного шаблона спискового окна

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

Вспомогательная геометрическая форма

Выберите сначала вновь созданный графический элемент, а затем команду меню Make Into Control. Но на этот раз определите на уровне приложения стиль, именуемый wigglyListBoxStyle, а в качестве цели элемент управления типа ListBox.

Во вновь созданном шаблоне используется элемент разметки <ItemsPresenter> вместо элемента <ContentPresenter>. Ведь у элементов управления типа ListBox как правило, имеется ряд отдельных элементов списка, которые можно просматривать в режиме прокрутки. Ниже приведен фрагмент разметки, автоматически сформированной в коде XAML при создании нового шаблона:

<Stylе x:Key="wigglyListBoxStyle" TargetType="{x:Type ListBox}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ListBox}">
						<Grid>
							...
							<ScrollViewer>
								<ItemsPresenter/>
							</ScrollViewer>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

Прежде чем вводить элементы списка во вновь определенный элемент управления типа ListBox на монтажном столе главного окна приложения, необходимо обновить элемент разметки <itemsPresenter>, чтобы обеспечить выравнивание каждого элемента списка типа List Item по центру. С этой целью откройте окно визуального конструктора для правки нового стиля wigglyListBoxStyle и его шаблона, а затем выберите элемент разметки <ItemsPresenter> на панели Objects and Timeline:

Выбор элемента шаблона ItemsPresenter

Далее воспользуйтесь панелью Properties, чтобы установить режим выравнивания по центру (Center) в свойствах HorizontalAlignment и VerticalAlignment:

Центровка элементов списка в ItemsPresenter

Сохраните внесенные изменения и заполните несколькими объектами типа ListBoxItem элемент управления типа ListBox, находящийся на монтажном столе исходного окна типа Window. Как пояснялось ранее, для этой цели можно воспользоваться редактором, доступным с помощью кнопки ... в области Common Properties на панели Properties, или же просто набрать разметку в редакторе XAML.

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

Специальные шаблоны элементов управления в действии

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

Ввод интерактивных средств в шаблон с помощью триггеров свойств на платформе WPF

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

Итак, перейдите к панели Resources и выберите стиль starButtonStyle для последующей правки:

Выбор стиля для правки

Выберите текущий внутренний шаблон элемента управления по навигационной цепочке в левом верхнем углу редактора стилей:

Выбор внутреннего шаблона элемента управления

Выбрав шаблон, можете активизировать панель Triggers в среде Expression Blend IDE. (Напомним: если вы не можете найти нужную панель, воспользуйтесь меню Window, из которого открывается и скрывается искомая панель.) Как показано на рисунке ниже в шаблоне starButtonStyle имеются пустые триггеры для пяти свойств на платформе WPF: IsFocused, IsDefaulted, IsMouseOver, IsPressed, и IsEnabled.

Пустые триггеры в шаблоне

Ваша задача — воспользоваться панелью Triggers, чтобы определить внешний вид элемента управления, оформляемого по данному шаблону, когда каждое из перечисленных выше свойств имеет логическое значение true (напомним, что эти свойства не устанавливаются в элементе управления при наступлении соответствующего события). Итак, выберите свойство IsMouseOver. В итоге монтажный стол с выбранным на нем шаблоном перейдет в режим регистрации, как в редакторе анимации.

А теперь воспользуйтесь панелью Properties, чтобы внести в шаблон ряд изменений, которые должны проявляться при наведении курсора на элемент управления, определяемый этим шаблоном. Выберите объект геометрической формы на панели Objects and Timeline и подберите другой цвет заполнения этой формы. После этого можете выйти из режима регистрации, щелкнув на красной кнопке остановки в левом верхнем углу монтажного стола или рядом с триггером. В любом случае после выхода из режима регистрации панель Triggers будет выглядеть следующим образом:

Изменение цвета заполнения геометрической формы

Если вы проанализируете разметку, автоматически сформированную в коде XAML, то обнаружите, что коллекция триггеров в данном шаблоне обновилась следующим образом:

<ControlTemplate.Triggers>
							<Trigger Property="IsFocused" Value="True"/>
							<Trigger Property="IsDefaulted" Value="True"/>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="Fill" TargetName="regularPolygon">
									<Setter.Value>
										<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
											<GradientStop Color="#FFC8D8F1" Offset="0"/>
											<GradientStop Color="#FF1769EF" Offset="1"/>
										</LinearGradientBrush>
									</Setter.Value>
								</Setter>
							</Trigger>
                            ...

Аналогичным образом можно внести и другие коррективы в оставшиеся свойства IsDefaulted, IsEnabled и IsFocused на панели Triggers, но общий принцип должен быть вам ясен. А теперь запустите свое приложение на выполнение, наведите курсор на кнопку в форме звезды. Состояние этой кнопки должно измениться!

Пройди тесты
Лучший чат для C# программистов