animation - wpf usercontrol states, modifying height -

i little bit confused of states , animations in wpf.

i make usercontrol. usercontrol contains (inside main grid) 2 grid. 1 of them header , second 1 content. if user click on header, content expand, otherwise collapsed. , animation expanding (slide down content header).

basicaly states (for future purpose). problem is, if add states , using slide efect transformation, content of grid (content grid) transformed well. use states modifying height of element. if u modify element, no animation appear , change height @ once.

the hierarchy looks like:
--- wrapper grid
------ header grid
--------- content of header
------ content grid
--------- content of content grid (like buttons, labels, etc)

the visualstates looks like:

    <visualstatemanager.visualstategroups>         <visualstategroup x:name="visualstategroup">             <visualstategroup.transitions>                 <visualtransition generatedduration="0:0:1"/>             </visualstategroup.transitions>             <visualstate x:name="expanded"/>             <visualstate x:name="collapsed">                 <storyboard>                     <objectanimationusingkeyframes storyboard.targetproperty="(frameworkelement.height)" storyboard.targetname="grid">                         <discreteobjectkeyframe keytime="0">                             <discreteobjectkeyframe.value>                                 <x:double>0</x:double>                             </discreteobjectkeyframe.value>                         </discreteobjectkeyframe>                     </objectanimationusingkeyframes>                 </storyboard>             </visualstate>         </visualstategroup>     </visualstatemanager.visualstategroups> 

any advice see expanding , collapsing grid modifying height states? animation works perfect, better me states, how said, future purpose.

maybe found answer. works trying understanding changes.

code of visualstates in here:

    <visualstatemanager.visualstategroups>         <visualstategroup x:name="visualstategroup">             <visualstategroup.transitions>                 <visualtransition generatedduration="0"/>             </visualstategroup.transitions>             <visualstate x:name="expanded">                 <storyboard>                     <doubleanimation enabledependentanimation="true" storyboard.targetname="grid" storyboard.targetproperty="(frameworkelement.height)" from="0" to="366" duration="0:0:0.600" />                 </storyboard>             </visualstate>             <visualstate x:name="collapsed">                 <storyboard>                     <doubleanimation enabledependentanimation="true" storyboard.targetname="grid" storyboard.targetproperty="(frameworkelement.height)" from="366" to="0" duration="0:0:0.600" />                 </storyboard>             </visualstate>         </visualstategroup>     </visualstatemanager.visualstategroups> 

the important line is:

<doubleanimation enabledependentanimation="true" storyboard.targetname="grid" storyboard.targetproperty="(frameworkelement.height)" from="366" to="0" duration="0:0:0.600" /> 

i found needed have enabledependantanimation true.

now works charm, not set. possibly best can in here.