How to create a seek slider in vb.net - vb.net

Question

I found many tutorials on youtube which tell us, how to use AxWindowsMediaPlayer and basic stuff like creating your own volume control using TrackBar1 for Windows Media Player Component. But now I want to ask that how we can create our own movie duration control using trackbar or a seek slider in vb.net for Windows Media Player. I have searched a lot but question still remains a question. I hope that many great developers of vb.net on this site, should tell me logic behind it
THANKS IN ADVANCE

Answer 1

The trick is to subclass the TrackBar control and handle the OnPaintBackground and OnPaint events.
Here's an "extra-lite" version of a control I use on some of my own projects.
This version is quite limited but it should help you get started...
Imports System.Drawing.Drawing2D
Public Class CoolTrackBar
Inherits TrackBar
Private thumbRect As Rectangle = New Rectangle(0, 0, 19, 19)
Private isOverThumb As Boolean
Private cachedValue As Integer
Private rangeRect As Rectangle = Rectangle.Empty
Private mGrooveSize As Integer = 6
Private mGrooveBorderColor As Color = Color.Gray
Private mGrooveColor As Color = Color.LightGray
Private mSelStartColor As Color = Color.Blue
Private mSelEndColor As Color = Color.Red
Public Sub New()
Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
Me.SetStyle(ControlStyles.OptimizedDoubleBuffer, True)
Me.SetStyle(ControlStyles.ResizeRedraw, True)
Me.SetStyle(ControlStyles.UserPaint, True)
Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
End Sub
Public Property GrooveSize As Integer
Get
Return mGrooveSize
End Get
Set(value As Integer)
mGrooveSize = value
Me.Invalidate()
End Set
End Property
Public Property GrooveColor As Color
Get
Return mGrooveColor
End Get
Set(value As Color)
mGrooveColor = value
Me.Invalidate()
End Set
End Property
Public Property GrooveBorderColor As Color
Get
Return mGrooveBorderColor
End Get
Set(value As Color)
mGrooveBorderColor = value
Me.Invalidate()
End Set
End Property
Public Overloads Property TickStyle As TickStyle
Get
Return Windows.Forms.TickStyle.Both
End Get
Set(value As TickStyle)
MyBase.TickStyle = Windows.Forms.TickStyle.Both
End Set
End Property
Protected Overrides Sub OnPaintBackground(pevent As PaintEventArgs)
Dim g As Graphics = pevent.Graphics
Dim r As Rectangle = Me.DisplayRectangle
Select Case MyBase.Orientation
Case Orientation.Horizontal
rangeRect = New Rectangle(r.X + 14, r.Top, r.Width - 30, r.Height)
Case Orientation.Vertical
rangeRect = New Rectangle(r.X + 5, r.Y + 14, r.Width, r.Height - 29)
End Select
MyBase.OnPaintBackground(pevent)
DrawGroove(g)
End Sub
Protected Overrides Sub OnPaint(e As PaintEventArgs)
Dim g As Graphics = e.Graphics
DrawThumb(g)
End Sub
Private Sub DrawGroove(g As Graphics)
Dim r1 As Rectangle
Dim r2 As Rectangle
Select Case Orientation
Case Windows.Forms.Orientation.Horizontal
r1 = New Rectangle(rangeRect.X, rangeRect.Y + (rangeRect.Height - mGrooveSize) \ 2, rangeRect.Width, mGrooveSize)
r2 = New Rectangle(r1.X, r1.Y, r1.Width * ValueToPercentage(cachedValue), r1.Height)
Case Windows.Forms.Orientation.Vertical
r1 = New Rectangle(rangeRect.X + (rangeRect.Width - mGrooveSize) / 2 - mGrooveSize \ 2, rangeRect.Y, mGrooveSize, rangeRect.Height)
r2 = New Rectangle(r1.X, r1.Y, r1.Width, r1.Height * ValueToPercentage(cachedValue))
End Select
Using b As New SolidBrush(mGrooveColor)
g.FillRectangle(b, r1)
End Using
Using p As New Pen(mGrooveBorderColor)
g.DrawRectangle(p, r1)
End Using
Using lgb As New LinearGradientBrush(r1.Location, New Point(r1.Right, r1.Bottom), mSelStartColor, mSelEndColor)
g.FillRectangle(lgb, r2)
End Using
End Sub
Private Sub DrawThumb(g As Graphics)
Dim thumb As VisualStyles.VisualStyleElement = Nothing
Select Case MyBase.Orientation
Case Orientation.Horizontal
If MyBase.Enabled Then
If isOverThumb Then
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbTop.Hot
Else
If MyBase.Focused Then
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbTop.Focused
Else
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbTop.Normal
End If
End If
Else
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbTop.Disabled
End If
Case Orientation.Vertical
If MyBase.Enabled Then
If isOverThumb Then
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbRight.Hot
Else
If MyBase.Focused Then
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbRight.Focused
Else
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbRight.Normal
End If
End If
Else
thumb = VisualStyles.VisualStyleElement.TrackBar.ThumbRight.Disabled
End If
End Select
Dim valuePercentage As Single = ValueToPercentage(cachedValue)
Dim vsr = New VisualStyles.VisualStyleRenderer(thumb)
thumbRect.Size = vsr.GetPartSize(g, VisualStyles.ThemeSizeType.Draw)
Dim pos As Integer
Select Case MyBase.Orientation
Case Orientation.Horizontal
pos = valuePercentage * rangeRect.Width
thumbRect.Location = New Point(pos + thumbRect.Width / 2 + 3, rangeRect.Y + thumbRect.Height / 2 + mGrooveSize / 4)
Case Orientation.Vertical
pos = valuePercentage * rangeRect.Height
thumbRect.Location = New Point(rangeRect.X + thumbRect.Width / 2 + mGrooveSize / 4, pos + thumbRect.Height / 2 + 3)
End Select
vsr.DrawBackground(g, thumbRect)
End Sub
Private Function ValueToPercentage(value As Integer) As Single
Dim w As Integer = MyBase.Maximum - MyBase.Minimum
Dim min = MyBase.Minimum
Dim max = MyBase.Maximum
If MyBase.Orientation = Orientation.Horizontal Then
Return (value - min) / (max - min)
Else
Return 1 - (value - min) / (max - min)
End If
End Function
Private Sub CoolTrackBar_MouseMove(sender As Object, e As MouseEventArgs) Handles Me.MouseMove
If thumbRect.IntersectsWith(New Rectangle(e.Location, New Size(1, 1))) Then
isOverThumb = True
Me.Invalidate()
ElseIf isOverThumb Then
isOverThumb = False
Me.Invalidate()
End If
End Sub
Private Sub CoolTrackBar_ValueChanged(sender As Object, e As EventArgs) Handles Me.ValueChanged
cachedValue = MyBase.Value
Me.Invalidate()
End Sub
End Class
To use it, simply create a WinForms project, then create a new Class, name it CoolTrackBar and paste the code above.
You'll need to compile the solution for the control to appear on your Toolbox.