data binding property of a other control to a styl

Question

i'm trying to implement a tab style radio button. this style contains a textblock as a child of a grid which changes it's color when checked and the grid is a child of border element.

i'm trying to bind the grid's background only when it is in checked state but the button end's up bieng transparent

                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentPresenter" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="CheckedVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#ff9977"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <Grid x:Name="CheckedVisual" Width="{TemplateBinding Width}"
                                   Height="{TemplateBinding Height}" 
                                   Opacity="{TemplateBinding Opacity}"
                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                   VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="Transparent">
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" d:LayoutOverrides="TopPosition, BottomPosition" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <CompositeTransform/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>

                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

i've even tried binding the Grid x:Name="CheckedVisual" 's backgroundproperty to {TemplateBinding Background}

the problem is in this part of the code

<VisualStateGroup x:Name="CheckStates">

                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentPresenter" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="CheckedVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="{TemplateBinding Background}"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>

when the radio button is checked the opacity is going to 1 as expected but the colour isn't changing . i've even tried {Binding Background} .. but changing to statoc color works for eg: "#117755".

can anyone please guide me.. The end result i'm aiming at is changing the backgrund of the grid when it is checked stated .. and the color should be changed to the binded value of background.

Answer 1

You can't do that according to the docs: https://msdn.microsoft.com/en-us/library/ms742868.aspx?f=255&MSPPError=-2147217396

"Animate in a ControlTemplate"

You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. That's because everything inside a ControlTemplate must be thread-safe, and the timing system must Freeze Storyboard objects to make them thread-safe. A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. For more information about freezing and other Freezable features, see the Freezable Objects Overview.

What you could do is to have a separate Rectangle/Border/Something behind your elements with its background bound to your wanted color and animate it's opacity instead. It'll look the same, but you won't run into this issue.