4. Добавьте дочерний элемент <Window. Resources> в элемент <Window> и переместите определение <Style> из элемента <Button. Style> в элемент <Window. Resources>. Удалите пустой элемент <Button. Style>. Ниже показан результат, который должен получиться (в сокращенной форме):

<Window x:Class= Ch34Ex04.Windowi xmlns= http: schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfх/2006/xaml Title= Nasty Button Height= 150 Width= 550 > <Window.Resources> <Style TargetType= Button >

</Style>

</Window.Resources>

<Grid Background= Black > <Button Margin= 20 Click= Button Click > Would anyone use a button like this? </Button> </Grid> </Window>

5. Запустите приложение и удостоверьтесь в том, что результат выглядит точно так же, как в предыдущем примере.

6. Добавьте атрибуты Name в основной элемент Grid внутри шаблона и элемент Rectangle, в котором содержится элемент ContentPresenter, как показано ниже:

<Setter Property= Template > <Setter.Value>

<ControlTemplate TargetType= Button >

<Grid Name= LayoutGrid > <Grid.ColumnDefinitions>

<Grid Grid.Column= l > <Rectangle RadiusX= 10 RadiusY= 10 Name= BaclcgroundRectangle >

<Rectangle.Fill>

</Rectangle.Fill> </Rectangle>

</Grid>

</Grid> </ControlTemplate> </Setter.Value> </Setter>

7. Добавьте в элемент <Cont го 1 Tempi ate >, прямо перед дескриптором </ControlTemplate>, следующий код:

</Grid>

<ControlTemplate.Resources> <Storyboard x:Key= PulseButton > <ColorAnimationUsingKeyFrames BeginTime= 00:00:00 RepeatBehavior= Forever

Storyboard.TargetName= BackgroundRectangle Storyboard.TargetProperty= (Shape.Fill) . (RadialGradientBrush.GradientStops) [1]. (GradientStop.Color) >

<LinearColorKeyFrame Value= Red KeyTime= 00: 00 : 00 /> <LinearColorKeyFrame Value= Orange KeyTime= 00:00:01 /> <LinearColorKeyFrame Value= Red KeyTime= 00:00:02 /> </ColorAnimationUsingKeyFrames> </Storyboard>

</ControlTemplate.Resources> <ControlTemplate.Triggers>

<Trigger Property= IsMouseOver Value= True > <Setter TargetName= LayoutGrid Property= BitmapEffect > <Setter.Value>

<OuterGlowBitmapEffect GlowColor= Red GlowSize= 20 /> </Setter.Value> </Setter> </Trigger>

<Trigger Property= IsPressed Value= True > <Setter TargetName= LayoutGrid Property= BitmapEffect > <Setter.Value>

<OuterGlowBitmapEffect GlowColor= Yellow GlowSize= 40 /> </Setter.Value> </Setter> </Trigger>

<EventTrigger RoutedEvent= UIElement.MouseEnter > <BeginStoryboard Storyboard= {StaticResource PulseButton}

x:Name= PulseButton BeginStoryboard /> </EventTrigger>

<EventTrigger RoutedEvent= UIElement.MouseLeave > <StopStoryboard

BeginStoryboardName= PulseButton BeginStoryboard /> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate>

8. Запустите приложение и наведите курсор мыши на кнопку, как показано на рис. 34.17. Кнопка начнет пульсировать и светиться.

Рис. 34.17. Внешний вид кнопки при наведении на нее курсора мыши 9, Щелкните на кнопке, как показано на рис. 34.18. Стиль подсветки изменится.

Рис. 34.18. Внешний вид кнопки после щелчка на ней

Описание полученных результатов

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

Для превращения стиля в глобальный ресурс мы просто переместили элемент <Style> в раздел ресурсов элемента управления Window. Мы могли бы добавить атрибут X: Key, но благодаря тому, что мы этого не сделали, не потребовалось устанавливать свойство Style элемента управления Button на странице; стмь сразу же стал глобальным.

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

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

<ControlTemplate.Resources> <Storyboard x:Кеу= PulseButton >

Внутри объекта Storyboard мы добавили элемент ColorAnimationUsingKeyFrames для анимации цвета, используемого в шаблоне элемента управления. Подлежащим анимации свойством стал красный цвет, используемый в качестве внешнего цвета в радиальной заливке внутри элемента управления BackgroundRectangle. Для определения местонахождения этого свойства из элемента управления потребовался довольно сложный синтаксис в свойстве Storyboard.TargetProperty:

<ColorAnimationUsingKeyFrames BeginTime= 00:00:00 RepeatBehavior= Forever

Storyboard.TargetName= BackgroundRectangle Storyboard.TargetProperty= (Shape.Fill). (RadialGradientBrush.GradientStops) [1]. (GradientStop.Color) >

В состав временной шкалы данного анимационного эффекта вошли три ключевых кадра для переключения цвета с красного (Red) на оранжевый (Orange), а затем обратно, через две секунды с момента запуска:

<LinearColorKeyFrame Value= Red KeyTime= 00:00:00 /> <LinearColorKeyFrame Value= Orange KeyTime= 00:00:01 /> <LinearColorKeyFrame Value= Red KeyTime= 00:00:02 /> </ColorAnimationUsingKeyFrames> </Storyboard>

</ControlTemplate.Resources>

Добавление анимационного эффекта в качестве ресурса не приводит к его выполнению. Поэтому далее, чтобы обеспечить такое поведение, мы добавили два триггера

EventTrigger:

<EventTrigger RoutedEvent= UIElement.MouseEnter > <BeginStoryboard Storyboard= {StaticResource PulseButton} x:Name= PulseButton BeginStoryboard /> </EventTrigger>