Animated Expander Header Animation

WPF Studio, Themes, and Shared Library for WPF Forum

Posted 7 years ago by Kevin Drapel
Version: 12.2.0570
Avatar

Hi,

I just turn on the latest version, before this I used the version 2011.1.

I've made a new style to redesign my AnimatedExpander's header as follow

<Style x:Key="MyExpanderStyle" TargetType="{x:Type Controls:AnimatedExpander}">
    <Style.Resources>
        <LinearGradientBrush x:Key="{x:Static themes:AssetResourceKeys.ExpanderHeaderBackgroundNormalBrushKey}"
StartPoint="0,0" EndPoint="1,0" >
            <GradientStop Offset="0" Color="DarkBlue"/>
            <GradientStop Offset="1" Color="LightBlue"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.ExpanderHeaderBackgroundHoverBrushKey}"
Color="DarkBlue"/>
    </Style.Resources>
</Style>

But now I want an animation on MouseEnter and MouseLeave event:

When the mouse enter upon the header, the color's header smoothly switch from my gradient (DarkBlue - LightBlue) to full DarkBlue and make the reverse operation on MouseLeave.

With my style above the change is direct, no animation.

On version 2011.1 I was able to use the property HeaderBackgroundNormal to perform my animation:

LinearGradientBrush currentBrush = uxExpander.HeaderBackgroundNormal as LinearGradientBrush;

if (currentBrush != null) {
    if (BindingOperations.IsDataBound(uxExpander, AnimatedExpander.HeaderBackgroundNormalProperty)) {
       uxExpander.HeaderBackgroundNormal = currentBrush.Clone();
    }
    PointAnimation a = new PointAnimation {
        From = currentBrush.StartPoint,
        To = new Point(0.999, 0),
        Duration = new Duration(TimeSpan.FromSeconds(0.2))
    };
uxExpander.HeaderBackgroundNormal.BeginAnimation(LinearGradientBrush.StartPointProperty, a);
}

 How can I perfom a similar animation on the last version? Without property on which apply my animation?

 

Thanks for you help

 

Kévin

Comments (2)

Answer - Posted 7 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Kevin,

You could make your own attached dependency property and use that for the animation the same way you did in the past.  That would be easiest.


Actipro Software Support

Posted 7 years ago by Kevin Drapel
Avatar

Thanks for the answer, yes I tried like that and it's working well.

The latest build of this product (v2019.1 build 0682) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.