Цветовой переход в эффекте наведения кнопки с использованием стиля в WPF

Я только недавно начал работать с WPF и пытаюсь заменить стандартный эффект наведения кнопки, используя созданный мной стиль.

<Style x:Key = "UserType_LoginButton" TargetType = "Button">
    <Setter Property = "OverridesDefaultStyle" Value = "True"/>
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType = "Button">
                <Border Name = "border"
                    BorderBrush = "{TemplateBinding BorderBrush}"
                    Background = "{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property = "IsMouseOver" Value = "True">
                        <Setter TargetName = "border" Property = "BorderBrush" Value = "{Binding BorderBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <EventTrigger RoutedEvent = "Button.Click">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation  Storyboard.TargetName = "BackgroundGrid" From = "Red" To = "Blue" Duration = "0:0:4" Storyboard.TargetProperty = "Background" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Style>

К сожалению, я получаю сообщение об ошибке:

A value of type 'Event Trigger' cannot be added to a collection or dictionary of type 'SetterBaseCollection'

Как тогда я могу добавить триггер события?

добавить EventTrigger внутри тега <Style.Triggers>

— 08.06.2018 11:30

@ASh Я снова получил очередную ошибку 'System.Windows.Media.Animation.ColorAnimation' animation object cannot be used to animate property 'Background' because it is of incompatible type 'System.Windows.Media.Brush'.'

— 08.06.2018 11:58

.net wpf xaml animation colors

08.06.2018 11:28

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 470

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

<Style TargetType = "Button">
    <Setter Property = "Background" Value = "White" />
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType = "{x:Type Button}">
                <Border Background = "{TemplateBinding Background}" BorderBrush = "{TemplateBinding BorderBrush}" BorderThickness = "1">
                    <ContentPresenter HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property = "IsMouseOver" Value = "True">
            <Setter Property = "Background" Value = "Gray"/>
            <Setter Property = "Foreground" Value = "White"/>
        </Trigger>
    </Style.Triggers>
</Style>

Только для эффекта при наведении курсора.

Как изменить фон на собственный цвет?

— 08.06.2018 15:29

08.06.2018 15:13

Ответ принят как подходящий

Вы можете применить VisualState для вашего ControlTemplate к кнопке. Нравиться,

<ControlTemplate TargetType = "Button" x:Key = "testButtonTemplate2">
    <Border Name = "RootElement">
        <Border.Background>
            <SolidColorBrush x:Name = "BorderBrush" Color = "Black"/>
        </Border.Background>

        <Grid Margin = "4" >
            <Grid.Background>
                <SolidColorBrush x:Name = "ButtonBackground" Color = "Aquamarine"/>
            </Grid.Background>
            <ContentPresenter HorizontalAlignment = "{TemplateBinding HorizontalContentAlignment}" VerticalAlignment = "{TemplateBinding VerticalContentAlignment}" Margin = "4,5,4,4"/>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name = "CommonStates">
                <VisualState x:Name = "Normal"/>
                <VisualState x:Name = "MouseOver">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName = "ButtonBackground" Storyboard.TargetProperty = "Color" To = "Red"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name = "Pressed">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName = "ButtonBackground" Storyboard.TargetProperty = "Color" To = "Red"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</ControlTemplate>

Ваша кнопка будет

<Button Template = "{StaticResource testButtonTemplate2}" 
HorizontalAlignment = "Center" VerticalAlignment = "Center" 
Foreground = "White">My button</Button>

Ref. Как изменить фон для кнопки MouseOver в WPF?

08.06.2018 15:23