Стили оформления

Expression Blend --- Графические интерфейсы --- Стили оформления

При построении пользовательского интерфейса приложения на платформе WPF или Silverlight зачастую требуется, чтобы у однотипных элементов управления был какой-то общий внешний вид. В частности, все кнопки, представленные объектами типа Button, должны иметь одинаковую высоту, ширину, цвет фона и размер шрифта текстовых надписей. Если все элементы пользовательского интерфейса находятся в одном контейнере, например в объекте типа Window или UserControl, то их внешний вид можно быстро определить, выбрав их на монтажном столе (щелчком на каждом из них по очереди при одновременно нажатой клавише <Ctrl>) и настроив их общие свойства на панели Properties.

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

Достаточно, например, представить, насколько усложнится дело, если потребуется размножить подобные установки на десять разных элементов управления типа Button в многооконном приложении WPF.

Правда, на обеих платформах, WPF и Silverlight, предоставляется довольно простой способ соблюдения внешнего вида связанных вместе элементов управления с помощью стилей оформления. Проще говоря, стиль представляет собой объект, содержащий совокупность пар "свойство-значение". С точки зрения программирования отдельный стиль оформления представлен классом System.Windows.Style. У этого класса имеется свойство Setters, раскрывающее одноименную строго типизированную коллекцию объектов типа Setter. С помощью этих объектов и определяются пары "свойство-значение".

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

Ниже показан пример разметки XAML, где определяются несколько стилей:

<Application.Resources>
		<!-- Простейший стиль -->
		<Style x:Key="BasicControlStyle">
			<Setter Property="Control.FontSize" Value="16"></Setter>
			<Setter Property="Control.Height" Value="40"></Setter>
			<Setter Property="Control.Cursor" Value="Hand"></Setter>
		</Style>
		<!-- Стиль, применяемый только к кнопкам -->
		<Style x:Key="MyGreenButton" TargetType="Button">
			<Setter Property="FontSize" Value="20"></Setter>
			<Setter Property="Height" Value="100"></Setter>
			<Setter Property="Width" Value="100"></Setter>
			<Setter Property="Background" Value="DarkGreen"></Setter>
			<Setter Property="Foreground" Value="Yellow"></Setter>
		</Style>
		<!-- Этот стиль основывается на стиле MyGreenButton -->
		<Style x:Key="RotateButton" TargetType="Button" BasedOn="{StaticResource MyGreenButton}">
			<Setter Property="Foreground" Value="White"></Setter>
			<Setter Property="RenderTransform">
				<Setter.Value>
					<RotateTransform Angle="25"></RotateTransform>
				</Setter.Value>
			</Setter>
		</Style>
	</Application.Resources>

Откройте в среде Expression Blend IDE панель Resources. Обратите внимание на то, что все созданные вами стили перечислены на этой панели наряду с любыми другими специальными ресурсами объектов, которые вам довелось определить:

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

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

А теперь, когда у вас сложилось более или менее полное представление о назначении и применении стилей, перейдем к рассмотрению способов и средств Expression Blend IDE, помогающих в создании новых стилей.