Как анимировать свойство Content для Button с помощью Image control

Question

У меня есть кнопка управления.Я заполняю его свойство Content с помощью Image control, ссылаясь на какой-то файл .png в источниках проекта.

Затем я хочу, чтобы кнопка переключала свое свойство Content на другое изображение после нажатия на него или удерживания над ним мыши.

Что я сделал: я создал стиль для перезаписи шаблона кнопки по умолчаниюи добавил собственные триггеры: один для IsPressed и один для свойств IsMouseOver.

Чтобы отреагировать на свойство IsPressed, мне нужно создать раскадровку (я не уверен, почему, но просто добавить Setter не работает), поэтому я добавилРаскадровка, в которой изменилось свойство Content для Button с необходимым изображением.

Но как только я запустил приложение, у меня возникло исключение типа «Не удается заморозить это дерево шкалы времени раскадровки для использования в потоках».

Я полагаю, этоиз-за управления изображением нельзя было заморозить или что-то в этом роде.

Итак, вопрос в том, как достичь моей очень простой цели с помощью простых действий (или любым другим способом).Я думаю, что очень странно делать такие простые вещи такими длинными и трудными.

Извините, мой плохой английский и заранее спасибо.

Ниже 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>

Answer 1

Вместо того, чтобы назначать свойство Source элемента Image, который был установлен с помощью Style Setter, просто поместите Image в Button 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>