silverlight - How to use the Expression Blend 4 ranged property control -
is there way use nifty expression blend ranged value control in own projects?
this one:
edits:
i really, love know.
i made attempt while in wpf remake colorpicker , needed similar control enter r, g, b , values.
it's not complete gives pretty start. supports dragging , typing picked different dragging scheme because dislike blend drag.
here's did:
[templatevisualstate(groupname = "editstates", name = "dragmode")] [templatevisualstate(groupname = "editstates", name = "typemode")] public class colorcomponentslider : control { static colorcomponentslider() { defaultstylekeyproperty.overridemetadata(typeof(colorcomponentslider), new frameworkpropertymetadata(typeof(colorcomponentslider))); } private bool _istemplateapplied = false; private textbox _textbox; private textblock _textblock; private gradientstop _gradientstart; private gradientstop _gradientend; private grid _progressgrid; private bool _isdragging = false; public string component { { return (string)getvalue(componentproperty); } set { setvalue(componentproperty, value); } } // using dependencyproperty backing store component. enables animation, styling, binding, etc... public static readonly dependencyproperty componentproperty = dependencyproperty.register("component", typeof(string), typeof(colorcomponentslider), new uipropertymetadata("r", oncomponentpropertychanged)); private static void oncomponentpropertychanged(dependencyobject sender, dependencypropertychangedeventargs e) { var colorcomponentslider = sender colorcomponentslider; colorcomponentslider.updatechildcontrols(); } public color color { { return (color)getvalue(colorproperty); } set { setvalue(colorproperty, value); } } // using dependencyproperty backing store color. enables animation, styling, binding, etc... public static readonly dependencyproperty colorproperty = dependencyproperty.register("color", typeof(color), typeof(colorcomponentslider), new uipropertymetadata(colors.black, oncolorpropertychanged)); private static void oncolorpropertychanged(dependencyobject sender, dependencypropertychangedeventargs e) { var colorcomponentslider = sender colorcomponentslider; colorcomponentslider.updatechildcontrols(); } private void updatechildcontrols() { if (_istemplateapplied) { double progress = 0; string colorcomponent = string.empty; var comp = component.toupper(); if (comp == "a") { _gradientstart.color = color.fromargb(0, color.r, color.g, color.b); _gradientend.color = color.fromargb(255, color.r, color.g, color.b); colorcomponent = color.a.tostring(); progress = color.a; } else if (comp == "r") { _gradientstart.color = color.fromargb(color.a, 0, color.g, color.b); _gradientend.color = color.fromargb(color.a, 255, color.g, color.b); colorcomponent = color.r.tostring(); progress = color.r; } else if (comp == "g") { _gradientstart.color = color.fromargb(color.a, color.r, 0, color.b); _gradientend.color = color.fromargb(color.a, color.r, 255, color.b); colorcomponent = color.g.tostring(); progress = color.g; } else if (comp == "b") { _gradientstart.color = color.fromargb(color.a, color.r, color.g, 0); _gradientend.color = color.fromargb(color.a, color.r, color.g, 255); colorcomponent = color.b.tostring(); progress = color.b; } if (colorcomponent.length > 0) { _textblock.text = colorcomponent; _textbox.text = colorcomponent; _progressgrid.columndefinitions[0].width = new gridlength(progress, gridunittype.star); _progressgrid.columndefinitions[1].width = new gridlength(255 - progress, gridunittype.star); } } } private visualstategroup _editstates = null; private visualstate _dragmodestate = null; private visualstate _typemodestate = null; public override void onapplytemplate() { base.onapplytemplate(); _textbox = this.template.findname("textbox", this) textbox; _textblock = this.template.findname("textblock", this) textblock; _gradientstart = this.template.findname("part_gradientstart", this) gradientstop; _gradientend = this.template.findname("part_gradientend", this) gradientstop; _progressgrid = this.template.findname("part_progress", this) grid; var root = this.template.findname("root", this) frameworkelement; var stategroups = visualstatemanager.getvisualstategroups(root); (int = 0; < stategroups.count; i++) { var stategroup = stategroups[i] visualstategroup; if (stategroup != null && stategroup.name == "editstates") { _editstates = stategroup; (int s = 0; s < _editstates.states.count; s++) { var state = _editstates.states[s] visualstate; if (state.name == "dragmode") { _dragmodestate = state; } else if (state.name == "typemode") { _typemodestate = state; } } break; } } visualstatemanager.gotostate(this, _dragmodestate.name, false); _istemplateapplied = true; updatechildcontrols(); } private point _mouseleftbuttondownpreviousposition; protected override void onmouseleftbuttondown(system.windows.input.mousebuttoneventargs e) { base.onmouseleftbuttondown(e); if (_editstates.currentstate == _dragmodestate) { _mouseleftbuttondownpreviousposition = e.getposition(this); mouse.capture(this); } } protected override void onmousemove(mouseeventargs e) { base.onmousemove(e); if (_editstates.currentstate == _dragmodestate && e.leftbutton == mousebuttonstate.pressed) { _isdragging = true; var position = e.getposition(this); int offset = (int)(_mouseleftbuttondownpreviousposition.y - position.y); string comp = component.toupper(); if (comp == "a") { int v; if (color.a + offset < 0) { v = 0; } else if (color.a + offset > 255) { v = 255; } else { v = color.a + offset; } color = color.fromargb((byte)v, color.r, color.g, color.b); } else if (comp == "r") { int v; if (color.r + offset < 0) { v = 0; } else if (color.r + offset > 255) { v = 255; } else { v = color.r + offset; } color = color.fromargb(color.a, (byte)v, color.g, color.b); } else if (comp == "g") { int v; if (color.g + offset < 0) { v = 0; } else if (color.g + offset > 255) { v = 255; } else { v = color.g + offset; } color = color.fromargb(color.a, color.r, (byte)v, color.b); } else if (comp == "b") { int v; if (color.b + offset < 0) { v = 0; } else if (color.b + offset > 255) { v = 255; } else { v = color.b + offset; } color = color.fromargb(color.a, color.r, color.g, (byte)v); } _mouseleftbuttondownpreviousposition = position; } else { _isdragging = false; } } protected override void onmouseleftbuttonup(system.windows.input.mousebuttoneventargs e) { base.onmouseleftbuttonup(e); if (_editstates.currentstate == _dragmodestate) { var position = e.getposition(this); mouse.capture(null); if (!_isdragging && _mouseleftbuttondownpreviousposition == position) { visualstatemanager.gotostate(this, _typemodestate.name, true); _textbox.selectall(); } _isdragging = false; } } protected override void ongotkeyboardfocus(system.windows.input.keyboardfocuschangedeventargs e) { base.ongotkeyboardfocus(e); if (_editstates.currentstate == _dragmodestate) { visualstatemanager.gotostate(this, _typemodestate.name, true); } } protected override void onlostkeyboardfocus(system.windows.input.keyboardfocuschangedeventargs e) { base.onlostkeyboardfocus(e); if (_editstates.currentstate == _typemodestate) { visualstatemanager.gotostate(this, _dragmodestate.name, true); byte v; if (byte.tryparse(_textbox.text, out v)) { string comp = component.toupper(); if (comp == "a") { color = color.fromargb((byte)v, color.r, color.g, color.b); } else if (comp == "r") { color = color.fromargb(color.a, (byte)v, color.g, color.b); } else if (comp == "g") { color = color.fromargb(color.a, color.r, (byte)v, color.b); } else if (comp == "b") { color = color.fromargb(color.a, color.r, color.g, (byte)v); } } } } } xaml:
<style basedon="{x:null}" targettype="{x:type local:colorcomponentslider}"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}" /> <setter property="background" value="{dynamicresource {x:static systemcolors.windowbrushkey}}" /> <setter property="borderbrush" value="black" /> <setter property="borderthickness" value="1" /> <setter property="padding" value="1" /> <setter property="allowdrop" value="true" /> <setter property="focusvisualstyle" value="{x:null}" /> <setter property="focusable" value="true" /> <setter property="scrollviewer.panningmode" value="verticalfirst" /> <setter property="stylus.isflicksenabled" value="false" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type local:colorcomponentslider}"> <border x:name="root" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" snapstodevicepixels="true" cornerradius="5" cliptobounds="true"> <visualstatemanager.visualstategroups> <visualstategroup x:name="editstates"> <visualstate x:name="dragmode" /> <visualstate x:name="typemode"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="textblock"> <discreteobjectkeyframe keytime="0" value="{x:static visibility.hidden}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="textbox"> <discreteobjectkeyframe keytime="0" value="{x:static visibility.visible}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid> <grid.rowdefinitions> <rowdefinition height="auto" /> <rowdefinition height="*" minheight="5" /> </grid.rowdefinitions> <grid x:name="part_progress" uselayoutrounding="true" renderoptions.edgemode="unspecified"> <grid.columndefinitions> <columndefinition width="*" /> <columndefinition width="*" /> </grid.columndefinitions> <border cornerradius="3,3,0,0" background="#ff666666" /> </grid> <textblock x:name="textblock" background="{x:null}" foreground="{templatebinding foreground}" margin="0" padding="2,2,0,0" /> <textbox x:name="textbox" background="{x:null}" borderthickness="0" caretbrush="{templatebinding foreground}" foreground="{templatebinding foreground}" margin="0" padding="0,2,0,0" visibility="hidden" /> <border grid.row="1" cornerradius="0,0,3,3"> <border.background> <drawingbrush tilemode="tile" viewport="0,0,10,10" viewportunits="absolute"> <drawingbrush.drawing> <drawinggroup> <geometrydrawing brush="white"> <geometrydrawing.geometry> <rectanglegeometry rect="0,0,10,10" /> </geometrydrawing.geometry> </geometrydrawing> <geometrydrawing brush="silver"> <geometrydrawing.geometry> <geometrygroup> <rectanglegeometry rect="0,0,5,5" /> <rectanglegeometry rect="5,5,5,5" /> </geometrygroup> </geometrydrawing.geometry> </geometrydrawing> </drawinggroup> </drawingbrush.drawing> </drawingbrush> </border.background> </border> <border grid.row="1" cornerradius="0,0,3,3" borderbrush="{templatebinding borderbrush}" borderthickness="0,1,0,0"> <border.background> <lineargradientbrush endpoint="1,0.5" startpoint="0,0.5"> <gradientstop x:name="part_gradientstart" offset="0" color="#00000000" /> <gradientstop x:name="part_gradientend" offset="1" color="#ffffffff" /> </lineargradientbrush> </border.background> </border> </grid> </border> <controltemplate.triggers> <trigger property="isenabled" value="false"> <setter property="background" targetname="root" value="{dynamicresource {x:static systemcolors.controlbrushkey}}" /> <setter property="foreground" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}" /> </trigger> <trigger sourcename="textbox" property="visibility" value="visible"> <setter targetname="textbox" property="focusmanager.focusedelement" value="{binding elementname=textbox}" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style>
Comments
Post a Comment