xaml - Customize scrollbar of listbox in metro apps -
in our metro style apps, using listbox , want customize scrollbar , means height, width , color of scroll (horizontal , vertical). there example task ?? have searched lot couldn't example.please help.
you need customize own scrollviewer
first , add style of listbox
. below listbox
's default style , after scrollviewer
's default style.
<style 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" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="layoutroot" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="transparent" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="layoutroot" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxdisabledforegroundthemebrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="layoutroot" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource listboxfocusbackgroundthemebrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unfocused" /> </visualstategroup> </visualstatemanager.visualstategroups> <scrollviewer x:name="scrollviewer" padding="{templatebinding padding}" tabnavigation="{templatebinding tabnavigation}" horizontalscrollmode="{templatebinding scrollviewer.horizontalscrollmode}" horizontalscrollbarvisibility="{templatebinding scrollviewer.horizontalscrollbarvisibility}" verticalscrollmode="{templatebinding scrollviewer.verticalscrollmode}" verticalscrollbarvisibility="{templatebinding scrollviewer.verticalscrollbarvisibility}" ishorizontalrailenabled="{templatebinding scrollviewer.ishorizontalrailenabled}" isverticalrailenabled="{templatebinding scrollviewer.isverticalrailenabled}" zoommode="{templatebinding scrollviewer.zoommode}" isdeferredscrollingenabled="{templatebinding scrollviewer.isdeferredscrollingenabled}" bringintoviewonfocuschange="{templatebinding scrollviewer.bringintoviewonfocuschange}"> <itemspresenter /> </scrollviewer> </border> </controltemplate> </setter.value> </setter> </style>
<style targettype="scrollviewer"> <setter property="horizontalscrollmode" value="enabled" /> <setter property="verticalscrollmode" value="enabled" /> <setter property="ishorizontalrailenabled" value="true" /> <setter property="isverticalrailenabled" value="true" /> <setter property="istabstop" value="false" /> <setter property="zoommode" value="enabled" /> <setter property="horizontalcontentalignment" value="left" /> <setter property="verticalcontentalignment" value="top" /> <setter property="verticalscrollbarvisibility" value="visible" /> <setter property="padding" value="0" /> <setter property="borderthickness" value="0" /> <setter property="borderbrush" value="transparent" /> <setter property="background" value="transparent" /> <setter property="template"> <setter.value> <controltemplate targettype="scrollviewer"> <border borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="scrollingindicatorstates"> <visualstategroup.transitions> <visualtransition from="mouseindicator" to="noindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator" begintime="0:0:3" /> <objectanimationusingkeyframes storyboard.targetname="verticalscrollbar" storyboard.targetproperty="indicatormode"> <discreteobjectkeyframe keytime="0:0:3"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalscrollbar" storyboard.targetproperty="indicatormode"> <discreteobjectkeyframe keytime="0:0:3"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualtransition> <visualtransition from="touchindicator" to="noindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator" /> <objectanimationusingkeyframes storyboard.targetname="verticalscrollbar" storyboard.targetproperty="indicatormode"> <discreteobjectkeyframe keytime="0:0:0.5"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalscrollbar" storyboard.targetproperty="indicatormode"> <discreteobjectkeyframe keytime="0:0:0.5"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualtransition> </visualstategroup.transitions> <visualstate x:name="noindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator" /> </storyboard> </visualstate> <visualstate x:name="touchindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator" /> <objectanimationusingkeyframes storyboard.targetname="verticalscrollbar" storyboard.targetproperty="indicatormode" duration="0"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>touchindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalscrollbar" storyboard.targetproperty="indicatormode" duration="0"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>touchindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="mouseindicator"> <storyboard> <fadeinthemeanimation targetname="scrollbarseparator" /> <objectanimationusingkeyframes storyboard.targetname="verticalscrollbar" storyboard.targetproperty="indicatormode" duration="0"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>mouseindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="horizontalscrollbar" storyboard.targetproperty="indicatormode" duration="0"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>mouseindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid background="{templatebinding background}"> <grid.columndefinitions> <columndefinition width="*" /> <columndefinition width="auto" /> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="*" /> <rowdefinition height="auto" /> </grid.rowdefinitions> <scrollcontentpresenter x:name="scrollcontentpresenter" grid.rowspan="2" grid.columnspan="2" contenttemplate="{templatebinding contenttemplate}" margin="{templatebinding padding}" /> <scrollbar x:name="verticalscrollbar" grid.column="1" istabstop="false" maximum="{templatebinding scrollableheight}" orientation="vertical" visibility="{templatebinding computedverticalscrollbarvisibility}" value="{templatebinding verticaloffset}" viewportsize="{templatebinding viewportheight}" horizontalalignment="right" /> <scrollbar x:name="horizontalscrollbar" istabstop="false" maximum="{templatebinding scrollablewidth}" orientation="horizontal" grid.row="1" visibility="{templatebinding computedhorizontalscrollbarvisibility}" value="{templatebinding horizontaloffset}" viewportsize="{templatebinding viewportwidth}" /> <border x:name="scrollbarseparator" grid.row="1" grid.column="1" borderthickness="0,0,1,1" background="{staticresource scrollbartrackbackgroundthemebrush}" borderbrush="{staticresource scrollbartrackborderthemebrush}" /> </grid> </border> </controltemplate> </setter.value> </setter> </style>
Comments
Post a Comment