1

我有一个按钮，我要在其上添加 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>
4

1 回答 1

1

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

模板定义控件的外观。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-18T13:50:18.757 回答