windows runtime - WinRT/XAML Changing an ellipse's fill color upon mouse over -

i'm new winrt/xaml dev. after hours of research on net , many trial , error attempts, still unable understand how use visualstatemanager change fill color of ellipse based on user input on object. following code not work. here code sits today:

<ellipse stroke="white" strokethickness="5" width="90" height="90">         <visualstatemanager.visualstategroups>             <visualstategroup x:name="commonstates">                 <visualstate x:name="normal"/>                 <visualstate x:name="mouseover">                     <storyboard>                         <coloranimation to="red" storyboard.targetname="ellipse" storyboard.targetproperty="fill.color"/>                     </storyboard>                 </visualstate>                 <visualstategroup.transitions>                     <visualtransition to="normal" generatedduration="00:00:01"/>                     <visualtransition to="mouseover" generatedduration="00:00:01"/>                 </visualstategroup.transitions>             </visualstategroup>         </visualstatemanager.visualstategroups>     </ellipse> 

update:

thank nicholas w. nudge in right direction. missing template correct target property. following code working intended:

<button>             <button.template>                 <controltemplate>                     <grid>                         <ellipse x:name="myellipse" stroke="white" strokethickness="5" width="70" height="70" fill="transparent"/>                         <visualstatemanager.visualstategroups>                             <visualstategroup x:name="commonstates">                                 <visualstate x:name="normal"/>                                 <visualstate x:name="pressed">                                     <storyboard>                                         <coloranimation storyboard.targetname="myellipse" to="#ff0061d4"  storyboard.targetproperty="(rectangle.fill).(solidcolorbrush.color)" duration="0:0:0"/>                                     </storyboard>                                 </visualstate>                             </visualstategroup>                         </visualstatemanager.visualstategroups>                     </grid>                 </controltemplate>             </button.template>         </button> 

there few problems here, firstly there nothing causing visual state manager transition between states, secondly reference "ellipse" target not resolved, , thirdly there no brush defined on perform color animation. if retemplate control using visual states, first part done you, otherwise need set explicit state transitions (example). enable reference work, can give element name, , don't nest visualstategroups attached property in element (or animate name of brush as per msdn example). , last part involves setting brush initially, on animate color property. together, example of retemplating button:

    <button>         <button.template>             <controltemplate>                 <grid>                     <ellipse x:name="ellipse" stroke="white" strokethickness="5" width="90" height="90"                              fill="black"/>                     <visualstatemanager.visualstategroups>                         <visualstategroup x:name="commonstates">                             <visualstate x:name="normal"/>                             <visualstate x:name="mouseover">                                 <storyboard>                                     <coloranimation storyboard.targetname="ellipse" to="red"  storyboard.targetproperty="fill.color"/>                                 </storyboard>                             </visualstate>                             <visualstategroup.transitions>                                 <visualtransition to="normal" generatedduration="00:00:01"/>                                 <visualtransition to="mouseover" generatedduration="00:00:01"/>                             </visualstategroup.transitions>                         </visualstategroup>                     </visualstatemanager.visualstategroups>                 </grid>             </controltemplate>         </button.template>     </button>