WPF animate button Image

Question

I have a button on which I am adding 2 images. Later on I have to put animation on these images of button. In below Xaml code I am using button template but after applying the templates button original behavior is lost like there is no border, no change on mouse cursor when hover etc. It is just apear as plan image.

How can I put back the button default behaviour?

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

Answer 1

Instead of Template and ControlTemplate use ContentTemplate and DataTemplate and it will helps to show button original behavior like border and change button appearance on mouse hover etc.

Template defines the appearance of the control. ContentTemplate specifies how the content contained in/displayed by a ContentControl is to be displayed.

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