Задания для самостоятельного выполнения

Изменить стандартный стиль у контрола управдения TextBox. Задать цвет фона, рамку, изменить шрифт. Стиль вынести в файл Generic.xaml

Учебный элемент. Стили и ресурсы в wpf

Стили – это одна из наиболее мощных и полезных особенностей WPF и XAML. Стили позволяют практически до неузнаваемости изменять внешний вид (и поведение) элементов управления и форм.

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

В данном учебном элементе мы рассмотрим небольшой пример работы со стилями в WPF.

Шаг 1. Применение стиля в xaml документе

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

<Button Name="button1" Width="150" FontSize="12" Background="AliceBlue"  Content="Click Me!" Margin="3" Click="OnResources" />

Есть еще один способ задать стиль элемента прямо в самом элементе:

<Button Width="150" Content="Click Me!" Margin="3"> <Button.Style> <Style TargetType="Button"> <Setter Property="Background" Value="Yellow" /> <Setter Property="FontSize" Value="14" /> <Setter Property="FontWeight" Value="Bold" /> </Style> </Button.Style> </Button>

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

К счастью, стили можно создавать отдельно от самих элементов управления и хранить их в коллекциях ресурсов. Например, вот так:

<Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="LemonChiffon" /> <Setter Property="FontSize" Value="18" /> </Style> </Window.Resources>

Такой стиль станет стилем по умолчанию для кнопок на текущей странице.

<Button Width="200" Content="Uses default style" Margin="3" />

Давайте зададим еще несколько стилей.

<Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="LemonChiffon" /> <Setter Property="FontSize" Value="18" /> </Style> <Style x:Key="ButtonStyle"> <Setter Property="Button.Background" Value="Red" /> <Setter Property="Button.Foreground" Value="White" /> <Setter Property="Button.FontSize" Value="18" /> </Style> <Style x:Key="FancyButtonStyle"> <Setter Property="Button.FontSize" Value="22" /> <Setter Property="Button.Foreground" Value="White" /> <Setter Property="Button.Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.0" Color="LightCyan" /> <GradientStop Offset="0.14" Color="Cyan" /> <GradientStop Offset="0.7" Color="DarkCyan" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Window.Resources>

Применим их к нескольким новым кнопкам.

<Button Width="200"  Content="Uses named style" Style="{StaticResource ButtonStyle}" Margin="3" /> <Button Width="200" Content="Fancy button style" Style="{StaticResource FancyButtonStyle}" Margin="3" />

Еще одной особенностью стилей в WPF является то, что стили могут наследовать свойства других стилей. Вот пример:

<Window.Resources> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="LemonChiffon" /> <Setter Property="FontSize" Value="18" /> </Style> <Style x:Key="ButtonStyle"> <Setter Property="Button.Background" Value="Red" /> <Setter Property="Button.Foreground" Value="White" /> <Setter Property="Button.FontSize" Value="18" /> </Style> <Style x:Key="FancyButtonStyle"> <Setter Property="Button.FontSize" Value="22" /> <Setter Property="Button.Foreground" Value="White" /> <Setter Property="Button.Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0.0" Color="LightCyan" /> <GradientStop Offset="0.14" Color="Cyan" /> <GradientStop Offset="0.7" Color="DarkCyan" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> <Style x:Key="AnotherButtonStyle"  BasedOn="{StaticResource FancyButtonStyle}" TargetType="Button"> <Setter Property="Foreground"> <Setter.Value> <LinearGradientBrush> <GradientStop Offset="0.2" Color="White" /> <GradientStop Offset="0.5" Color="LightYellow" /> <GradientStop Offset="0.9" Color="Orange" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Window.Resources>

Стиль AnotherButtonStyle наследует свойства от FancyButtonStyle и переопределяет лишьсвойство ForeGround. Можно убедиться, что цвет фона и размер шрифта идентичен для двух этих стилей.

<Button Width="200" Content="Style inheritance" Style="{StaticResource AnotherButtonStyle}" Margin="3"/>

Так будет выглядеть весь код страницы:

<Window  x:Class="StylesAndResources.MainWindow"         xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation         xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml         Title="MainWindow" Height="240" Width="500">     <Window.Resources>         <Style TargetType="{x:Type Button}">             <Setter Property="Background" Value="LemonChiffon" />             <Setter Property="FontSize" Value="18" />         </Style>         <Style x:Key="ButtonStyle">             <Setter Property="Button.Background" Value="Red" />             <Setter Property="Button.Foreground" Value="White" />             <Setter Property="Button.FontSize" Value="18" />         </Style>         <Style x:Key="FancyButtonStyle">             <Setter Property="Button.FontSize" Value="22" />             <Setter Property="Button.Foreground" Value="White" />             <Setter Property="Button.Background">                 <Setter.Value>                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                         <GradientStop Offset="0.0" Color="LightCyan" />                         <GradientStop Offset="0.14" Color="Cyan" />                         <GradientStop Offset="0.7" Color="DarkCyan" />                     </LinearGradientBrush>                 </Setter.Value>             </Setter>         </Style>                 <Style x:Key="AnotherButtonStyle"  BasedOn="{StaticResourceFancyButtonStyle}" TargetType="Button">             <Setter Property="Foreground">                 <Setter.Value>                     <LinearGradientBrush>                         <GradientStop Offset="0.2" Color="White" />                         <GradientStop Offset="0.5" Color="LightYellow" />                         <GradientStop Offset="0.9" Color="Orange" />                     </LinearGradientBrush>                 </Setter.Value>             </Setter>         </Style>     </Window.Resources>     <StackPanel>         <Button Name="button1" Width="150" FontSize="12"  Background="AliceBlue" Content="Click Me!" Margin="3" Click="OnResources" />         <Button Width="150" Content="Click Me!" Margin="3">             <Button.Style>                 <Style TargetType="Button">                     <Setter Property="Background" Value="Yellow" />                     <Setter Property="FontSize" Value="14" />                     <Setter Property="FontWeight" Value="Bold" />                 </Style>             </Button.Style>         </Button>         <Button Width="200" Content="Uses default style" Margin="3" />         <Button Width="200" Content="Uses named style" Style="{StaticResourceButtonStyle}" Margin="3" />         <Button Width="200" Content="Fancy button style" Style="{StaticResourceFancyButtonStyle}" Margin="3" />         <Button Width="200" Content="Style inheritance" Style="{StaticResourceAnotherButtonStyle}" Margin="3" />     </StackPanel> </Window>

В результате должно получиться вот такое окошко с шестью кнопками.

Рис. л. р. 2.1. Результат применения стилей.