c# - VisualStates ToggleButton not working correctly -

c# - VisualStates ToggleButton not working correctly -

i have default style togglebuttons using visualstatemanager

<style targettype="togglebutton"> <setter property="template"> <setter.value> <controltemplate targettype="togglebutton"> <grid width="{templatebinding width}" height="{templatebinding height}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"> <storyboard duration="0" repeatbehavior="forever"> <objectanimationusingkeyframes storyboard.targetname="backgroundellipse" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{themeresource pagebackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="contentpresenter" storyboard.targetproperty="foreground"> <discreteobjectkeyframe keytime="0" value="{themeresource buttontextcolor}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="pointerover"/> <visualstate x:name="pressed"/> <visualstate x:name="disabled"/> </visualstategroup> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard duration="0" repeatbehavior="forever"> <objectanimationusingkeyframes storyboard.targetname="backgroundellipse" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{themeresource togglebuttoncheckedthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="contentpresenter" storyboard.targetproperty="foreground"> <discreteobjectkeyframe keytime="0" value="{themeresource pagebackgroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unchecked"/> </visualstategroup> </visualstatemanager.visualstategroups> <ellipse x:name="backgroundellipse" stroke="white" strokethickness="3"/> <contentpresenter x:name="contentpresenter" content="{templatebinding content}" horizontalalignment="center" verticalalignment="center"/> </grid> </controltemplate> </setter.value> </setter> </style>

unfortunately alter works 1 time , state alter checked not triggered when checking togglebutton when mouse leaves button after checked.

i have tried using same storyboard utilize in "normal" "unchecked" state. before used "pointerover" , "pressed" states messed because in end stayed in "pressed" state instead of "checked" , did totally random changes applying half of style.

so question is: doing wrong , how utilize visualstates correctly?

bonusquestion: how tell "pointerover" state should apply if checkstate "unchecked"?

c# windows-runtime windows-store-apps winrt-xaml