Стили

Наверно в современном компьютерном мире всем знакомо понятие стиля. Особенно это понятие близко, тем, кто работает и бывает в Интернете. И так Что такое стиль? Стиль – это общее представление объекта в пространстве включающие его визуальные свойства, а также его положение в пространстве или положение относительно его родительского контейнера. И так для чего же нужны стили? Стили нужны для того, чтобы упростить управление свойствами отображения объектов, которые имеют общие свойства. Для этого общие свойства объединяются в один стиль и применяются к определенному типу объектов. Если брать антологию в WEB – это HTML и CSS. Для легкого управления видом страницы используют каскадные таблицы стилей, что не только упрощает разработку, но так же делает код оптимальным, освобождая его от лишних тегов, и позволяет сделать его более понятным.

И так попробуем понять, зачем нужно использовать стили, как их применять, и в чем их преимущество.

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

Создадим новый проект. После этого поместим на нашу страницу два объекта TextBlock:

Код XAML:

<TextBlock x:Name=»TextBlock1″ Height=»51″
Width=»100″
FontFamily=»Arial»
FontSize=»12″
FontWeight=»Bold»
Foreground=»Red»
Canvas.Left=»100″
Canvas.Top=»100″
VerticalAlignment=»Top»
Text=»TextBlock1″
TextWrapping=»Wrap»
/>
<TextBlock x:Name=»TextBlock2″ Height=»51″
Width=»100″
FontFamily=»Arial»
FontSize=»12″
FontWeight=»Bold»
Foreground=»Red»
Canvas.Left=»100″
Canvas.Top=»200″
VerticalAlignment=»Top»
Text=»TextBlock2″
TextWrapping=»Wrap»
/>

k11.jpg

Как вы наверно успели заметить у обоих объект стили очень похожи, иногда конечно свойства могут отличаться одним или двумя свойствами, но в нашем случае, два TextBlock-а отличаются только свойствами Text. Представьте теперь, что наше приложение будет содержать 30 таких TextBlock-ов. Тогда наше приложение превратиться в нагромождение повторяющегося кода, для того, чтобы мы могли этого избежать то мы можем вынести общие свойства в стили, тогда в случае, если мы захотим поменять шрифт у наших TextBox-ов, то нам не надо будет делать рутиную работу, изменяя 30 раз значение шрифта. А надо поменять его всего лишь в одно месте.
Теперь рассмотрим как можно создать простейший стиль.

Код XAML:

<Style x:Key=»StyleName» TargetType=»ObjectName»>
<Setter Property=»PropertyName» Value=»Value» />
</Style>

И так для того, чтобы создать стиль используем тег Style, и вложенные в него Setter. Style имеет атрибуты x:key – название нашего стиля, по которому мы потом сможем к нему обращаться, TargetType – указывает название типа объектов к которым будет применяться этот стиль. Setter имеет два атрибута Property, Value. Property – Указывает название свойства у объекта, к которму мы будем применять стиль, Value содержит значение этого свойства.

Чтобы использовать наш стиль его необходимо указать, как Resourse. То есть мы его задаем в разделе Resourse какого-либо контейнера например Canvas, Grid, StackPanel.
И так создадим Canvas и создадим у него раздел Resourse, в котором и разместим наш стиль

Код XAML:

<Canvas x:Name=»LayoutRoot» Background=»White» >
<Canvas.Resources>
<Style x:Key=»MyNewStyle» TargetType=»TextBlock»>
</Style>
</Canvas.Resources>
</Canvas>

Теперь надо определить общие свойства, которые мы хотим вынести в стиль. В данном случае мы указали TargetType=»TextBlock», потому что мы собираемся применить стиль к нашим TextBlock-ам. Общие свойства у нас следующие:
Height=»51″
Width=»100″
FontFamily=»Arial»
FontSize=»12″
FontWeight=»Bold»
Foreground=»Red»
VerticalAlignment=»Top»
TextWrapping=»Wrap»

Вынесем их в стиль:

Код XAML:

<Canvas x:Name=»LayoutRoot» Background=»White» >
<Canvas.Resources>
<Style x:Key=»MyNewStyle» TargetType=»TextBlock»>
<Setter Property=»Height» Value=»51″ />
<Setter Property=»Width» Value=»100″ />
<Setter Property=»FontFamily» Value=»Arial» />
<Setter Property=»FontSize» Value=»12″ />
<Setter Property=»Foreground » Value=»Red» />
<Setter Property=»VerticalAlignment» Value=»Top» />
<Setter Property=»TextWrapping» Value=»Wrap» />
</Style>
</Canvas.Resources>
</Canvas>

Теперь укажим это стиль у наших TextBlock-ов:

Код XAML:

<TextBlock x:Name=»TextBlock2″
Canvas.Left=»100″
Canvas.Top=»100″
Style=»{ StaticResource MyNewStyle}»
/>
<TextBlock x:Name=»TextBlock1″
Canvas.Left=»100″
Canvas.Top=»200″
Style=»{ StaticResource MyNewStyle}»
/>

Вот код выглядит гораздо красивей и компактней, и теперь чтобы поменять свойство шрифта TextBlock нам нужно поменять его в разделе Style.

Переопределение стилей

Все это конечно же удобно, но иногда возникают такие ситуации, когда возникает потребность. Поменять какое либо свойство у одного из элементов, к которому применен наш стиль как бы в таком случае?
Можно переопределить наше свойство указанное в стиле на наше собственное для этого. Для этого определим это свойство непосредственно у объекта.

Используем наши TextBlock-и:

Код XAML:

<TextBlock x:Name=»TextBlock2″
Canvas.Left=»100″
Canvas.Top=»100″
Style=»{ StaticResource MyNewStyle}»
/>
<TextBlock x:Name=»TextBlock1″
Canvas.Left=»100″
Canvas.Top=»200″
Style=»{ StaticResource MyNewStyle}»
/>

Поменяем цвет шрифта у второго TextBlock-а на синий:

Код XAML:

<TextBlock x:Name=»TextBlock2″
Canvas.Left=»100″
Canvas.Top=»100″
Foreground=»Blue»
Style=»{ StaticResource MyNewStyle}»
/>

k2.jpg

Как мы видим цвет шрифта изменился , то есть был переопределен. Так как свойство объект имеет больший приоритет, чем стили.

Глобальные стили

Если вы заметили стили, определяются в ресурсах какого-либо контейнера, напримера Canvas, StackPanel. И могут быть применены только внутри этого контейнера, но часто бывает нужно использовать более глобальные стили. Такие стили определяются в файл App.xaml – и будут применены ко всему приложению, это помогает определить общий вид, вашего приложения и потом переопределять стили, там где это необходимо.

Код XAML:

<Application
xmlns=»http://schemas.microsoft.com/client/2007″
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
x:Class=»SilverlightApplication2.App»>
<Application.Resources>
<Style x:Key=»MyStyle» TargetType=»TextBlock»>
<Setter Property=»HorizontalAlignment» Value=»Left» />
<Setter Property=»FontSize» Value=»14″ />
<Setter Property=»Foreground» Value=»Blue» />
</Style>
<!– Resources scoped at the Application level should be defined here. –>
</Application.Resources>
</Application>

Теперь мы можем использовать стиль – «MyStyle» для любого из наших TextBlock-ов.

Код XAML:

<Canvas x:Name=»LayoutRoot» Background=»White» >
<TextBlock x:Name=»TextBlock2″
Canvas.Left=»100″
Canvas.Top=»100″
Foreground=»Blue»
Style=»{ StaticResource MyNewStyle}»
/>
</Canvas>

Этот метод удобен для вынесения глобальных стилей на уровень приложения.

Кратко:

Popularity: 26%

Похожие статьи по SilverLight:

  1. Темплейты
  2. Извлечение стилей в Expression Blend
  3. SilverLight и JavaScript
  4. Динамическое объединение стилей
  5. Контролы – контейнеры