WPF 动画按钮图像答案

【问题标题】：WPF animate button ImageWPF 动画按钮图像
【发布时间】：2014-04-18 11:56:32
【问题描述】：

我有一个按钮，我要在其上添加 2 张图像。稍后我必须在这些按钮图像上添加动画。在下面的 Xaml 代码中，我使用的是按钮模板，但是在应用模板后，按钮的原始行为会丢失，例如没有边框、悬停时鼠标光标没有变化等。它只是作为平面图像出现。

如何恢复按钮的默认行为？

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

【问题讨论】：

将BasedOn 应用到样式模板并继承其余部分。

标签： c# wpf silverlight wpf-animation

【解决方案1】：

使用 ContentTemplate 和 DataTemplate 代替 Template 和 ControlTemplate，这将有助于显示按钮的原始行为，如边框和更改鼠标悬停时的按钮外观等。

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>

【讨论】：