Results 1 to 7 of 7

Thread: Picturebox (or other) with overlayed next/previous arrows

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Jan 2016
    Posts
    216

    Picturebox (or other) with overlayed next/previous arrows

    I see it done all the time (usually with flash i'm guessing).. I'm wondering if it can be done in vb.net.

    You have a picture and on the edges of the picture are next/previous arrows/buttons that appear when the mouse enters the area.

    I'm not seeing anything even remotely like this as an option, and can't come up with a way to fake it.. Ideas?

  2. #2
    Hyperactive Member Vexslasher's Avatar
    Join Date
    Feb 2010
    Posts
    429

    Re: Picturebox (or other) with overlayed next/previous arrows

    I think I know what your talking about. I made a code for you to use for this. It will require two buttons Button1 and Button2 make sure the Visibility property on both of these buttons is set to False.

    Button1 will be the Next Button or just a >.
    Button2 will be the Previous Button of just a <.

    vb.net Code:
    1. Private Sub Form1_MouseMove(sender As Object, e As MouseEventArgs) Handles MyBase.MouseMove
    2.         If e.X > (Me.Size.Width - 30) Then
    3.             Button1.Visible = True
    4.         Else
    5.             Button1.Visible = False
    6.         End If
    7.         If e.X < 30 Then
    8.             Button2.Visible = True
    9.         Else
    10.             Button2.Visible = False
    11.         End If
    12.     End Sub

    If you want it to activate at a wider range then you can just increase the values of both of the 30's in the code to whatever value you want it to be. Also You can put PictureBoxes instead of the buttons if you want I just used Buttons.
    Last edited by Vexslasher; May 18th, 2017 at 02:43 PM.

  3. #3
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Picturebox (or other) with overlayed next/previous arrows

    You could use GDI+ to draw on the PictureBox itself. That way, you're not limited to the appearance of actual Buttons, e.g. you could overlay the entire edge of the PictureBox with a transparent box that acts as a button.

  4. #4
    Fanatic Member Spooman's Avatar
    Join Date
    Mar 2017
    Posts
    868

    Re: Picturebox (or other) with overlayed next/previous arrows

    JMC

    with a transparent box that acts as a button.
    If I read you right, a PictureBox can be set to be transparent in .Net?

    I tried doing that in another post using VB6 code, and to the best of my
    knowledge, that's not possible in VB6.

    Spoo

  5. #5
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Picturebox (or other) with overlayed next/previous arrows

    Quote Originally Posted by Spooman View Post
    If I read you right, a PictureBox can be set to be transparent in .Net
    No, you would draw on the PictureBox control using a transparent colour. You can draw on a control in its Paint event handler. Calling FillRectangle will draw a coloured rectangle on the control and the Color specified for that rectangle can be transparent.

  6. #6
    Fanatic Member Spooman's Avatar
    Join Date
    Mar 2017
    Posts
    868

    Re: Picturebox (or other) with overlayed next/previous arrows

    JMC

    OK. Thanks for that

    Spoo

  7. #7
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: Picturebox (or other) with overlayed next/previous arrows

    Here is a free-typed example that may benefit you:
    Code:
    Public Class Slideshow
        Inherits PictureBox
    
        Private _images As New List(Of Image)
        Public Property Images As List(Of Image)
            Get
                Return _images
            End Get
            Set(ByVal value As List(Of Image))
                If value IsNot _images Then
                    _images = value
                    Me.OnImagesChanged()
                End If
            End Set
        End Property
    
        Private _index As UInteger = 0
        Public Property Index As UInteger
            Get
                Return _index
            End Get
            Set(ByVal value As UInteger)
                If value <> _index AndAlso value < _images.Count - 1  Then
                    _index = value
                    Me.OnIndexChanged()
                ElseIf _images.Count - 1 > -1 AndAlso value < _images.Count - 1 Then
                    Throw New IndexOutOfRangeException("The Index property cannot be greater than the number of images stored in the Images property.")
                ElseIf _images.Count = 0 Then
                    Throw New Exception("There are no images stored in the Images property, add some images before setting the value of the Index property.")
                End If
            End Set
        End Property
    
        Private _leftArrowVisible As Boolean = True
        Public Property LeftArrowVisible As Boolean
            Get
                Return _leftArrowVisible
            End Get
            Set(ByVal value As Boolean)
                If value <> _leftArrowVisible Then
                    _leftArrowVisible = value
                    Me.OnLeftArrowVisibleChanged()
                End If
            End Set
        End Property
    
        Private _rightArrowVisible As Boolean = True
        Public Property RightArrowVisible As Boolean
            Get
                Return _rightArrowVisible
            End Get
            Set(ByVal value As Boolean)
                If value <> _rightArrowVisible Then
                    _rightArrowVisible = value
                    Me.OnRightArrowVisible()
                End If
            End Set
        End Property
    
        Protected Overridable Sub OnImagesChanged()
            RaiseEvent ImagesChanged(Me, EventArgs.Empty)
        End Sub
    
        Protected Overridable Sub OnIndexChanged()
            MyBase.Image = Me.Images(Me.Index)
            RaiseEvent IndexChanged(Me, EventArgs.Empty)
        End Sub
    
        Protected Overridable Sub OnLeftArrowVisible()
            RaiseEvent LeftArrowVisible(Me, EventArgs.Empty)
        End Sub
    
        Protected Overridable Sub OnRightArrowVisible()
            RaiseEvent RightArrowVisible(Me, EventArgs.Empty)
        End Sub
    
        Public Event ImagesChanged(ByVal sender As Object, ByVal e As EventArgs)
        Public Event IndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        Public Event LeftArrowVisible(ByVal sender As Object, ByVal e As EventArgs)
        Public Event RightArrowVisible(ByVal sender As Object, ByVal e As EventArgs)
    
        Private isMouseOver As Boolean = False
        Private isMouseOverLeft As Boolean = False
        Private isMouseOverRight As Boolean = False
        Protected Overrides Sub OnMouseEnter(ByVal e As EventArgs)
            isMouseOver = True
            MyBase.OnMouseEnter(e)
        End Sub
        
        Protected Overrides Sub OnMouseLeave(ByVal e As EventArgs)
            isMouseOver = False
            MyBase.OnMouseLeave(e)
        End Sub
        Protected Overrides Sub OnMouseMove(ByVal e As MouseEventArgs)
            isMouseOverLeft = e.X > 0 AndAlso e.X < Me.ClientSize.Width * 0.25
            isMouseOverRight = e.X < Me.ClientSize.Width AndAlso e.X > Me.ClientSize.Width - Me.ClientSize.Width * 0.25
            MyBase.OnMouseMove(e)
        End Sub
    
        Protected Overrides Sub OnPaint(ByVal pe As PaintEventArgs)
            MyBase.OnPaint(pe)
    
            If isMouseOverLeft OrElse isMouseOverRight Then
                Using bgBrush As Brush = New SolidBrush(Color.FromArgb(84, 153, 153, 153))
                    pe.Graphics.FillRectangle(bgBrush, New Rectangle(If(isMouseOverLeft, 0, Me.ClientSize.Width - Me.ClientSize.Width * 0.25), 0, Me.ClientSize.Width * 0.25, Me.ClientSize.Height))
                End Using
            End If
    
            If isMouseOver Then
                Using arrowPen As Pen = New Pen(Color.FromArgb(84, 0, 0, 0), 3)
                    pe.Graphics.DrawLines(arrowPen, {New Point(25, Me.ClientSize.Height * 0.25), New Point(5, Me.ClientSize.Height * 0.5), New Point(25, Me.ClientSize.Height * 0.75))
                    pe.Graphics.DrawLines(arrowPen, {New Point(Me.ClientSize.Width - 25, Me.ClientSize.Height * 0.25), New Point(Me.ClientSize.Width - 5, Me.ClientSize.Height * 0.5), New Point(Me.ClientSize.Width - 25, Me.ClientSize.Height * 0.75))
                End Using
            End If
        End Sub
    
    End Sub
    There maybe some typos in there, but it should get the job done. The way that the transparency works is by drawing using specified brush with an ARGB color and the alpha being less than 255 (or 100%).
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width