0

请看这个 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>

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

4

2 回答 2

0

来自MSDN：

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

您可以通过添加新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>
于 2013-05-25T10:31:37.057 回答
0

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

因此，当它们不再适用时，您可以自行摆脱它们。如果您使用的是 aTrigger那么您可以使用Trigger.EnterActionsandTrigger.ExitActions来应用和删除Storyboard's。EventTrigger这对于's不存在。

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

类似于：（请注意，我们x:Name为BeginStoryboard's 添加了一个）

<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适当地使用 ' 来摆脱它们。

于 2013-05-25T10:40:59.250 回答