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.