WPF动画按钮图片

我有一个按钮，我添加了2张图片。稍后我必须在这些按钮图像上放置动画。在下面的Xaml代码中，我使用的是按钮模板，但是在应用模板按钮后，原来的行为会像没有边框一样丢失，当鼠标悬停时不会改变鼠标光标等。它只是作为平面图像的apear。WPF动画按钮图片

我该如何放回按钮的默认行为？

 <Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" Click="buttonStart_Click" HorizontalAlignment="Right" Width="133" > 
     <Button.Template> 
      <ControlTemplate TargetType="Button" > 
       <Grid> 
        <Image x:Name="Normal" Source="/TFSCheckinReportGenerator;component/Resource/generate.png" Height="80" Width="80" Opacity="1"></Image> 
        <Image x:Name="Waiting" Source="/TFSCheckinReportGenerator;component/Resource/waiting.png" Height="80" Width="80" Opacity="0"></Image> 
       </Grid> 
       <ControlTemplate.Resources> 

        <Storyboard x:Key="ChangeImageToWaiting"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity"> 
          <SplineDoubleKeyFrame Value="0"/> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity"> 
          <SplineDoubleKeyFrame Value="1"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 

        <Storyboard x:Key="Progress" RepeatBehavior="Forever"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True"> 
          <SplineDoubleKeyFrame Value="40"/> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True"> 
          <SplineDoubleKeyFrame Value="40"/> 
         </DoubleAnimationUsingKeyFrames> 

        </Storyboard> 
       </ControlTemplate.Resources> 
      </ControlTemplate> 
     </Button.Template> 
    </Button>

来源

2014-04-18 PawanS

应用[支持算法FMP]（http://msdn.microsoft.com/en-us/library/system.windows.style.basedon（V = vs.110）的.aspx）到样式模板来代替，而继承其余部分。 –

而是模板和控件模板的使用的ContentTemplate和的DataTemplate，它会有助于显示按钮原来的行为像鼠标边框和变化按钮的外观等等悬停

Template定义的外观控制。 ContentTemplate指定如何显示由ContentControl包含/显示的内容。

<Button Height="89" Margin="0,62,158,0" Name="buttonStart" VerticalAlignment="Top" HorizontalAlignment="Right" Width="133" > 
     <Button.ContentTemplate> 
      <DataTemplate> 
       <Grid> 
        <Image x:Name="Normal" Source="catalogscreen.png" Height="80" Width="80" Opacity="1"></Image> 
        <Image x:Name="Waiting" Source="catalogscreen.png" Height="80" Width="80" Opacity="0"></Image> 
       </Grid> 
       <DataTemplate.Resources> 
        <Storyboard x:Key="ChangeImageToWaiting"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity"> 
          <SplineDoubleKeyFrame Value="0"/> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Opacity"> 
          <SplineDoubleKeyFrame Value="1"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="Progress" RepeatBehavior="Forever"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Width" Duration="00:00:01" AutoReverse="True"> 
          <SplineDoubleKeyFrame Value="40"/> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Waiting" Storyboard.TargetProperty="Height" Duration="00:00:01" AutoReverse="True"> 
          <SplineDoubleKeyFrame Value="40"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </DataTemplate.Resources> 
      </DataTemplate> 
     </Button.ContentTemplate> 
    </Button>

来源

2014-04-18 13:50:18

WPF动画按钮图片

回答

相关问题