Question

我有一个按钮，我正在添加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>

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

WPF动画按钮图像

1 个答案: