c# - Creating a popup position indicator on WPF Slider control -
i styling wpf slider controls in application, , want them behave when user dragging 'thumb', popup appears above thumb (and follows thumb dragged), , popup displays live update of new slider value.
how can in xaml no c#?
thanks
you can style thumb display popup when dragged start it's not finished horizontaloffset not bound (sample how that):
<style x:key="horizontalsliderthumbstyle" targettype="{x:type thumb}"> <setter property="focusable" value="false"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="height" value="22"/> <setter property="width" value="11"/> <setter property="foreground" value="gray"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type thumb}"> <canvas snapstodevicepixels="true"> <canvas.rendertransform> <translatetransform x="5.5" y="11"/> </canvas.rendertransform> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="mouseover"/> <visualstate x:name="pressed" /> <visualstate x:name="disabled"/> </visualstategroup> </visualstatemanager.visualstategroups> <path x:name="background" data="{staticresource sliderthumbouterbordergeometry}" fill="{staticresource horizontalsliderthumbnormalbackground}" /> <path x:name="innerborder" data="{staticresource sliderthumbmiddlebordergeometry}" stroke="white" /> <path x:name="outerborder" data="{staticresource sliderthumbouterbordergeometry}" stroke="#ff929292"/> <popup x:name="tooltip" grid.row="0" popupanimation="fade" placement="right" placementrectangle="20,25,40,30" margin="0" verticaloffset="-60" horizontaloffset="-60" > <border background="black" cornerradius="5"> <textblock text="sample text" fontsize="12" foreground="white" /> </border> </popup> </canvas> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="fill" targetname="background" value="{staticresource horizontalsliderthumbhoverbackground}"/> <setter property="stroke" targetname="outerborder" value="{staticresource horizontalsliderthumbhoverborder}"/> </trigger> <trigger property="foreground" value="blue"> <setter property="fill" targetname="background" value="{staticresource horizontalsliderthumbhoverbackground}"/> <setter property="stroke" targetname="outerborder" value="{staticresource horizontalsliderthumbhoverborder}"/> </trigger> <trigger property="isdragging" value="true"> <setter targetname="tooltip" property="isopen" value="true" /> <setter property="fill" targetname="background" value="{staticresource horizontalsliderthumbpressedbackground}"/> <setter property="stroke" targetname="outerborder" value="{staticresource horizontalsliderthumbpressedborder}"/> </trigger> <trigger property="isenabled" value="false"> <setter property="fill" targetname="background" value="#fff4f4f4"/> <setter property="stroke" targetname="innerborder" value="{x:null}"/> <setter property="data" targetname="outerborder" value="{staticresource sliderthumbdisabledgeometry}"/> <setter property="stroke" targetname="outerborder" value="#ffaeb1af"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style>
Comments
Post a Comment