Создание новых стилей

68

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

Создайте новый проект приложения WPF, присвоив ему имя WpfStylesWithBlend Создание специального стиля в среде Expression Blend IDE обычно начинается с размещения экземпляра стилизуемого элемента управления на монтажном столе. Вы вольны выбрать из библиотеки ресурсов любой элемент, но для целей данного примера рекомендуется выбрать самый простой элемент управления типа Button. Если же вы выберете более сложный элемент управления (например, типа Calendar или TreeView), то сформированная первоначальная разметка, описывающая стиль оформления такого элемента управления, окажется довольно пространной.

Создание нового пустого стиля

Выберите элемент управления на монтажном столе или на панели Objects and Timeline (опять же в данном примере предполагается, что это простой элемент типа Button). Затем выберите команду меню Object --> Edit Style (Объект --> Править стиль):

Меню Object

По команде меню Object --> Edit Style доступны три основные операции со стилями, которые могут или не могут оказаться доступными в зависимости от того, каким образом выбранный в настоящий момент элемент управления определен в разметке XAML. По существу, у вас имеются три варианта выбора:

Edit Current

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

Edit а Сору

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

Create Empty

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

Выберите Create Empty, чтобы открыть диалоговое окно, в котором вы сможете ввести имя нового стиля или сделать его используемым по умолчанию, не снабженным ключем стилем, выбрав вариант Apply to all:

Создание нового именованного стиля

Как только вы щелкнете на кнопке ОК, появится новый визуальный конструктор для вновь созданного стиля. В настоящий момент на нем находится нестилизованная кнопка, представленная объектом типа Button.

Не забывайте, что вы всегда сможете выбрать стиль для правки, найдя его на панели Resources и щелкнув на кнопке Edit resource справа от выбранного стиля.

Ваша задача — установить на панели Properties различные свойства стиля аналогично настройке свойств отдельного экземпляра элемента управления в главном окне (объект типа Window) или на начальной веб-странице (объект типа UserControl). Для этой цели можете, в частности, воспользоваться редактором кистей, инструментами графических преобразований, редакторами заполнения и полей и т.д. Более того, можете создать стиль, в котором применяются фрагменты анимации, что вам и предстоит сделать далее; шаблоны привязки данных, а также другие интересующие вас элементы графического оформления.

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

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

Специальный стиль оформления кнопки

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

<Style x:Key="firstButtonStyle" TargetType="{x:Type Button}">
			<Setter Property="Width" Value="420"/>
			<Setter Property="Height" Value="160"/>
			<Setter Property="Background">
				<Setter.Value>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FFB8D5F9" Offset="0"/>
						<GradientStop Color="#FF1571E7" Offset="1"/>
					</LinearGradientBrush>
				</Setter.Value>
			</Setter>
			<Setter Property="BorderThickness" Value="3"/>
			<Setter Property="BorderBrush" Value="#FF68E417"/>
			<Setter Property="FontFamily" Value="Vivaldi"/>
			<Setter Property="FontSize" Value="128"/>
			<Setter Property="Foreground">
				<Setter.Value>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FFF90404" Offset="0"/>
						<GradientStop Color="#FFD107F3" Offset="0.997"/>
						<GradientStop Color="#FFFA9540" Offset="0.203"/>
						<GradientStop Color="#FFF1E90B" Offset="0.394"/>
						<GradientStop Color="#FF1DF90B" Offset="0.546"/>
						<GradientStop Color="#FF0CF1E2" Offset="0.687"/>
						<GradientStop Color="#FF0816EF" Offset="0.833"/>
					</LinearGradientBrush>
				</Setter.Value>
			</Setter>
		</Style>

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

Работа с простыми стилями на платформе WPF

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

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

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

Попробуйте открыть библиотеку ресурсов (или панель Assets) и развернуть категорию Styles. В этой категории вы обнаружите раздел Simple Styles (Простые стили):

Простые стили применяемые на платформе WPF

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

Ползунковый элемент

Но если вы проанализируете разметку, описывающую данный объект, то обнаружите, что в его свойстве Style задан простой стиль SimpleSlider:

<Slider Margin="113,0,158,148.997" Style="{DynamicResource SimpleSlider}" ...

Откройте панель Resources в своем проекте. Обратите внимание на то, что в разделе ресурсов иерархической структуры файла разметки приложения App.xaml появился новый узел Linked То, обозначающий связь с новым XAML-файлом Simple Styles.xaml:

Узел Linked To

С точки зрения разметки XAML узел Linked То появился в результате объединения нового XAML-файла с приложением в контейнере ресурсов последнего. Открыв файл разметки приложения App.xaml в редакторе XAML, вы обнаружите в нем новые строки разметки, приведенные ниже:

<ResourceDictionary.MergedDictionaries>
	<ResourceDictionary Source="Simple Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>

Но еще важнее следующее обстоятельство: если вы вернетесь к панели Resources предварительно убедившись в том, что окно монтажного стола активизировано в среде Expression Blend IDE, иначе панель Resources окажется пустой, а затем развернете узел файла Simple Styles.xaml, то обнаружите, что в него сдублированы все основные элементы управления на платформе WPF. Кроме того, в этом файле определен целый ряд дополнительных ресурсов, в том числе кисти, используемые по умолчанию для раскраски разных составляющих элементов управления (заднего, переднего плана и т.д.). Кисти могут быть отредактированы в редакторе кистей, интегрированном в среду Expression Blend IDE:

Файл Simple Styles

Так, если изменить оттенок цвета раскраски обычной кистью (NormalBrush), соответственно изменится и окраска ползунка в элементе управления типа Slider.

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

Настройка простых стилей

В Интернете можно найти немало ресурсов для обмена стилями среди разработчиков и художников-оформителей приложений на платформах WPF и Silverlight. К числу наиболее предпочтительных ресурсов подобного рода относится веб-сайт, доступный по адресу www.wpfstyles.com. На нем представлены десятки стилей, которые можно свободно загружать и применять в своих проектах, что очень полезно для тех, у кого, как и у меня, нет особых художественных талантов!

Откройте файл Simple Styles.xaml для просмотра в редакторе XAML и уделите немного времени анализу его содержимого. Для примера найдите стиль SimpleSliderThumb. Обратите внимание на то, что он содержит встраиваемый элемент разметки <ControlTemplate>, в котором отдельно определяется целый ряд других специальных средств, включая триггеры. Ниже приведен фрагмент разметки из данного файла:

<Style x:Key="SimpleSliderThumb" d:IsControlPart="True" TargetType="{x:Type Thumb}">
		<Setter Property="SnapsToDevicePixels" Value="true"/>
		<Setter Property="Height" Value="14"/>
		<Setter Property="Width" Value="14"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Thumb}">
					<Grid>
						<Ellipse x:Name="Ellipse" Fill="{DynamicResource NormalBrush}" Stroke="{DynamicResource NormalBorderBrush}" StrokeThickness="1"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="True">
							<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Ellipse"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Ellipse"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

Как видите, используемые по умолчанию простые стили сложнее, чем кажется на первый взгляд! Для того чтобы эта разметка стала яснее, рассмотрим назначение шаблонов элементов управления. Но прежде следует заметить, что в руководстве пользователя Expression Blend имеется целый раздел, посвященный внесению типичных корректив в простые стили на платформе WPF. Этот раздел называется "Рекомендации по оформлению простых стилей на платформе WPF" (Styling tips for WPF Simple Styles). В качестве примера на рисунке ниже приведено окно справочной системы Expression Blend, в котором поясняется, каким образом в простом стиле SimpleSlider осуществляется специальная настройка оформления ползунка:

Специальная настройка стилей в руководстве пользователя
Пройди тесты
Лучший чат для C# программистов