2014-04-18 151 views
1

我有一個按鈕,我添加了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> 
+0

應用[支持算法FMP](http://msdn.microsoft.com/en-us/library/system.windows.style.basedon(V = vs.110)的.aspx)到樣式模板來代替,而繼承其餘部分。 –

回答

1

而是模板和控件模板的使用的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>