0

我有一个重置按钮 - 所需的行为是在鼠标悬停时增加大小，并且一旦单击，它周围就会有一个边框。

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>
4

2 回答 2

0

这些方法不起作用的原因是因为 MouseUp 事件被按钮使用，并且永远不会到达您的处理程序。这可以通过右键单击（不消耗）而不是左键单击来演示，并且您的上述代码将起作用（我只测试了第一个示例）。

要解决此问题，您可以改用使用PreviewMouseUp事件。这在你的第一个样本中对我有用。

于 2015-10-25T19:39:27.457 回答
0
  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 仅针对鼠标右键向上触发

希望能帮助到你

于 2015-07-23T09:26:05.330 回答