CODEWITHSUNDEEP
wpfbindingcoloranimation
Ali Tor
Ali Tor

Reputation: 2945

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

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"/>

Upvotes: 0

Views: 1118

Answers (1)

Sameed
Sameed

Reputation: 703

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.

Upvotes: 1

Related Questions