Невозможно анимировать границу объекта в Expression Blend с помощью ресурсов кисти

Я пытаюсь оживить цвет границы объекта с помощью Expression blend.

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

Разве мы не можем анимировать свойства цвета с помощью ресурсов кисти?

Вот код, сгенерированный Expression Blend при использовании жестко запрограммированного значения цвета для границы (этот код работает, анимация воспроизводится правильно, но значение границы жестко запрограммировано):

<Style x:Key="StandardTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
    (...)
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Grid x:Name="grid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                        (...)
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0" To="Focused">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFC2C2C2"/>
                                            <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF5FA5C9"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    (...)
</Style>

Как я могу заменить жестко заданное значение # FF5FA5C9 на значение локального ресурса кисти? Должен ли я просто заменить оператор Value = "# FF5FA5C9" на оператор DynamicResource / StaticResource?


person Hussein Khalil    schedule 06.01.2012    source источник


Ответы (2)


Я мог бы порекомендовать вместо того, чтобы пытаться анимировать ресурс кисти, просто сделайте еще одну копию своей формы прямоугольника и назовите ее как-то вроде Rectangle_Focused и разместите ее по порядку поверх существующего прямоугольника, чтобы она отображалась поверх исходного прямоугольника.

Добавьте к этой фигуре ресурс кисти границы, а затем установите видимость фигур в свернутом виде. Затем в состоянии фокусировки, состоянии наведения курсора мыши или в другом, что вам нравится, измените его видимость на видимый. Вроде как;

<VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Copy">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

Не спрашивайте меня, почему, но анимация ресурса кисти в том же объекте не сокращает его, но вы можете добиться того же эффекта, который ищете, хотя и вот так.

person Chris W.    schedule 06.01.2012
comment
Спасибо, Крис, это действительно очень умное решение! Есть ли преимущество в использовании ресурса Brush перед ресурсом Color? (См. Мой ответ). Действительно, неспособность анимировать с помощью ресурса кисти просто странно ... - person Hussein Khalil; 06.01.2012
comment
Хорошо с помощью кисти вы можете добиться лучших визуальных эффектов, таких как линейные или радиальные градиенты и т. Д. В отличие от ограничения только сплошными цветами. Так что во многих случаях, в зависимости от вашего дизайна, определенно гораздо полезнее иметь доступ к вашим ресурсам кисти. - person Chris W.; 06.01.2012
comment
Не волнуйся, рад, что смог помочь. Ваше здоровье! - person Chris W.; 06.01.2012

Я считаю, что нашел проблему.

По некоторым причинам назначение штриха как значение локального ресурса Brush не создает ключевой кадр в раскадровке анимации:

Вот чего НЕ СЛЕДУЕТ делать:

http://i.imgur.com/5X7Xm.jpg

Вместо этого вам нужно создать локальный ресурс Color и назначить его следующим образом:

http://i.imgur.com/UGIOl.jpg

Ключевой кадр в раскадровке будет правильно создан, и анимация будет работать.

Может быть, ошибка в Expression Blend? Это работает так, как должно? Без понятия :)

person Hussein Khalil    schedule 06.01.2012
comment
Это лучшее решение, чем наложение другой формы, спасибо, позвольте надеяться, что EB скоро будет поддерживать Brush-Keyframing :) - person kneo; 09.11.2012