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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -