How to change Rectangle's Fill defined in template by using VisualStateManager.GoToState

 

having rectangle , filled brush defined in template. when changing view state "checked", replace other brush. corroect way?

tried:

--------------------in resource, has checkedcolor, defaultbrush, checkedbrush_2 defined:

<color x:key="checkedcolor">#ffff0000</color>

<radialgradientbrush x:key="defaultbrush" gradientorigin="0.205,0.892">
        <radialgradientbrush.relativetransform>
            <transformgroup>
                <scaletransform centerx="0.5" centery="0.5" scalex="0.929" scaley="0.929"/>
                <skewtransform anglex="0" angley="0" centerx="0.5" centery="0.5"/>
                <rotatetransform angle="180.34" centerx="0.5" centery="0.5"/>
                <translatetransform x="0.111" y="-0.129"/>
            </transformgroup>
        </radialgradientbrush.relativetransform>
        <gradientstop color="#ffe6d8bc" offset="1"/>
        <gradientstop color="#ffffffff" offset="0"/>
</radialgradientbrush>

<solidcolorbrush x:key="checkedbrush_2" color="#ffff0000" />  

-------------------- define template , set view state "checked" replace rect's fill when "checked". "rect has "defaultbrush" set initially:

<style x:key="buttonstyle" targettype="button">
        <setter property="template">
            <setter.value>
                <controltemplate targettype="button">
                    <grid >
                       
                        <vsm:visualstatemanager.visualstategroups>......
 <vsm:visualstate x:name="checked">
        <storyboard>
            <coloranimation duration="0" storyboard.targetname="rect" storyboard.targetproperty="(rectangle.fill).(solidcolorbrush.color)" to="{staticresource checkedcolor}"/>
            <!--<coloranimation duration="0" storyboard.targetname="rect" storyboard.targetproperty="(rectangle.fill)." to="{staticresource checkedbrush_2}"/>-->
       </storyboard>
 </vsm:visualstate>
   </vsm:visualstatemanager.visualstategroups>
                       
                        <rectangle x:name="rect" width="20" height="20"  
                                   fill="{staticresource defaultbrush}">
                        </rectangle>

......

--------------------- button using template

<button x:name="button" style="{staticresource buttonstyle}">

=============== want change fill of rect in code, gotostate "checked"

visualstatemanager.gotostate(button, "checked", false);

1. using "checkedcolor" in state "checked"

<coloranimation duration="0" storyboard.targetname="rect" storyboard.targetproperty="(rectangle.fill).(solidcolorbrush.color)" to="{staticresource checkedcolor}"/>

it crashes with:

cannot resolve targetproperty (rectangle.fill).(solidcolorbrush.color) on specified object.

2. using "checkedbrush_2"  in state "checked",

<coloranimation duration="0" storyboard.targetname="rect" storyboard.targetproperty="(rectangle.fill)" to="{staticresource checkedbrush_2}"/>

it crashes with:
coloranimation cannot used animate property fill due incompatible type.

thanks!

 

you can use object animation, not color animation, if want swap brush:

<visualstatemanager.visualstategroups>
    <visualstategroup x:name="commonstates">
        <visualstate x:name="unchecked" />
        <visualstate x:name="checked">
            <storyboard>
                <objectanimationusingkeyframes storyboard.targetname="core" storyboard.targetproperty="fill">
                    <objectanimationusingkeyframes.keyframes>
                        <discreteobjectkeyframe keytime="0:0:0">
                            <discreteobjectkeyframe.value>
                                <solidcolorbrush color="red"/>
                            </discreteobjectkeyframe.value>
                        </discreteobjectkeyframe>
                    </objectanimationusingkeyframes.keyframes>
                </objectanimationusingkeyframes>
            </storyboard>
        </visualstate>
    </visualstategroup>
</visualstatemanager.visualstategroups>

Silverlight  >  Programming Silverlight with .NET – General