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 togglebuttons have on page! seen here:

multiple toggles

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -