Question

请查看此xaml代码：

       <Style x:Key="WowButton" TargetType="Button" >
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">                  
                <Setter Property="Width" Value="300"></Setter>
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="FontWeight" Value="Bold"></Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Background" Value="Yellow"></Setter>
                <Setter Property="Width" Value="150"></Setter>
                <Setter Property="FontSize" Value="25"></Setter>
            </Trigger>
            <EventTrigger RoutedEvent="Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Width"
                                         From="300" To="500 ">                                
                        </DoubleAnimation>
                    </Storyboard>                        
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation  Duration="0:0:2" Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
                                          From="0" To="360" RepeatBehavior="1x">                                
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
         </Style.Triggers>
    </Style>

我在主窗口的按钮上使用了这种风格。怎么样，当我离开按钮时它会旋转并且它的宽度变得越来越小，但是在我点击它之后 - 它的宽度不会改变回去？

Answer 1

来自MSDN：

在某些情况下，您可能无法更改a的值动画后的属性。

您可以通过添加新的Storyboards来更改Width属性来解决此问题：

<Style x:Key="WowButton" TargetType="Button" >
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">                 
            <Setter Property="FontSize" Value="30"></Setter>
            <Setter Property="FontWeight" Value="Bold"></Setter>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="Yellow"></Setter>
            <Setter Property="Width" Value="150"></Setter>
            <Setter Property="FontSize" Value="25"></Setter>
        </Trigger>
        <EventTrigger RoutedEvent="Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Width"
                                     From="300" To="500 ">                                
                    </DoubleAnimation>
                </Storyboard>                        
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0" Storyboard.TargetProperty="Width" From="150" To="300"/>
                 </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation  Duration="0:0:2" Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
                                      From="0" To="360" RepeatBehavior="1x">                                
                    </DoubleAnimation>
                    <DoubleAnimation Duration="0:0:0" Storyboard.TargetProperty="Width" From="300" To="150 "/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
     </Style.Triggers>
</Style>

Answer 2

与Trigger的基本设置器不同，Storyboard没有自动RemoveStoryboard调用来删除它们。

因此，当它们不再适用时，你可以摆脱它们。如果您使用Trigger，则可以使用Trigger.EnterActions和Trigger.ExitActions来执行Storyboard的申请和删除。这对于EventTrigger来说并不存在。

在您的情况下，只需移除Storyboard事件上的点击MouseLeave，反之亦然。

类似于:(注意我们为x:Name添加了BeginStoryboard

<Style x:Key="WowButton"
        TargetType="Button">
  <Style.Triggers>
    <Trigger Property="IsMouseOver"
              Value="True">
      <Setter Property="Width"
              Value="300" />
      <Setter Property="FontSize"
              Value="30" />
      <Setter Property="FontWeight"
              Value="Bold" />
    </Trigger>
    <Trigger Property="IsMouseOver"
              Value="False">
      <Setter Property="Background"
              Value="Yellow" />
      <Setter Property="Width"
              Value="150" />
      <Setter Property="FontSize"
              Value="25" />
    </Trigger>
    <EventTrigger RoutedEvent="Click">
      <BeginStoryboard x:Name="clickStoryboard">
        <Storyboard>
          <DoubleAnimation Duration="0:0:0.25"
                            From="300"
                            Storyboard.TargetProperty="Width"
                            To="500 " />
        </Storyboard>
      </BeginStoryboard>
      <RemoveStoryboard BeginStoryboardName="leaveStoryboard" />
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
      <BeginStoryboard x:Name="leaveStoryboard">
        <Storyboard>
          <DoubleAnimation Duration="0:0:2"
                            From="0"
                            RepeatBehavior="1x"
                            Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
                            To="360" />
        </Storyboard>
      </BeginStoryboard>
      <RemoveStoryboard BeginStoryboardName="clickStoryboard" />
    </EventTrigger>
  </Style.Triggers>
</Style>

您没有来创建新的Storyboard以删除旧的RemoveStoryboard。只需恰当地使用{{1}}来摆脱em。

使用操作触发行为

2 个答案: