如何使用Image控件为Button的Content属性设置动画

时间:2018-10-14 14:35:27

标签: wpf xaml

我有一个Button控件。我用Image控件填充了其Content属性,该控件引用了项目源文件中的某些.png文件。

然后,我希望按钮在按下或将鼠标悬停在其上时将其Content属性切换到另一张图像。

我要做什么:我创建了一种样式来覆盖默认按钮的模板,并添加了自己的触发器:一个用于IsPressed,另一个用于IsMouseOver属性。

要对IsPressed属性做出反应,我需要制作Storyboard(我不确定为什么,但是仅仅添加Setter无法正常工作),所以我在其中添加了Storybard,其中Button的Content属性更改为所需的Image。

但是一旦我运行了应用程序,我就会遇到类似的异常 “无法冻结此情节提要板时间轴树,以供跨线程使用。”

我想是因为图像控件无法冻结或类似原因。

所以问题是:如何通过一些简单的动作(或任何其他方式)实现我非常简单的目标。我认为这么简单又漫长而艰辛的事情很奇怪。

对不起我的英语不好,谢谢。

在我的按钮样式的XAML代码下面

<Style x:Key="AcceptWordButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border 
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        >
                        <ContentPresenter
                            x:Name="PART_Content"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            TextElement.Foreground="{TemplateBinding Foreground}"
                            >

                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Content">
            <Setter.Value>
                <Image Source="WizardButton.png"/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetProperty="Button.Content">
                                <ObjectAnimationUsingKeyFrames.KeyFrames>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Image Source="WizardButtonPressed.png"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames.KeyFrames>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source="WizardButtonHovered.png"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

1 个答案:

答案 0 :(得分:2)

无需分配由样式设置器设置的Image元素的Source属性,只需将Image放入按钮的ContentTemplate

<Style x:Key="AcceptWordButton" TargetType="Button">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Source="{Binding}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Content" Value="WizardButton.png"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Content" Value="WizardButtonHovered.png"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Content" Value="WizardButtonPressed.png"/>
        </Trigger>
    </Style.Triggers>
</Style>