Change listbox selected item color in xaml Windows 8 -
i developing windows 8 xaml application , want change color of selected text of textblock contained in datatemplate of listbox dynamically, had tried lot solve problem.please me find solution.
here code
<style x:key="listboxstyle" targettype="listbox"> <setter property="foreground" value="{staticresource listboxforegroundthemebrush}"/> <setter property="background" value="{staticresource listboxbackgroundthemebrush}"/> <setter property="borderbrush" value="{staticresource listboxborderthemebrush}"/> <setter property="borderthickness" value="{staticresource listboxborderthemethickness}"/> <setter property="scrollviewer.horizontalscrollbarvisibility" value="disabled"/> <setter property="scrollviewer.verticalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.horizontalscrollmode" value="disabled"/> <setter property="scrollviewer.ishorizontalrailenabled" value="true"/> <setter property="scrollviewer.verticalscrollmode" value="enabled"/> <setter property="scrollviewer.isverticalrailenabled" value="true"/> <setter property="scrollviewer.zoommode" value="disabled"/> <setter property="scrollviewer.isdeferredscrollingenabled" value="false"/> <setter property="scrollviewer.bringintoviewonfocuschange" value="true"/> <setter property="istabstop" value="false"/> <setter property="tabnavigation" value="once"/> <setter property="fontfamily" value="{staticresource contentcontrolthemefontfamily}"/> <setter property="fontsize" value="{staticresource controlcontentthemefontsize}"/> <setter property="itemspanel"> <setter.value> <itemspaneltemplate> <virtualizingstackpanel/> </itemspaneltemplate> </setter.value> </setter> <setter property="template"> <setter.value> <controltemplate targettype="listbox"> <border x:name="layoutroot" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="transparent"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="borderbrush" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxdisabledforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxfocusbackgroundthemebrush}"/> </objectanimationusingkeyframes> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="scrollviewer"> <discreteobjectkeyframe keytime="0" value="black"/> </objectanimationusingkeyframes> </storyboard> </storyboard> </visualstate> <visualstate x:name="unfocused"/> </visualstategroup> </visualstatemanager.visualstategroups> <scrollviewer x:name="scrollviewer" style="{staticresource scrollviewerstyle1}" bringintoviewonfocuschange="{templatebinding scrollviewer.bringintoviewonfocuschange}" horizontalscrollmode="{templatebinding scrollviewer.horizontalscrollmode}" horizontalscrollbarvisibility="{templatebinding scrollviewer.horizontalscrollbarvisibility}" ishorizontalrailenabled="{templatebinding scrollviewer.ishorizontalrailenabled}" isverticalrailenabled="{templatebinding scrollviewer.isverticalrailenabled}" isdeferredscrollingenabled="{templatebinding scrollviewer.isdeferredscrollingenabled}" padding="{templatebinding padding}" tabnavigation="{templatebinding tabnavigation}" verticalscrollbarvisibility="{templatebinding scrollviewer.verticalscrollbarvisibility}" verticalscrollmode="{templatebinding scrollviewer.verticalscrollmode}" zoommode="{templatebinding scrollviewer.zoommode}"> <itemspresenter/> </scrollviewer> </border> </controltemplate> </setter.value> </setter> </style> <style x:key="listboxitemstyle2" targettype="listboxitem"> <setter property="background" value="transparent"/> <setter property="tabnavigation" value="local"/> <setter property="padding" value="8,10"/> <setter property="horizontalcontentalignment" value="left"/> <setter property="template"> <setter.value> <controltemplate targettype="listboxitem"> <border x:name="layoutroot" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="pointerover"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitempointeroverbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitempointeroverforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="transparent"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitemdisabledforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="pressed"> <storyboard> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="pressedbackground"/> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitempressedforegroundthemebrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="selectionstates"> <visualstate x:name="unselected"/> <visualstate x:name="selected"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="innergrid"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitemselectedbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="white"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="selectedunfocused"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="innergrid"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitemselectedbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="white"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="selecteddisabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="innergrid"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitemselecteddisabledbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="white"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="selectedpointerover"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="innergrid"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitemselectedpointeroverbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="white"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="selectedpressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="innergrid"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxitemselectedbackgroundthemebrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="foreground" storyboard.targetname="contentpresenter"> <discreteobjectkeyframe keytime="0" value="white"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="focusvisualwhite"/> <doubleanimation duration="0" to="1" storyboard.targetproperty="opacity" storyboard.targetname="focusvisualblack"/> </storyboard> </visualstate> <visualstate x:name="unfocused"/> <visualstate x:name="pointerfocused"/> </visualstategroup> </visualstatemanager.visualstategroups> <grid x:name="innergrid" background="transparent"> <rectangle x:name="pressedbackground" fill="{staticresource listboxitempressedbackgroundthemebrush}" opacity="0"/> <contentpresenter x:name="contentpresenter" contenttemplate="{templatebinding contenttemplate}" contenttransitions="{templatebinding contenttransitions}" content="{templatebinding content}" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalalignment="{templatebinding verticalcontentalignment}"/> <rectangle x:name="focusvisualwhite" opacity="0" strokedashoffset=".5" strokeendlinecap="square" stroke="{staticresource focusvisualwhitestrokethemebrush}" strokedasharray="1,1"/> <rectangle x:name="focusvisualblack" opacity="0" strokedashoffset="1.5" strokeendlinecap="square" stroke="{staticresource focusvisualblackstrokethemebrush}" strokedasharray="1,1"/> </grid> </border> </controltemplate> </setter.value> </setter> </style> <listbox style="{staticresource listboxstyle}" itemcontainerstyle={staticresource listboxitemstyle2} > <listbox.itemtemplate> <datatemplate> <stackpanel x:name="stackouter" width="327" height="56" margin="-7,-9,-7,-10" verticalalignment="center"> <stackpanel.background> <imagebrush imagesource="/assets/images/categ_bg.png" stretch="uniformtofill"></imagebrush> </stackpanel.background> <textblock verticalalignment="center" foreground="#a7a7a7" fontweight="light" fontfamily="sego wp" fontsize="21" margin="25,15,0,0" text="{binding categoryname}"> </textblock> </stackpanel> </datatemplate> </listbox.itemtemplate> </listbox>
you have following changes in current code.
1). in style listboxitemstyle2, find <contentpresenter .../> add tag="{templatebinding isselected}" in <contentpresenter .../>
2). remove static foreground="#a7a7a7" property value listbox's datatemplateand add this
foreground="{binding tag, converter={staticresource booleantocolourconverter}, mode=twoway, relativesource={relativesource mode=templatedparent}}" 3). need use converter set foreground based on isselected property. if item selected show green color otherwise red.
public sealed class booleantocolourconverter : ivalueconverter { public object convert(object value, type targettype, object parameter, string language) { return (value bool && (bool)value) ? new solidcolorbrush(windows.ui.colors.green) : new solidcolorbrush(windows.ui.colors.red); } public object convertback(object value, type targettype, object parameter, string language) { return value solidcolorbrush && ((solidcolorbrush)value).color == windows.ui.colors.green; } } 4). add <local:booleantocolourconverter x:key="booleantocolourconverter"/> in <page.resources>.
Comments
Post a Comment