Стили

Наверно в современном компьютерном мире всем знакомо понятие стиля. Особенно это понятие близко, тем, кто работает и бывает в Интернете. И так Что такое стиль? Стиль – это общее представление объекта в пространстве включающие его визуальные свойства, а также его положение в пространстве или положение относительно его родительского контейнера. И так для чего же нужны стили? Стили нужны для того, чтобы упростить управление свойствами отображения объектов, которые имеют общие свойства. Для этого общие свойства объединяются в один стиль и применяются к определенному типу объектов. Если брать антологию в 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”
/>

Как вы наверно успели заметить у обоих объект стили очень похожи, иногда конечно свойства могут отличаться одним или двумя свойствами, но в нашем случае, два 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}”
/>

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

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

Если вы заметили стили, определяются в ресурсах какого-либо контейнера, напримера 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: 20% [?]