How to animate Windows Phone 8.1 AppBar background color?

Question

I can't seem to get the background color of my AppBar to animate using a ColorAnimation.

<Storyboard x:Name="FadeColorStoryboard">
    <ColorAnimation
        Storyboard.TargetName="bar"
        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
        From="Yellow" To="Green" Duration="0:0:1" />
</Storyboard>

I've tested the storyboard by animating the foreground color of a TextBlock and it works. I there any way that I can animate the AppBar's background color?

I've also tried using a custom attached property to change the background color, but I can't set the TargetProperty of the storyboard to a custom attached property, unlike in Silverlight.

First thing I'd look into is setting `EnableDependentAnimation` property to true on the animation... — Filip Skakun, Sep 09 '14 at 18:20
@FilipSkakun Forgot to mention I tried that already and it didn't work. — Decade Moon, Sep 10 '14 at 00:39
Well, I don't have the time to check it now, but it used to be at least in the Windows Phone Silverlight world that app bar properties were not bindable and probably not animateable, so targeting an attached property might be one solution. You might not be able to target it with XAML, but maybe you can do it in code behind. I don't remember right now. If not an attached property then a regular property. The weirdest workaround I used once was to have an invisible `Slider` control, animate its `Value` property and relay the changes elsewhere (for changing `ScrollViewer` offsets). — Filip Skakun, Sep 10 '14 at 00:58
@FilipSkakun I also tried targeting the attached property in code, but to no avail. According to [this SO question](http://stackoverflow.com/questions/7520709/set-custom-attached-property-on-storyboard) it is possible, but only for silverlight apps. — Decade Moon, Sep 10 '14 at 01:08

Decade Moon · Accepted Answer · 2014-09-10T01:12:23.927

Ok, so I figured out a solution. It's not the best solution, but it does what I want. I'd still be interested if there is a better way, but this'll do for now.

EDIT: Forgot to mention, this requires EnableDependentAnimation on the ColorAnimation to be set to true for some reason.

I subclassed CommandBar and added my own BackgroundColor property which can be animated.

class CommandBarEx : CommandBar
{
    public Color BackgroundColor
    {
        get { return (Color)GetValue(BackgroundColorProperty); }
        set { SetValue(BackgroundColorProperty, value); }
    }

    public static readonly DependencyProperty BackgroundColorProperty =
        DependencyProperty.Register("BackgroundColor", typeof(Color), typeof(CommandBarEx), new PropertyMetadata(Colors.Gray, onBackgroundColorPropertyChanged));

    static void onBackgroundColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var bar = d as CommandBarEx;
        if (bar == null)
            return;

        var brush = bar.Background as SolidColorBrush;
        if (brush == null)
        {
            bar.Background = new SolidColorBrush((Color)e.NewValue);
        }
        else
        {
            brush.Color = (Color)e.NewValue;
            bar.Background = brush;  // force property change event
        }
    }
}

How to animate Windows Phone 8.1 AppBar background color?

1 Answers1