wpf - Change scrollviewer template in listbox -
i'm newbie wpf. want change template of scroll viewer in listbox. found apple style scroll bar in blog
but dont know how apply scroll viewer template listbox. can me? here xamlcode of apple scroll viewer template:
<solidcolorbrush x:key="scrollbardisabledbackground" color="#f4f4f4"/> <style x:key="verticalscrollbarpagebutton" targettype="{x:type repeatbutton}"> <setter property="overridesdefaultstyle" value="true"/> <setter property="background" value="transparent"/> <setter property="focusable" value="false"/> <setter property="istabstop" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type repeatbutton}"> <rectangle fill="{templatebinding background}" height="{templatebinding height}" width="{templatebinding width}"/> </controltemplate> </setter.value> </setter> </style> <style x:key="scrollbarthumb" targettype="{x:type thumb}"> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type thumb}"> <border background="#ff868686" borderthickness="0,0,1,0" height="auto" cornerradius="4" /> </controltemplate> </setter.value> </setter> </style> <style x:key="horizontalscrollstyle" targettype="{x:type scrollbar}"> <setter property="background" value="transparent"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type scrollbar}"> <grid x:name="bg" background="{templatebinding background}" height="10" snapstodevicepixels="true"> <grid.rowdefinitions> <rowdefinition /> </grid.rowdefinitions> <track x:name="part_track" isdirectionreversed="true" isenabled="{templatebinding ismouseover}"> <track.decreaserepeatbutton> <repeatbutton command="{x:static scrollbar.pageupcommand}" style="{staticresource verticalscrollbarpagebutton}"/> </track.decreaserepeatbutton> <track.increaserepeatbutton> <repeatbutton command="{x:static scrollbar.pagedowncommand}" style="{staticresource verticalscrollbarpagebutton}"/> </track.increaserepeatbutton> <track.thumb> <thumb style="{staticresource scrollbarthumb}" cursor="hand"/> </track.thumb> </track> </grid> <controltemplate.triggers> <trigger property="isenabled" value="false"> <setter property="background" targetname="bg" value="{staticresource scrollbardisabledbackground}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="applestyleverticalscrollbarstyle" targettype="{x:type scrollbar}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type scrollbar}"> <grid x:name="bg" snapstodevicepixels="true" width="10" horizontalalignment="right" margin="0"> <grid.rowdefinitions> <rowdefinition /> </grid.rowdefinitions> <track x:name="part_track" isdirectionreversed="true" isenabled="{templatebinding ismouseover}"> <track.decreaserepeatbutton> <repeatbutton command="{x:static scrollbar.pageupcommand}" style="{staticresource verticalscrollbarpagebutton}" /> </track.decreaserepeatbutton> <track.increaserepeatbutton> <repeatbutton command="{x:static scrollbar.pagedowncommand}" style="{staticresource verticalscrollbarpagebutton}"/> </track.increaserepeatbutton> <track.thumb> <thumb style="{dynamicresource scrollbarthumb}" cursor="hand"/> </track.thumb> </track> </grid> </controltemplate> </setter.value> </setter> </style> <controltemplate x:key="applestylescrollbarstyle" targettype="{x:type scrollviewer}"> <grid x:name="grid" background="{templatebinding background}"> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="auto"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="*"/> <rowdefinition height="auto"/> </grid.rowdefinitions> <rectangle x:name="corner" grid.column="1" fill="{x:null}" grid.row="1"/> <scrollcontentpresenter x:name="part_scrollcontentpresenter" cancontentscroll="{templatebinding cancontentscroll}" canhorizontallyscroll="false" canverticallyscroll="false" contenttemplate="{templatebinding contenttemplate}" content="{templatebinding content}" grid.column="0" margin="{templatebinding padding}" grid.row="0"/> <scrollbar x:name="part_verticalscrollbar" visibility="{templatebinding computedverticalscrollbarvisibility}" automationproperties.automationid="verticalscrollbar" cursor="arrow" grid.column="1" maximum="{templatebinding scrollableheight}" minimum="0" grid.row="0" value="{binding verticaloffset, mode=oneway, relativesource={relativesource templatedparent}}" viewportsize="{templatebinding viewportheight}" style="{dynamicresource applestyleverticalscrollbarstyle}" background="{x:null}" width="auto" margin="0"/> <scrollbar x:name="part_horizontalscrollbar" visibility="{templatebinding computedhorizontalscrollbarvisibility}" automationproperties.automationid="horizontalscrollbar" cursor="arrow" grid.column="0" maximum="{templatebinding scrollablewidth}" minimum="0" orientation="horizontal" grid.row="1" value="{binding horizontaloffset, mode=oneway, relativesource={relativesource templatedparent}}" viewportsize="{templatebinding viewportwidth}" style="{dynamicresource horizontalscrollstyle}"/> </grid> </controltemplate>
scrollviewer, few other controls in wpf, have named parts. in order used in correct places need named properly. scrollviewer styling has been explained on msdn site has 3 parts scrollcontentpresenter, horizontalscrollbar , verticalscrollbar. in turn each scrollbar have own named parts style. , go msdn site. in case can wrap listbox in scrollviewer this:
<scrollviewer> <listbox/> </scrollviewer> in case might consider hiding original scroll bars of listbox. if don't put restriction on height of listbox grow fit elements , in turn cause scrollviewer show custom scroll bars. or can change template of listbox example (msdn):
<style targettype={x:type listbox}> <setter property="template"> <setter.value> <controltemplate targettype="{x:type listbox}"> <scrollviewer x:name="scrollviewer"> <itemspresenter/> </scrollviewer> </controltemplate> </setter.value> </setter> </style> and customize scrollviewer there
Comments
Post a Comment