Как правильно установить стиль WPF EventTrigger?

У меня есть стиль WPF, который является границей. Он используется для кнопки.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
    <Setter Property="ClickMode" Value="Press"/>
    <EventSetter Event="PreviewMouseUp" Handler="RegularButtonRelease"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid">
                    <Border x:Name="border" CornerRadius="2" BorderBrush="#FF444444" BorderThickness="1">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.2" >
                                <GradientStop Color="#ffaaaaaa" Offset="0" />
                                <GradientStop Color="White" Offset="1" />
                            </LinearGradientBrush>                             
                        </Border.Background>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <!--some style -->
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--some style -->                                
                    </Trigger>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                        <BeginStoryboard>
                            <Storyboard Duration="0:0:2" AutoReverse="False">
                                <ColorAnimation 
                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                    FillBehavior="Stop" To="Tomato"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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

Используя приведенный выше код, я вижу, что цвет кнопки продолжает меняться после того, как я отпускаю кнопку мыши, и мой обработчик событий RegularButtonRelease также постоянно запускается. Вскоре приложение зависает и выдает мне System.StackOverflowException исключение.

Если я уберу EventTrigger в стиле, мои приложения будут работать правильно, поэтому мой EventTrigger должен быть неправильным.

Мой вопрос: как я могу правильно настроить изменение цвета фона при нажатии кнопки мыши (используя EventTrigger или что-то еще)?

ОБНОВЛЕНИЕ:

Я пытаюсь установить границу и фон одновременно, используя:

<ColorAnimation 
    Duration="0:0:0.8" 
    Storyboard.TargetName="border" 
    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
    To="Red"/>
<ColorAnimation 
    Duration="0:0:0.8" 
    Storyboard.TargetName="border" 
    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
    To="Red"/>

На этот раз граница меняется на красную, работает как шарм. Но фон так и остался, никаких изменений.

Как я могу правильно изменить свой фон?


person Dia    schedule 02.12.2016    source источник
comment
Добавьте эту строку в свой тег Triggers - <Trigger Property="IsMouseOver" Value="True">   -  person Ashish Srivastava    schedule 02.12.2016


Ответы (2)


Во-первых, ваши ошибки: вы пытаетесь изменить Color из Background, что невозможно, поскольку установлено значение LinearGradientBrush, а во-вторых, вы вообще не установили Storyboard.TargetName.

Я сделал некоторые изменения, во-первых: назначьте x:Name второму GradientStop, а затем используйте этот x:Name как Storyboard.TargetName="C2" в анимации.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
        <Setter Property="ClickMode" Value="Press"/>
        <EventSetter Event="PreviewMouseUp" Handler="RegularButtonRelease"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid">
                        <Border x:Name="border" CornerRadius="2" BorderBrush="#FF444444" BorderThickness="1">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.2" >
                                    <GradientStop Color="#ffaaaaaa" Offset="0" />
                                    <GradientStop x:Name="C2" Color="White" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <!--some style -->
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--some style -->
                        </Trigger>
                        <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                            <BeginStoryboard>
                                <Storyboard Duration="0:0:1" AutoReverse="False">
                                    <ColorAnimation Storyboard.TargetName="C2"
                                        Storyboard.TargetProperty="Color" 
                                        FillBehavior="Stop" To="Red"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
person AnjumSKhan    schedule 02.12.2016

Или попробуйте этот пример:

<ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
              <Setter Property="Background" TargetName="Background" Value="Red"/>
            </Trigger>
        </ControlTemplate.Triggers>

Для справки:

Изменить цвет кнопки при завершении мыши

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

Переходя к части System.StackOverflowException, согласно MSDN, вы можете получить StackOverflowExceptions, создав слишком много больших объектов в стеке, обычно это происходит потому, что ваш код попал в состояние, когда он снова и снова вызывает одну и ту же цепочку функций. Что-то вроде рекурсии.

person Ashish Srivastava    schedule 02.12.2016
comment
Спасибо за комментарий, но в моем стиле уже есть IsPressed траггер, который меняет фон границы. Я хочу иметь другой цвет, когда я отпускаю мышь, в течение ~ 1 секунды. - person Dia; 02.12.2016
comment
Что-то вроде этого в ответе Pietu1998? - person Ashish Srivastava; 02.12.2016
comment
О, это мне не поможет. Однако теперь я могу изменить цвет линии границы, но не могу изменить фон. Я отредактировал основной пост. - person Dia; 02.12.2016
comment
Убедитесь, что фон не установлен в самой кнопке, так как он переопределит любые изменения стиля. Используйте сеттер в стиле для цвета фона по умолчанию. - person Rubarb; 11.07.2019