如何停止图像缩放动画来重置自身？

Question

我创建了一个按钮模板的副本，并在其中添加了一个图像。 然后，我为* => MouseOver创建了一个鼠标悬停状态，将图像缩放0.1。 它的工作原理。但是，尽管将鼠标悬停在图像上，动画也会重置为初始状态，就好像没有鼠标悬停一样。

我该如何让它留在那里？

第二个问题是关于我的图像中的源代码的硬编码路径。我怎样才能将它从顶部注入到样式中，而不是针对一个特定图像进行硬编码？所以它更通用？

非常感谢

<Style x:Key="ButtonStyle1" TargetType="Button"> 
      <Setter Property="Background" Value="#FF1F3B53"/> 
      <Setter Property="Foreground" Value="#FF000000"/> 
      <Setter Property="Padding" Value="3"/> 
      <Setter Property="BorderThickness" Value="1"/> 
      <Setter Property="BorderBrush"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFA3AEB9" Offset="0"/> 
         <GradientStop Color="#FF8399A9" Offset="0.375"/> 
         <GradientStop Color="#FF718597" Offset="0.375"/> 
         <GradientStop Color="#FF617584" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0" To="MouseOver"> 
              <Storyboard> 
               <DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="toolbarImage" d:IsOptimized="True"/> 
               <DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="toolbarImage" d:IsOptimized="True"/> 
              </Storyboard> 
             </VisualTransition> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/> 
              <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
              <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
              <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/> 
              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/> 
              <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
              <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
              <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
              <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="FocusStates"> 
            <VisualState x:Name="Focused"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unfocused"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <VisualStateManager.CustomVisualStateManager> 
           <ei:ExtendedVisualStateManager/> 
          </VisualStateManager.CustomVisualStateManager> 
          <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3"> 
           <Grid Background="{TemplateBinding Background}" Margin="1"> 
            <Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/> 
            <Rectangle x:Name="BackgroundGradient"> 
             <Rectangle.Fill> 
              <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> 
               <GradientStop Color="#FFFFFFFF" Offset="0"/> 
               <GradientStop Color="#F9FFFFFF" Offset="0.375"/> 
               <GradientStop Color="#E5FFFFFF" Offset="0.625"/> 
               <GradientStop Color="#C6FFFFFF" Offset="1"/> 
              </LinearGradientBrush> 
             </Rectangle.Fill> 
            </Rectangle> 
           </Grid> 
          </Border> 
          <Image x:Name="toolbarImage" Source="./Images/New.png"> 
           <Image.RenderTransform> 
            <CompositeTransform CenterY="24" CenterX="24"/> 
           </Image.RenderTransform> 
          </Image> 
          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/> 
          <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

UPDATE：

尽管已经设置自动翻转为false，我仍然还没有整理出来的第一个问题。

<VisualTransition From="Normal" GeneratedDuration="0" To="MouseOver"> 
              <Storyboard> 
               <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundAnimation"/> 
               <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
               <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
               <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/> 
               <DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="toolbarImage" AutoReverse="False"/> 
               <DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="toolbarImage" AutoReverse="False"/> 
              </Storyboard> 
             </VisualTransition> 

更新2：

我已上载这里的样本演示了我的意思。将鼠标悬停在新按钮上： http://sl.venuscloud.com/

我是否缺少明显的东西？ 谢谢

Answer 1

那么你的要求听起来有点不切实际，即缩放鼠标悬停的图像，并保持它们永远缩放然后向前？

但如果你坚持

1. 作为触发的一部分，缩放动画将反正被移除（并缩减到原来的大小），如果你不将鼠标。

因此，对于你的要求履行，您可以在一个附加行为扩展，动画按钮，而不是在触发启动对主线程，当鼠标悬停是真实的（并确保你写的没有反向的逻辑，当它不是一个鼠标移到）。

<Button myNameSpace:MyAttachedBehavior.BeginScalingAnimation="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" /> 

因此，在您的附加行为，情节串连图板的AutoReverse属性应该是假的，动画结束后的比例应该坚持。

---

现在对于用于图像信号源下一个问题......

你将不得不创造Button另一个附加属性可以是ImageSource类型。您可以将TemplateBind添加到您的样式中的附加属性。

例如

<Button myNameSpace:MyAttachedBehavior.IconPath=".../xyz.png"/> 

和Style的Template

<Image Source="{TemplateBinding myNameSpace.MyAttachedBehavior:IconPath}" .../> 

的情况下，如果上述TemplateBinding不起作用尝试TemplatedParent作为RelativeSource正常Binding。

让我知道这是否有帮助。