controltemplate - Control style of each individual ToggleButton in Windows Phone 8.1 -
i building windows phone 8.1 (non silverlight) application. want togglebuttons different when toggled, have following code:
<page.resources> <!-- custom style windows.ui.xaml.controls.primitives.togglebutton --> <style targettype="togglebutton"> <setter property="background" value="{themeresource togglebuttonbackgroundthemebrush}" /> <setter property="foreground" value="{themeresource togglebuttonforegroundthemebrush}"/> <setter property="borderbrush" value="{themeresource togglebuttonborderthemebrush}" /> <setter property="borderthickness" value="{themeresource togglebuttonborderthemethickness}" /> <setter property="padding" value="12,4,12,5" /> <setter property="horizontalalignment" value="left" /> <setter property="verticalalignment" value="center" /> <setter property="fontfamily" value="{themeresource contentcontrolthemefontfamily}" /> <setter property="fontweight" value="semibold" /> <setter property="fontsize" value="{themeresource controlcontentthemefontsize}" /> <setter property="template"> <setter.value> <controltemplate targettype="togglebutton"> <grid> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="checked"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="border" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="yellow" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="border" storyboard.targetproperty="borderthickness"> <discreteobjectkeyframe keytime="0" value="0" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="border" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{themeresource togglebuttoncheckedborderthemebrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="contentpresenter" storyboard.targetproperty="foreground"> <discreteobjectkeyframe keytime="0" value="{themeresource togglebuttoncheckedforegroundthemebrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <border x:name="border" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" margin="3"> <contentpresenter x:name="contentpresenter" content="{templatebinding content}" contenttransitions="{templatebinding contenttransitions}" contenttemplate="{templatebinding contenttemplate}" margin="{templatebinding padding}" horizontalalignment="{templatebinding horizontalcontentalignment}" verticalalignment="{templatebinding verticalcontentalignment}" automationproperties.accessibilityview="raw"/> </border> <rectangle x:name="focusvisualwhite" ishittestvisible="false" stroke="{themeresource focusvisualwhitestrokethemebrush}" strokeendlinecap="square" strokedasharray="1,1" opacity="0" strokedashoffset="1.5" /> <rectangle x:name="focusvisualblack" ishittestvisible="false" stroke="{themeresource focusvisualblackstrokethemebrush}" strokeendlinecap="square" strokedasharray="1,1" opacity="0" strokedashoffset="0.5" /> </grid> </controltemplate> </setter.value> </setter> </style> </page.resources>
this works, works on togglebutton
s have on page! seen here:
how make selective applies togglebutton on left (as example).
it simple add key name style e.g
<style targettype="togglebutton" x:key="mytogglebutton">
now toggle button want implement style reference key.
<togglebutton style="{staticresource mytogglebutton}" ...>
Comments
Post a Comment