c# - How to change the CheckBox and CheckBox tick's color in LongListMultiSelector? WP8 -
c# - How to change the CheckBox and CheckBox tick's color in LongListMultiSelector? WP8 -
is possible alter checkbox , checkbox tick's color in longlistmultiselector. i've tried george nikolaides solution not able approach needed. there other way this? please can explain in little bit more detail? if it's possible. in advance, next george nikolaides solution:
can alter checkbox color in longlistmultiselector? wp8
remember have xmlns:toolkit
, xmlns:toolkitprimitives
defined so:
<phone:phoneapplicationpage xmlns:toolkit="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone.controls.toolkit" xmlns:toolkitprimitives="clr-namespace:microsoft.phone.controls.primitives;assembly=microsoft.phone.controls.toolkit">
then re-create entire mess <phone:phoneapplicationpage.resources>
<style x:key="phonebuttonbase" targettype="buttonbase"> <setter property="background" value="transparent"/> <setter property="borderbrush" value="{staticresource phoneforegroundbrush}"/> <setter property="foreground" value="{staticresource phoneforegroundbrush}"/> <setter property="borderthickness" value="{staticresource phoneborderthickness}"/> <setter property="fontfamily" value="{staticresource phonefontfamilysemibold}"/> <setter property="fontsize" value="{staticresource phonefontsizemedium}"/> <setter property="padding" value="10,5,10,6"/> <setter property="template"> <setter.value> <controltemplate targettype="buttonbase"> <grid background="transparent"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="mouseover"/> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer"> <discreteobjectkeyframe keytime="0" value="{staticresource phonebuttonbasepressedforegroundbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="buttonbackground"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneaccentbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="buttonbackground"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="buttonbackground"> <discreteobjectkeyframe keytime="0" value="transparent"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <border x:name="buttonbackground" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" cornerradius="0" margin="{staticresource phonetouchtargetoverhang}"> <contentcontrol x:name="contentcontainer" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}"/> </border> </grid> </controltemplate> </setter.value> </setter> </style> <style x:key="phoneradiobuttoncheckboxbase" basedon="{staticresource phonebuttonbase}" targettype="togglebutton"> <setter property="background" value="{staticresource phoneradiocheckboxbrush}"/> <setter property="borderbrush" value="{staticresource phoneradiocheckboxborderbrush}"/> <setter property="fontsize" value="{staticresource phonefontsizemedium}"/> <setter property="fontfamily" value="{staticresource phonefontfamilynormal}"/> <setter property="horizontalcontentalignment" value="left"/> <setter property="verticalcontentalignment" value="center"/> <setter property="padding" value="0"/> </style> <style x:key="checkboxstyle1" basedon="{staticresource phoneradiobuttoncheckboxbase}" targettype="checkbox"> <setter property="template"> <setter.value> <controltemplate targettype="checkbox"> <grid background="transparent" horizontalalignment="left"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="mouseover"/> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="checkbackground"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxpressedbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="fill" storyboard.targetname="checkmark"> <discreteobjectkeyframe keytime="0" value="{staticresource phonebuttonbasepressedforegroundbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="fill" storyboard.targetname="indeterminatemark"> <discreteobjectkeyframe keytime="0" value="{staticresource phonebuttonbasepressedforegroundbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="checkbackground"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="fill" storyboard.targetname="checkmark"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="fill" storyboard.targetname="indeterminatemark"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentcontainer"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="checkmark"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unchecked"/> <visualstate x:name="indeterminate"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="visibility" storyboard.targetname="indeterminatemark"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid margin="{staticresource phonetouchtargetlargeoverhang}"> <grid.columndefinitions> <columndefinition width="32"/> <columndefinition width="*"/> </grid.columndefinitions> <grid grid.column="0" verticalalignment="top"> <border x:name="checkbackground" borderbrush="{templatebinding borderbrush}" borderthickness="{staticresource phoneborderthickness}" background="{templatebinding background}" horizontalalignment="left" height="32" ishittestvisible="false" verticalalignment="center" width="32"/> <rectangle x:name="indeterminatemark" fill="{staticresource phoneradiocheckboxcheckbrush}" horizontalalignment="center" height="16" ishittestvisible="false" visibility="collapsed" verticalalignment="center" width="16"/> <path x:name="checkmark" data="m0,123 l39,93 l124,164 l256,18 l295,49 l124,240 z" fill="{templatebinding foreground}" flowdirection="lefttoright" horizontalalignment="center" height="21" ishittestvisible="false" stretch="fill" strokethickness="3" strokelinejoin="round" visibility="collapsed" verticalalignment="center" width="23"/> </grid> <contentcontrol x:name="contentcontainer" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" grid.column="1" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" margin="12,0,0,0" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}"/> </grid> </grid> </controltemplate> </setter.value> </setter> </style> <style x:key="longlistmultiselectoritemliststyle" targettype="toolkit:longlistmultiselectoritem"> <setter property="background" value="{staticresource phoneaccentbrush}"/> <setter property="template"> <setter.value> <controltemplate targettype="toolkit:longlistmultiselectoritem"> <grid minheight="52"> <grid.resources> <exponentialease easingmode="easein" exponent="8" x:key="exponentialeasein"/> <quadraticease easingmode="easeout" x:key="quadraticeaseout"/> </grid.resources> <visualstatemanager.visualstategroups> <visualstategroup x:name="selectionenabledstates"> <visualstategroup.transitions> <visualtransition x:name="closedtoexposed" from="closed" to="exposed" generatedduration="0:0:0.30"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="outerhintpanel"> <easingdoublekeyframe keytime="0:0:0.0" value="0.0" easingfunction="{staticresource quadraticeaseout}"/> <easingdoublekeyframe keytime="0:0:0.30" value="1.0" easingfunction="{staticresource quadraticeaseout}"/> </doubleanimationusingkeyframes> </storyboard> </visualtransition> <visualtransition x:name="exposedtoclosed" from="exposed" to="closed" generatedduration="0:0:0.30"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="outerhintpanel"> <easingdoublekeyframe keytime="0:0:0.0" value="1.0" easingfunction="{staticresource quadraticeaseout}"/> <easingdoublekeyframe keytime="0:0:0.30" value="0.0" easingfunction="{staticresource quadraticeaseout}"/> </doubleanimationusingkeyframes> </storyboard> </visualtransition> <visualtransition x:name="exposedtoopened" from="exposed" to="opened" generatedduration="0:0:0.30"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="selectbox"> <easingdoublekeyframe keytime="0:0:0.0" value="-58" easingfunction="{staticresource exponentialeasein}"/> <easingdoublekeyframe keytime="0:0:0.15" value="0" easingfunction="{staticresource exponentialeasein}"/> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="presenter"> <easingdoublekeyframe keytime="0:0:0.0" value="24" easingfunction="{staticresource exponentialeasein}"/> <easingdoublekeyframe keytime="0:0:0.15" value="86" easingfunction="{staticresource exponentialeasein}"/> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="outerhintpanel"> <easingdoublekeyframe keytime="0:0:0.0" value="1.0" easingfunction="{staticresource quadraticeaseout}"/> <easingdoublekeyframe keytime="0:0:0.30" value="0.0" easingfunction="{staticresource quadraticeaseout}"/> </doubleanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="selectbox"> <discreteobjectkeyframe keytime="0:0:0.0" value="visible"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.ishittestvisible)" storyboard.targetname="outerhintpanel"> <discreteobjectkeyframe keytime="0:0:0" value="false"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.ishittestvisible)" storyboard.targetname="innerhintpanel"> <discreteobjectkeyframe keytime="0:0:0" value="false"/> </objectanimationusingkeyframes> </storyboard> </visualtransition> <visualtransition x:name="closedtoopened" from="closed" to="opened" generatedduration="0:0:0.15"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="selectbox"> <easingdoublekeyframe keytime="0:0:0.0" value="-58" easingfunction="{staticresource exponentialeasein}"/> <easingdoublekeyframe keytime="0:0:0.15" value="0" easingfunction="{staticresource exponentialeasein}"/> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="presenter"> <easingdoublekeyframe keytime="0:0:0.0" value="24" easingfunction="{staticresource exponentialeasein}"/> <easingdoublekeyframe keytime="0:0:0.15" value="86" easingfunction="{staticresource exponentialeasein}"/> </doubleanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="selectbox"> <discreteobjectkeyframe keytime="0:0:0.0" value="visible"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.ishittestvisible)" storyboard.targetname="outerhintpanel"> <discreteobjectkeyframe keytime="0:0:0" value="false"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.ishittestvisible)" storyboard.targetname="innerhintpanel"> <discreteobjectkeyframe keytime="0:0:0" value="false"/> </objectanimationusingkeyframes> </storyboard> </visualtransition> <visualtransition x:name="openedtoclosed" from="opened" to="closed" generatedduration="0:0:0.15"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="selectbox"> <easingdoublekeyframe keytime="0:0:0.0" value="0" easingfunction="{staticresource exponentialeasein}"/> <easingdoublekeyframe keytime="0:0:0.15" value="-58" easingfunction="{staticresource exponentialeasein}"/> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="presenter"> <easingdoublekeyframe keytime="0:0:0.0" value="86" easingfunction="{staticresource exponentialeasein}"/> <easingdoublekeyframe keytime="0:0:0.15" value="24" easingfunction="{staticresource exponentialeasein}"/> </doubleanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="selectbox"> <discreteobjectkeyframe keytime="0:0:0.15" value="collapsed"/> </objectanimationusingkeyframes> </storyboard> </visualtransition> </visualstategroup.transitions> <visualstate x:name="closed"/> <visualstate x:name="exposed"> <storyboard> <doubleanimation storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="outerhintpanel" duration="0" to="1.0"/> </storyboard> </visualstate> <visualstate x:name="opened"> <storyboard> <doubleanimation storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="selectbox" duration="0" to="0"/> <doubleanimation storyboard.targetproperty="(uielement.rendertransform).(compositetransform.translatex)" storyboard.targetname="presenter" duration="0" to="86"/> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="selectbox"> <discreteobjectkeyframe keytime="0:0:0" value="visible"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="outercover"> <discreteobjectkeyframe keytime="0:0:0" value="visible"/> </objectanimationusingkeyframes> <doubleanimation storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="outerhintpanel" duration="0" to="0.0"/> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.ishittestvisible)" storyboard.targetname="outerhintpanel"> <discreteobjectkeyframe keytime="0:0:0" value="false"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.ishittestvisible)" storyboard.targetname="innerhintpanel"> <discreteobjectkeyframe keytime="0:0:0" value="false"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid horizontalalignment="stretch"> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="auto"/> </grid.columndefinitions> <grid grid.column="0" horizontalalignment="stretch" toolkitprimitives:cliptobounds.isenabled="true"> <contentpresenter x:name="presenter"> <contentpresenter.rendertransform> <compositetransform translatex="24"/> </contentpresenter.rendertransform> </contentpresenter> </grid> <rectangle x:name="innerhintpanel" grid.column="0" width="24" height="{templatebinding hintpanelheight}" horizontalalignment="left" fill="transparent" strokethickness="0"> <rectangle.rendertransform> <compositetransform translatex="24"/> </rectangle.rendertransform> </rectangle> <contentcontrol x:name="infopresenter" grid.column="1" verticalalignment="top" content="{templatebinding contentinfo}" contenttemplate="{templatebinding contentinfotemplate}"/> </grid> <rectangle x:name="outerhintpanel" width="24" horizontalalignment="left" height="{templatebinding hintpanelheight}" fill="{templatebinding background}" strokethickness="0" opacity="0.0"/> <grid x:name="outercover" ishittestvisible="true" visibility="collapsed" background="transparent"/> <canvas horizontalalignment="left"> <checkbox x:name="selectbox" verticalalignment="top" margin="12,-20,5,0" visibility="collapsed" ischecked="{binding isselected, mode=twoway, relativesource={relativesource templatedparent}}" style="{staticresource checkboxstyle1}" foreground="red" borderbrush="#ff00ff46"> <checkbox.rendertransform> <compositetransform translatex="-58"/> </checkbox.rendertransform> </checkbox> </canvas> </grid> </controltemplate> </setter.value> </setter> </style>
<toolkit:longlistmultiselector itemcontainerstyle="{staticresource longlistmultiselectoritemliststyle}">
select checkbox in style , alter borderbrush color , foreground color accomplish want. tied foreground color check mark thingy.
c# windows-phone-8 checkbox longlistselector
Comments
Post a Comment