How to bind background color to property "To" of a ColorAnimation?

Question

I have a color animation for a switch control and to let the background color to be changable I want to bind the Background property of the parent control to the To property of ColorAnimation. I tried a lot but no one worked. How can I do that?

Switch control style:

<Setter Property="Template">
<Setter.Value>
    <ControlTemplate TargetType="CheckBox">
        <Viewbox Stretch="Uniform">
            <Border x:Name="layer" Width="35" Height="20" CornerRadius="10,10,10,10" 
                            Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                <Canvas Canvas.Top="0" Canvas.Left="0">
                    <Ellipse x:Name="circle" Fill="Gray" Stroke="DarkGray" StrokeThickness="0" 
                                 Width="20" Height="20">
                        <Ellipse.RenderTransform>
                            <TranslateTransform X="0" Y="0"/>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                </Canvas>
            </Border>
        </Viewbox>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="layer" 
                                                    Storyboard.TargetProperty="Background.Color"
                                                    To="LightGreen"
                                                    Duration="0:0:0.3"/>
                            <DoubleAnimation Storyboard.TargetName="circle"
                                                     Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
                                                     To="15"
                                                     Duration="0:0:0.3"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="layer" 
                                                    Storyboard.TargetProperty="Background.Color"
                                                    Duration="0:0:0.3"
                                                        To="{TemplateBinding Background}"/>
                            <DoubleAnimation Storyboard.TargetName="circle"
                                                     Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
                                                     To="0"
                                                     Duration="0:0:0.3"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Setter.Value>
</Style>

ColorAnimation part:

    <ColorAnimation Storyboard.TargetName="layer" 
                    Storyboard.TargetProperty="Background.Color"
                    To="{TemplateBinding Background}"
                    Duration="0:0:0.3"/>

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

You can not using binding in color animations,if you do you will be getting this error "Cannot freeze this Storyboard timeline tree for use across threads", more info on this here: WPF Animation "Cannot freeze this Storyboard timeline tree for use across threads".

Now if you want a way around, what you can do is make a static resource which represents the background color of your parent control like this:

 <Color  A="255"
            R="100"
            G="0"
            B="0"
            x:Key="resource" />

and then you can assign this resource to your color animation property like this:

<ColorAnimation Storyboard.TargetName="layer"
                                                        Storyboard.TargetProperty="Background.Color"
                                                        Duration="0:0:0.3"
                                                        To="{StaticResource ResourceKey=resource }" />

Hope it helps.

edited May 23 '17 at 12:08

Community

1
1

answered Aug 28 '16 at 15:03

Sameed

655
1
5
18

But I want it to be customizable in the MainWindow.xaml. So the color should not be constant, when the control's background is changed, the `To` property should change too. Setting the color to a constant value as a resource cannot be changed. – Ali Tor Aug 28 '16 at 15:10
then i guess you will have to do this in code behind. – Sameed Aug 28 '16 at 15:13
@AliTor you can use dynamic resource then, here is a good example: http://stackoverflow.com/questions/17502467/set-control-background-color-using-dynamic-resource-in-wpf – Sameed Aug 28 '16 at 15:18
you can change the value of the dynamic resource on your checkbox checked event, setting it to the current background color of your control. – Sameed Aug 28 '16 at 15:24

How to bind background color to property "To" of a ColorAnimation?

1 Answers1