Как анимировать содержимое изображения в WPF?

Question

У меня действительно простой пользовательский элемент управления с кнопкой, на которой есть изображение. Я хочу анимировать изображение кнопки, изменив его на другое изображение.

<UserControl.Resources>
    <Image x:Key="GlyphDefault" Source="pack://application:,,,/X;component/images/Glyphs_Default.png" Height="8" Width="8" />
    <Image x:Key="GlyphClicked" Source="pack://application:,,,/X;component/images/Glyphs_Click.png" Height="8" Width="8"  />

</UserControl.Resources>
    <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="MouseStates">
            <VisualState Name="MouseHover" >
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="GlyphButton"
                                Storyboard.TargetProperty="Content"
                                Duration="0:0:1" >
                        <ObjectAnimationUsingKeyFrames.KeyFrames>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                <DiscreteObjectKeyFrame.Value="{StaticResource GlyphClicked}" />
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames.KeyFrames>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState Name="MouseNotHover" >
            </VisualState>
        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>
    <Button x:Name="GlyphButton" 
            MouseLeave="GlyphButton_MouseLeave"
            MouseEnter="GlyphButton_MouseEnter"
            Content="{StaticResource GlyphDefault}"
            />
</Grid>

К сожалению, когда я запускаю это и при наведении курсора на кнопку я получаю исключение «Freezable не может быть заморожено» (обработчики событий мыши изменяют состояния). Похоже, что он пытается заморозить текущее изображение, но по какой-то причине не может.

Я пытался сделать это без использования статического ресурса (просто вставив изображение в строку), но с той же ошибкой. Как ни странно, я могу найти очень мало документации или блогов о анимации в свойстве Content. Я должен был предположить, что это будет общий сценарий. Есть идеи, что я делаю не так?

Я очень ценю вашу помощь в этом!

Answer 1

Вероятно, это не самый лучший (или самый простой) способ добиться этого. Свойство Content определенно не то, что дизайнеры WPF имели в виду для анимации. Вот как я бы это сделал вместо этого:

1. Установите Button.Content равным Grid с обоими изображениями, размещенными внутри (таким образом, накладывая друг на друга).
2. Установите Opacity на Image, который вы хотите, чтобы он был изначально видимым, равным 1,0, а 0,0 на Image, который будет изначально скрыт.
3. Анимируйте Opacity, используя DoubleAnimation вместо ObjectAnimation - вы можете переключать изображения, анимируя непрозрачность одного до 0,0, одновременно доводя другое до 1,0. Кроме того, в зависимости от продолжительности, это даст вам хороший переход замирания.