How to change scrollbar repeatButton to image then thumb is moving. WPF xaml -
i have insert image in xaml, if thumb on top has 1st image , second image show, how has if thumb in middle, , 3rd - thumb in bottom. how it? put 2 images (yellow arrow top, gray arrow bottom), put 2 (yellow arrow bottom, gray arrow top)? code far:
<window x:class="scroll4.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="mainwindow" height="350" width="525"> <window.resources> <solidcolorbrush x:key="background" color="gray" /> <style x:key="scrollbarpagebutton" targettype="{x:type repeatbutton}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type repeatbutton}"> <border background="transparent" /> </controltemplate> </setter.value> </setter> </style> <style x:key="scrollbarthumb" targettype="{x:type thumb}"> <setter property="panel.zindex" value="1" /> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="opacity" value="0.7" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type thumb}"> <border name="border" cornerradius="3" background="{staticresource background}" borderbrush="transparent" borderthickness="1" /> <controltemplate.triggers> <trigger property="isdragging" value="true"> <setter targetname="border" property="background" value="{staticresource background}" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <controltemplate x:key="verticalscrollbar" targettype="{x:type scrollbar}"> <grid> <grid.rowdefinitions> <rowdefinition maxheight="60"/> <rowdefinition height="*"/> <rowdefinition maxheight="60"/> </grid.rowdefinitions> <border grid.rowspan="3" cornerradius="2" background="#f8f8f8"/> <repeatbutton focusable="false" content="up" height="60" command="scrollbar.lineupcommand"> <repeatbutton.template> <controltemplate> <dockpanel> <image source="/scroll4;component/resources/bg.slide-up-active.png"/> <contentpresenter/> </dockpanel> </controltemplate> </repeatbutton.template> </repeatbutton> <track name="part_track" grid.row="1" isdirectionreversed="true"> <track.decreaserepeatbutton> <repeatbutton style="{staticresource scrollbarpagebutton}" margin="3,2,3,2" command="scrollbar.pageupcommand"/> </track.decreaserepeatbutton> <track.thumb> <thumb style="{staticresource scrollbarthumb}"> </thumb> </track.thumb> <track.increaserepeatbutton> <repeatbutton style="{staticresource scrollbarpagebutton}" margin="3,2,3,2" command="scrollbar.pagedowncommand" /> </track.increaserepeatbutton> </track> <repeatbutton grid.row="2" focusable="false" height="60" command="scrollbar.linedowncommand" content="down"> <repeatbutton.template> <controltemplate> <dockpanel> <image source="/scroll4;component/resources/bg.slide-down-disabled.png"/> </dockpanel> </controltemplate> </repeatbutton.template> </repeatbutton> </grid> </controltemplate> <style targettype="scrollbar"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <style.triggers> <trigger property="orientation" value="vertical"> <setter property="width" value="60"/> <setter property="height" value="auto" /> <setter property="template" value="{staticresource verticalscrollbar}" /> </trigger> </style.triggers> </style> </window.resources> <grid > <scrollviewer margin="89,94,183.4,90.8" rendertransformorigin="0.792,0.806" > <image source="/scroll4;component/resources/football_grass.jpg" stretch="fill" height="500" /> </scrollviewer> </grid>
i recommend following things:
- at verticalscrollbar controltemplate change images both repeatbutton's yellow ones
- set images repeatbutton's content instead of creating template
- add triggers verticalscrollbar. should verticaloffset property. when it's 0 (scrollviewer on top) - change content arrow gray one. when verticaloffset equals scrollableheight - change content bottom arrow gray one.
also recommend use drawingimages (vector graphics) instead of png, it's you.
example
<window x:class="test31406472.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:test31406472" title="mainwindow" height="350" width="525"> <window.resources> <local:isonbottomconverter x:key="isonbottomconverter" /> <drawingimage x:key="printicon"> <drawingimage.drawing> <drawinggroup> <geometrydrawing geometry="m5.1,6.2v2.2c0-1,0.8-1.8,1.8-1.8h13.5c1,0,1.8,0.8,1.8,1.8v3.9h5.1 l5.1,6.2z m4.2,20.6h3.3c-1.5,0-2.7-1.2-2.7-2.7v9.8c0-1.5,1.2-2.7,2.7-2.7h20.7c1.5,0,2.7,1.2,2.7,2.7v8.1 c0,1.5-1.2,2.7-2.7,2.7h-0.9v-4.5h4.2v20.6l4.2,20.6l4.2,20.6z m5.1,17v7.2c0,1,0.8,1.8,1.8,1.8h13.5c1,0,1.8-0.8,1.8-1.8v17h5.1 l5.1,17z m20.9,13.4c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3c19.6,12.8,20.2,13.4,20.9,13.4l20.9,13.4z" brush="#ff157efb"> </geometrydrawing> <geometrydrawing brush="#ffffffff"> <geometrydrawing.geometry> <geometrygroup> <pathgeometry> <pathgeometry.figures> <pathfigurecollection> <pathfigure isclosed="true" startpoint="0,0"> <pathfigure.segments> <pathsegmentcollection> <linesegment point="19.6,22" /> <linesegment point="7.8,22" /> <linesegment point="7.8,22" /> <linesegment point="7.8,23" /> <linesegment point="19.6,23" /> </pathsegmentcollection> </pathfigure.segments> </pathfigure> </pathfigurecollection> </pathgeometry.figures> </pathgeometry> </geometrygroup> </geometrydrawing.geometry> </geometrydrawing> </drawinggroup> </drawingimage.drawing> </drawingimage> <solidcolorbrush x:key="background" color="gray" /> <style x:key="scrollbarpagebutton" targettype="{x:type repeatbutton}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type repeatbutton}"> <border background="transparent" /> </controltemplate> </setter.value> </setter> </style> <style x:key="scrollbarthumb" targettype="{x:type thumb}"> <setter property="panel.zindex" value="1" /> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="opacity" value="0.7" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type thumb}"> <border name="border" cornerradius="3" background="{staticresource background}" borderbrush="transparent" borderthickness="1" /> <controltemplate.triggers> <trigger property="isdragging" value="true"> <setter targetname="border" property="background" value="{staticresource background}" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <controltemplate x:key="verticalscrollbar" targettype="{x:type scrollbar}"> <grid> <grid.rowdefinitions> <rowdefinition maxheight="60"/> <rowdefinition height="*"/> <rowdefinition maxheight="60"/> </grid.rowdefinitions> <border grid.rowspan="3" cornerradius="2" background="#f8f8f8"/> <repeatbutton focusable="false" content="up" name="rbup" height="60" command="scrollbar.lineupcommand"> </repeatbutton> <track name="part_track" grid.row="1" isdirectionreversed="true"> <track.decreaserepeatbutton> <repeatbutton style="{staticresource scrollbarpagebutton}" margin="3,2,3,2" command="scrollbar.pageupcommand"/> </track.decreaserepeatbutton> <track.thumb> <thumb style="{staticresource scrollbarthumb}"> </thumb> </track.thumb> <track.increaserepeatbutton> <repeatbutton style="{staticresource scrollbarpagebutton}" margin="3,2,3,2" command="scrollbar.pagedowncommand" /> </track.increaserepeatbutton> </track> <repeatbutton grid.row="2" focusable="false" height="60" name="rbdown" command="scrollbar.linedowncommand" content="down"> </repeatbutton> </grid> <controltemplate.triggers> <datatrigger binding="{binding relativesource={relativesource mode=findancestor, ancestortype=scrollviewer}, path=verticaloffset}" value="0"> <setter targetname="rbup" property="content" value="!up!" /> </datatrigger> <datatrigger value="true"> <datatrigger.binding> <multibinding converter ="{staticresource isonbottomconverter}"> <binding relativesource="{relativesource mode=findancestor, ancestortype=scrollviewer}" path="verticaloffset"/> <binding relativesource="{relativesource mode=findancestor, ancestortype=scrollviewer}" path="scrollableheight"/> </multibinding> </datatrigger.binding> <setter targetname="rbdown" property="content" value="!down!" /> </datatrigger> </controltemplate.triggers> </controltemplate> <style targettype="scrollbar"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <style.triggers> <trigger property="orientation" value="vertical"> <setter property="width" value="60"/> <setter property="height" value="auto" /> <setter property="template" value="{staticresource verticalscrollbar}" /> </trigger> </style.triggers> </style> </window.resources> <grid > <scrollviewer height="300"> <image source="{staticresource printicon}" stretch="fill" height="500" /> </scrollviewer> </grid> and here's converter code:
public class isonbottomconverter : imultivalueconverter { public object convert(object[] values, type targettype, object parameter, system.globalization.cultureinfo culture) { if (values.length == 2 && values[0] double && values[1] double) { return (double)values[0] == (double)values[1]; } return false; } public object[] convertback(object value, type[] targettypes, object parameter, system.globalization.cultureinfo culture) { throw new notimplementedexception(); } } all need change content of repeat buttons , values in datatriggers ones want.
hope, helps.
Comments
Post a Comment