c# - Customizing selected ListboxItem -
i have listbox (actually, have telerik's radjumplist, afaik inherited listbox) custom itemcontainerstyle. each item contains rectangle (tile) , 2 strings. far, works okay default: when i'm selecting item, color of strings changing, , rectangle has const color.
<datatemplate x:key="datatemplate1"> <grid margin="0,0,12,12"> <rectangle x:name="slottile" width="99" height="99" fill="gray"/> <stackpanel grid.row="0"> <textblock fontweight="black" fontsize="{staticresource phonefontsizesmall}" text="{binding title, converter={staticresource toupperconverter}}" /> <textblock fontfamily="{staticresource phonefontfamilysemibold}" fontsize="{staticresource phonefontsizesmall}" text="{binding information}" /> </stackpanel> </grid> </datatemplate> what want customize selected item: tile's color should changed, while color of strings should same.
i'm trying set custom style, using visualstatemanager, have no idea how rectangle's , string's color.
<style x:name="myslotstyle" targettype="listboxitem"> <setter property="template"> <setter.value> <controltemplate targettype="listboxitem"> <grid background="{templatebinding background}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="selectionstates"> <visualstate x:name="selected"> <storyboard> <coloranimation storyboard.targetname="" storyboard.targetproperty="" /> </storyboard> </visualstate> <visualstate x:name="unelected"> <storyboard> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> </grid> </controltemplate> </setter.value> </setter> </style> so, question how set datatemplate's properties style.
edit: uploaded sample: http://1drv.ms/1cjrjz4
edit2: extracted (and modified bit) style checkbox: http://pastebin.com/2jv7d5we describing control inside of controltemplate.
so, planned rid of datatemplate , move style.template.controltemplate. now, when i'm trying create template binding new property (color of rectangle), says "the member fill not recognized".
<style x:name="teststyle" targettype="listboxitem"> <setter property="template"> <setter.value> <controltemplate targettype="listboxitem"> <grid margin="0,0,12,12"> <visualstatemanager.visualstategroups> **** <visualstategroup x:name="selectionstates"> <visualstate x:name="unselected"/> <visualstate x:name="selected"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="slottile" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneaccentbrush}"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="description" storyboard.targetproperty="textforeground"> <discreteobjectkeyframe keytime="0" value="{staticresource blackbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <rectangle x:name="slottile" width="99" height="99" fill="{templatebinding fill}"/> <textblock x:name="description" foreground="{tepmlatebinding textforeground}" text="{binding title}" /> **** </grid> </controltemplate> </setter.value> </setter> </style>
you should edit copy of itemcontainerstyle style , put grid acts container inside it. can edit visualstate.selected storyboard , set target rectangle , targetproperty fill.
here xaml code itemcontainerstyle:
<style x:key="itemcontainercustomstyle" targettype="listboxitem"> <setter property="background" value="transparent"/> <setter property="borderthickness" value="0"/> <setter property="borderbrush" value="transparent"/> <setter property="padding" value="0"/> <setter property="horizontalcontentalignment" value="left"/> <setter property="verticalcontentalignment" value="top"/> <setter property="template"> <setter.value> <controltemplate targettype="listboxitem"> <border x:name="layoutroot" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" horizontalalignment="{templatebinding horizontalalignment}" verticalalignment="{templatebinding verticalalignment}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="mouseover"/> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="{staticresource transparentbrush}"/> </objectanimationusingkeyframes> <doubleanimation duration="0" to=".5" storyboard.targetproperty="opacity" storyboard.targetname="contentcontainer"/> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="selectionstates"> <visualstate x:name="unselected"/> <visualstate x:name="selected"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="fill" storyboard.targetname="slottile"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneaccentbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid margin="0,0,12,12"> <rectangle x:name="slottile" width="99" height="99" /> <contentcontrol x:name="contentcontainer" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}"/> </grid> </border> </controltemplate> </setter.value> </setter> </style> edit: simplify using border container element default style. can remove grid , rectangle elements.
<style x:key="itemcontainercustomstyle" targettype="listboxitem"> <setter property="background" value="transparent"/> <setter property="borderthickness" value="0"/> <setter property="borderbrush" value="transparent"/> <setter property="padding" value="0"/> <setter property="horizontalcontentalignment" value="left"/> <setter property="verticalcontentalignment" value="top"/> <setter property="template"> <setter.value> <controltemplate targettype="listboxitem"> <border width="99" height="99" x:name="layoutroot" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" horizontalalignment="{templatebinding horizontalalignment}" verticalalignment="{templatebinding verticalalignment}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="mouseover"/> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="{staticresource transparentbrush}"/> </objectanimationusingkeyframes> <doubleanimation duration="0" to=".5" storyboard.targetproperty="opacity" storyboard.targetname="contentcontainer"/> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="selectionstates"> <visualstate x:name="unselected"/> <visualstate x:name="selected"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="background" storyboard.targetname="layoutroot"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneaccentbrush}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <contentcontrol x:name="contentcontainer" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}"/> </border> </controltemplate> </setter.value> </setter> </style>
Comments
Post a Comment