如何停止圖像縮放動畫來重置自身？

我創建了一個按鈕模板的副本，並在其中添加了一個圖像。然後，我爲* => 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/

我是否缺少明顯的東西？謝謝

來源

2011-08-18 Houman

那麼你的要求聽起來有點不切實際，即縮放鼠標懸停的圖像，並保持它們永遠縮放然後向前？

但如果你堅持

作爲觸發的一部分，縮放動畫將反正被移除（並縮減到原來的大小），如果你不將鼠標。

因此，對於你的要求履行，您可以在一個附加行爲擴展，動畫按鈕，而不是在觸發啓動對主線程，當鼠標懸停是真實的（並確保你寫的沒有反向的邏輯，當它不是一個鼠標移到）。

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

讓我知道這是否有幫助。

來源

2011-08-18 07:45:29

天使，謝謝你的回答。對不起，我想你已經理解了我。當我將鼠標懸停在按鈕上時，圖像的縮放比例會變大，但是我仍然在圖標上方懸停，那麼縮放應保持原位？但是這不會發生在我的代碼示例中。一旦我將鼠標懸停在按鈕上，圖像就會放大，然後突然下降到最初的非縮放大小，爲什麼？ – Houman

還有很多感謝第二個決議。我希望你的解決方案適用於Silverlight 4.0 :) – Houman

@Kave，在那種情況下，你是否將你的動畫'StoryBoard'的'AutoReverse'屬性設置爲'false'？此外，Image的第二個解決方案應該作爲附加屬性和'TemplateBinding'或'Binding'與'TemplatedParent'也應該在Silverlight 4.0中工作。 –

如何停止圖像縮放動畫來重置自身？

回答

相關問題