vb.net - 如何在 vb.net 中创建搜索滑块

Question

我在 youtube 上找到了许多教程，它们告诉我们如何使用 AxWindowsMediaPlayer 以及使用 TrackBar1 for Windows Media Player 组件创建自己的音量控制等基本内容。但现在我想问一下，我们如何在 Windows Media Player 的 vb.net 中使用轨迹栏或搜索滑块创建自己的电影持续时间控件。我搜索了很多，但问题仍然是一个问题。我希望这个站点上许多伟大的 vb.net 开发人员应该告诉我它背后的逻辑

提前致谢

Answer 1

诀窍是继承 TrackBar 控件并处理 OnPaintBackground 和 OnPaint 事件。这是我在自己的一些项目中使用的控件的“超精简版”版本。

此版本非常有限，但它应该可以帮助您入门...

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

要使用它，只需创建一个 WinForms 项目，然后创建一个新的Class，命名CoolTrackBar并粘贴上面的代码。您需要编译解决方案以使控件出现在您的工具箱中。