WPF MouseUp EventTrigger на кнопке не устанавливает BorderBrush и BorderThickness

У меня есть кнопка сброса - желаемое поведение заключается в увеличении размера при наведении курсора мыши и после щелчка вокруг нее появляется рамка.

Триггер IsMouseOver работает, но я не могу заставить работать триггер события MouseUp (после нажатия кнопки не отображается граница).

Я пробовал следующее:

1) Добавление триггера события в триггеры шаблона управления

2) Добавление триггера события в триггеры стиля

3) Добавление триггера события в триггеры кнопок

Я неправильно пишу триггер события? Я добавил код для трех попыток ниже, надеясь, что я просто пропустил что-то очевидное и это быстрое исправление. Спасибо!

1 – Добавление триггера события в триггеры шаблона элемента управления

    <Button x:Name="ResetButton"
                    Margin="0,0,20,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    Command="{Binding Path=DoClearCmd}"
                    ToolTip="Reset all search criteria.">
                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                      <TextBlock HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 FontSize="16"
                                 Foreground="White"
                                 Text=" Reset" />
                       <Image Width="16"
                              Height="16"
                              Margin="2,0,0,0"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"                                          Source="..\Resources\Delete_16x16.png" />
                            </StackPanel>
                            <Button.Style>
                                <Style TargetType="{x:Type Button}">
                                    <Setter Property="dx:ThemeManager.ThemeName" Value="None" />
                                    <Setter Property="SnapsToDevicePixels" Value="true" />
                                    <Setter Property="OverridesDefaultStyle" Value="true" />
                                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                    <Setter Property="MinHeight" Value="25" />
                                    <Setter Property="MinWidth" Value="25" />
                                    <Setter Property="BorderBrush" Value="Transparent" />
                                    <Setter Property="BorderThickness" Value="0" />
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1" ScaleY="1" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Border x:Name="Border">
                                                    <ContentPresenter Margin="2"
                                                                      HorizontalAlignment="Center"
                                                                      VerticalAlignment="Center"
                                                                      RecognizesAccessKey="True" />
                                                </Border>
                                                <ControlTemplate.Triggers>
                                                    <EventTrigger RoutedEvent="MouseUp">
                                                        <BeginStoryboard>
                                                            <Storyboard RepeatBehavior="Forever">
                                                                <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
                                                                <DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
                                                            </Storyboard>
                                                        </BeginStoryboard>
                                                    </EventTrigger>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Trigger.EnterActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                     To="1.05" />
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                     To="1.05" />
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </Trigger.EnterActions>
                                                        <Trigger.ExitActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                     To="1" />
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                     To="1" />
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </Trigger.ExitActions>
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Button.Style>
                        </Button>

2. Добавление триггера события к триггерам стиля

      <Button x:Name="ResetButton"
                                Margin="0,0,20,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Command="{Binding Path=DoClearCmd}"
                                ToolTip="Reset all search criteria.">
                            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontSize="16"
                                           Foreground="White"
                                           Text=" Reset" />
                                <Image Width="16"
                                       Height="16"
                                       Margin="2,0,0,0"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Source="..\Resources\Delete_16x16.png" />
                            </StackPanel>
                            <Button.Style>
                                <Style TargetType="{x:Type Button}">
                                    <Setter Property="dx:ThemeManager.ThemeName" Value="None" />
                                    <Setter Property="SnapsToDevicePixels" Value="true" />
                                    <Setter Property="OverridesDefaultStyle" Value="true" />
                                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                    <Setter Property="MinHeight" Value="25" />
                                    <Setter Property="MinWidth" Value="25" />
                                    <Setter Property="BorderBrush" Value="Transparent" />
                                    <Setter Property="BorderThickness" Value="0" />
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1" ScaleY="1" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Border x:Name="Border">
                                                    <ContentPresenter Margin="2"
                                                                      HorizontalAlignment="Center"
                                                                      VerticalAlignment="Center"
                                                                      RecognizesAccessKey="True" />
                                                </Border>
                                                <ControlTemplate.Triggers>                                                      
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Trigger.EnterActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                     To="1.05" />
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                     To="1.05" />
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </Trigger.EnterActions>
                                                        <Trigger.ExitActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                     To="1" />
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                     To="1" />
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </Trigger.ExitActions>
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <EventTrigger RoutedEvent="MouseUp">
                                            <BeginStoryboard>
                                                <Storyboard RepeatBehavior="Forever">
                                                    <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
                                                    <DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Style.Triggers>
                                </Style>                                    
                            </Button.Style>
                        </Button>

3. Добавление триггера события к триггерам кнопок

    <Button x:Name="ResetButton"
                                Margin="0,0,20,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Command="{Binding Path=DoClearCmd}"
                                ToolTip="Reset all search criteria.">
                            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontSize="16"
                                           Foreground="White"
                                           Text=" Reset" />
                                <Image Width="16"
                                       Height="16"
                                       Margin="2,0,0,0"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Source="..\Resources\Delete_16x16.png" />
                            </StackPanel>
                            <Button.Style>
                                <Style TargetType="{x:Type Button}">
                                    <Setter Property="dx:ThemeManager.ThemeName" Value="None" />
                                    <Setter Property="SnapsToDevicePixels" Value="true" />
                                    <Setter Property="OverridesDefaultStyle" Value="true" />
                                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                    <Setter Property="MinHeight" Value="25" />
                                    <Setter Property="MinWidth" Value="25" />
                                    <Setter Property="BorderBrush" Value="Transparent" />
                                    <Setter Property="BorderThickness" Value="0" />
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1" ScaleY="1" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Border x:Name="Border">
                                                    <ContentPresenter Margin="2"
                                                                      HorizontalAlignment="Center"
                                                                      VerticalAlignment="Center"
                                                                      RecognizesAccessKey="True" />
                                                </Border>
                                                <ControlTemplate.Triggers>                                                      
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Trigger.EnterActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                     To="1.05" />
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                     To="1.05" />
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </Trigger.EnterActions>
                                                        <Trigger.ExitActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                     To="1" />
                                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                     To="1" />
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </Trigger.ExitActions>
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>                                    
                            </Button.Style>
                            <Button.Triggers>
                                <EventTrigger RoutedEvent="Button.MouseUp">
                                    <BeginStoryboard>
                                        <Storyboard RepeatBehavior="Forever">
                                            <ColorAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
                                            <DoubleAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="BorderThickness" To="2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Button.Triggers>
                        </Button>

wpf triggers mouseup coloranimation wpf-animation
person Naadof    schedule 23.07.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

  1. Чтобы анимировать толщину, вы должны использовать ThicknessAnimation.
  2. Кнопка не запускает перенаправленное событие MouseLeftButtonUp. Обходной путь — использовать событие PreviewMouseLeftButtonUp. Источник
  3. Вы должны привязать свойства элемента «Граница» BorderBrush и BorderThickness к вашему шаблону.

Для вашего первого случая:

        <Button>
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="dx:ThemeManager.ThemeName" Value="None" />
                    <Setter Property="SnapsToDevicePixels" Value="true" />
                    <Setter Property="OverridesDefaultStyle" Value="true" />
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                    <Setter Property="MinHeight" Value="25" />
                    <Setter Property="MinWidth" Value="25" />
                    <Setter Property="BorderBrush" Value="Transparent" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Border x:Name="Border"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        BorderBrush="{TemplateBinding BorderBrush}">
                                    <ContentPresenter Margin="2"
                                                                  HorizontalAlignment="Center"
                                                                  VerticalAlignment="Center"
                                                                  RecognizesAccessKey="True" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <EventTrigger RoutedEvent="MouseUp">
                                        <BeginStoryboard>
                                            <Storyboard Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever">
                                                <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
                                                <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="4" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                 To="1.05" />
                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                 To="1.05" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                                 To="1" />
                                                    <DoubleAnimation Duration="0:0:0.2"
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                                                 To="1" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.ExitActions>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>

ПРИМЕЧАНИЕ, что MouseUp срабатывает только при нажатии правой кнопки мыши.

Надеюсь, поможет

person VMaleev    schedule 23.07.2015
comment
Спасибо, это тоже не сработало — мы используем стороннюю структуру пользовательского интерфейса, которая может что-то делать за кулисами. Я перепробовал миллион разных комбо, но безрезультатно. - person Naadof; 24.07.2015
comment
Так почему вы не написали об этом в своем вопросе?? - person VMaleev; 24.07.2015
comment
потому что я убрал тему для этой кнопки, как показано в моем xaml: ‹Setter Property=dx:ThemeManager.ThemeName Value=None /> Я не знаю, меняет ли это что-нибудь, это просто догадка, ничего не видящая работает. - person Naadof; 24.07.2015
comment
Это не имеет ничего общего со сторонним фреймворком. Пожалуйста, смотрите мой ответ для решения. - person AdamRossWalker; 22.11.2015

arrow_upward
0
arrow_downward

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

Чтобы решить эту проблему, вы можете вместо этого использовать событие PreviewMouseUp. Это сработало для меня в вашем первом образце.

person AdamRossWalker    schedule 25.10.2015