creating a volume slider component

[sde]

hello, im not sure if this is where i should post this.

i want to make a volume slider component. ( like on a mixing board )

i have an image for the background of the slider, and the image for the slider tip itself.

i need to figure out how to make a component with these 2 images. the background will remain stationary, while the tip will move vertically from bottom to top and be assigned to a value.

can someone get me on the right track on where to start looking how to create this component?

thanks

 

[Iceplug]

The MouseDown and MouseUp events will tell you if the mouse button is pressed.
You can then use the MouseMove to move the slider tip up and down.

Since it scrolls vertically, you only need to consider the Y component of the mouse location.
I assume your slider is going to have a minimum and maximum value for the topmost and bottommost locations of the slider.
In the MouseMove, you only need to move the mouse if its between the Top and the Bottom of the slider. From, there you can use an interpolation to get the value you need.
x = (e.Y - Slider.Top) / Slider.Height
Slider.Value = Slider.Min + x * (Slider.Max - Slider.Min)

I dont think you want the lock-onto-tick scrolling...
Drawing the slider depends on what you want it to look like. You should use your creative juices to make something that looks nice.

 

[sde]

thanks for the reply.

i have a couple questions.

1. in my volume slider, should both the background image and top image that moves be picturebox objects?

2. to make this slider truely portable, it needs to be its own class right? could i then add the slider to my toolbox?

 

[sde]

as im working with it, im finding more questions.

i have made a class called CSlider.

currently, the class is just a picture box representing the background of the slider.

at this point, im not sure how to add this slider to another windows form.

with groupboxes, or other widgets and things ive used this.Controls.Add(someControl);

how do i now make this object visible on the windows form? do i need to make it extend the Control class or something? hmm .. im gonna go read up on that class now.

 

[sde]

ok, i am very close.

i made a User Control Class with 2 Picture Boxes. Now I need to figure out what events would work best for a slider.

i need this event to work over the entire control ( no matter if im on the slider, or background picture )

on MouseDown, the slider needs to do something. I can get this to work ok, the problem is what event do i use to trigger when Mouse and Mouse is Moving. this would be similar to a drag, but the drag handlers seem to be geared towards dragging in from an outside object.

 

[Iceplug]

in my volume slider, should both the background image and top image that moves be picturebox objects?

Thats up to you... Id prefer to draw it myself.

to make this slider truely portable, it needs to be its own class right? could i then add the slider to my toolbox?

Yes.

how do i now make this object visible on the windows form?

Id assume that youve done something like this:
Dim CSlider1 As CSlider = New CSlider
Me.Controls.Add(CSlider)

i need this event to work over the entire control ( no matter if im on the slider, or background picture )

The MouseUp will determine if you need to stop moving.
The MouseMove event will tell you when to move.
You may need to have these events for both pictureboxes.

 

[sde]

haha weird, i had just figured out to create a boolean value for moving and setting it with mouse up and mouse down, .. then using mouse move to move the fader.

the problem i have now is that every other movement the fader jumps to the top of the component, and then back down into position. i figured this out by only allowing it to update every 500ms.

no matter if i have the handlers on both pictureboxes or not it does this.

pbTip.Location = new Point(4,e.Y);

that is how im setting the new point.

any ideas why it is jumping to a Y position of 0 before it goes to where the mouse is?

 

[Iceplug]

In the MouseMove event for the slider knob, you need to add the top value to the e.Y argument in the eventargs.

 

[sde]

hey Ice, You Rock!

Thanks!

 

[sde]

the comment about drawing the slider peaked my interest, so now im going to try to make a version by drawing it.

i can draw rectangles, and fill rectangles, .. and to keep things simple, ill stick with rectangles for now, .. but what object would the graphic be that moves? when i draw, its on the paint action, .. and once i draw it, i dont know how to access it anymore.

any theory advice here? tutorial links maybe?

 

[Iceplug]

The nice part about drawing the slider yourself is that you only need to store the information about the slider that you need into variables.
For instance, the slider really only relies on three properties: Value, Max, and Min.
(To a lesser extent, the smallchange and largechange as well)
Additional things that you might want to tack on involve the rectangle location of the actual slider on the control, which you can then check by using the Rectangle.Contains method to see if the mouse was clicked down on the rectangle (in MouseDown) to determine if the slider is under the mouse and if you need to drag it or just do a largechange in this direction.
For facilitating this rectangle, you can define Minimum and Maximum rectangles, rectangles that indicate the position of the slider when it is at minimum value (Minimum rectangle) and Maximum (Maximum rectangle) (of course these will be based on the Height of the control).
From those, you can interpolate the Value between the Max and Min properties to get a percentage, then that will deinterpolate into a rectangle between Min and Max.
I assume that you want Max to be the uppermost point on the sliderbar.
Example:
Sub DrawAccordingToValue()
Dim IPT As Single = (Me.Value - Me.Min) / (Me.Max - Me.Min)
Dim RTop As Integer = MaxRect.Top + IPT * (MinRect.Top - MaxRect.Top)
SliderRect = New Rectangle(SliderLeft, RTop, SliderWidth, SliderHeight
End Sub
Of course, the MinRect and MaxRect would probably have the same width and height as the SliderRect.
Well, experiment with it and see if you get something working.
At least, get the bar and the slider drawn at the Maximum.

 

[sde]

wow, it took a while, but i got it all working. i really appreciate the advice!

 

[sde]

another question .. if you slide the control too quickly down or up, the slider does not go all the way down or up.

at first i thought it was a matter of the screen refreshing, so i set an Refresh() on mouse leave, .. but it still did the same thing.

so now im wondering if the mousemove event does not fire quickly enough.

any possible solutions to fix this? or do i just need to always move the slider slower.

 

[sde]

nevermind, it was only because i was only setting the value of Value if it was >= Minimum or <= Maximum .. otherwise value wasnt getting set.

now i just set Value to minimum if it is < Minimum , and Maximum when > Maximum.