動畫圖像 - 按鈕

我需要一段時間以來使用的自定義「圖像按鈕」的幫助。它的偉大工程，但我無法弄清楚如何動畫與這三種狀態的按鈕（正常，鼠標懸停，按下）：動畫圖像 - 按鈕

中性至鼠標懸停
鼠標可按下

林並不熟悉XAML，所以我無法弄清楚。無論如何，這裏是我一直在使用的代碼：

<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89"> 
    <Button.Template> 
     <ControlTemplate TargetType="{x:Type Button}"> 
      <Grid> 
       <Image Name="Normal" Source="normal.png" /> 
       <Image Name="Hover" Source="hover.png" Visibility="Hidden" /> 
       <Image Name="Pressed" Source="pressed.png" Visibility="Hidden" /> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="ButtonBase.IsPressed" Value="True"> 
        <Setter Property="UIElement.Visibility" TargetName="Normal" Value="Hidden" /> 
        <Setter Property="UIElement.Visibility" TargetName="Pressed" Value="Visible" /> 
       </Trigger> 
       <Trigger Property="UIElement.IsMouseOver" Value="True"> 
        <Setter Property="UIElement.Visibility" TargetName="Normal" Value="Hidden" /> 
        <Setter Property="UIElement.Visibility" TargetName="Hover" Value="Visible" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Button.Template> 
</Button>

任何答案是讚賞。

來源

2011-10-31 Jonas Libbe

的其他方式來完成動畫是使用觸發器像你這樣的結合Storyboards

這裏所做的是（集成於您發佈的代碼）一些示例代碼：

<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89"> 
<Button.Template> 
    <ControlTemplate TargetType="{x:Type Button}"> 
     <Grid> 
      <Image Name="Normal" Source="normal.png" /> 
      <Image Name="Hover" Source="hover.png" Opacity="0"/> 
      <Image Name="Pressed" Source="pressed.png" Opacity="0" /> 
     </Grid> 
     <ControlTemplate.Resources> 
      <Storyboard x:Key="MouseDownTimeLine"> 
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
      <Storyboard x:Key="MouseUpTimeLine"> 
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
      <Storyboard x:Key="MouseEnterTimeLine"> 
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
      <Storyboard x:Key="MouseExitTimeLine"> 
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </ControlTemplate.Resources> 
     <ControlTemplate.Triggers> 
      <Trigger Property="ButtonBase.IsPressed" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/> 
       </Trigger.ExitActions> 
      </Trigger> 
      <Trigger Property="UIElement.IsMouseOver" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard Storyboard="{StaticResource MouseEnterTimeLine}"/> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/> 
       </Trigger.ExitActions> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Button.Template>

來源

2011-10-31 14:34:18 dasheddot

OMG人，它的工作完美！非常感謝！：D –

沒問題。很高興幫助你 – dasheddot

您應該使用VisualStateManager來處理這類事情，請參閱其文檔以查看使用示例。

來源

2011-10-31 14:18:54

動畫圖像 - 按鈕

回答

相關問題