vb.net panel scroll with picture box

I sounds to me that you have placed the ruler picture INSIDE the picture with the grid on it. This would make the ruler a child control of the grid, and anything that happens to the grid (with respect to scrolling) will happen to the ruler.

In design mode, select the ruler and Ctrl-x (cut) it to the clipboard. Then select the PANEL and paste it and align it with Y=0. Now handle the X offset based on the position of the horizontal scrollbar.

Regards,
Jon500

Hi Jon500,

I'm not sure what you mean by " handle the X offset based on the position of the horizontal scrollbar"
I posted my code striped down so you could take a look. I added panel1 then added the picturebox1 and panel2 on to panel1. Panel2 has the grid on it. I  turned on auto scroll for panel1, then resized panel2 to be bigger that panel1.
I plan on adding a left edge ruler too.
I'm just trying to get one thing working at a time.

Thanks
Richard

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        PictureBox1.Width = Panel2.Width
    End Sub

    Private Sub PictureBox1_paint(ByVal sender As System.Object, ByVal e As PaintEventArgs) Handles PictureBox1.Paint
        Dim x As Integer
        Dim y As Integer
        Dim units As Integer
        Dim f As Font = New Font(Font.Bold, 10)
        Dim myBrush As New SolidBrush(Color.Red)
        Dim num As Integer
        Dim string_format As New StringFormat
        string_format.Alignment = StringAlignment.Center
        string_format.LineAlignment = StringAlignment.Center


        x = 0
        y = 0
        num = 1
        units = 25
        e.Graphics.FillRectangle(Brushes.White, 0, 3, PictureBox1.Width, 20)
        ' e.Graphics.DrawLine(Pens.Black, 0, 14, 100, 14)
        For i = units To PictureBox1.Width
            e.Graphics.DrawLine(Pens.Black, i, 10, i, 15)
            i = i + (units - 1)
        Next i
        For i = 100 To PictureBox1.Width
            e.Graphics.DrawLine(Pens.White, i, 5, i, 20)
            i = i + (100 - 1)
        Next i
        For i = 100 To PictureBox1.Width
            e.Graphics.DrawLine(Pens.Black, i, 17, i, 22)
            i = i + (100 - 1)
        Next i
        For i = 100 To PictureBox1.Width
            e.Graphics.DrawString(num, f, myBrush, i, 10, string_format)
            num = num + 1
            i = i + (100 - 1)
        Next i
    End Sub
    Private Sub Draw_Gridlines(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Panel2.Paint

        Dim GridStep As Integer = 25
        Dim g As Graphics
        g = Panel2.CreateGraphics
        For x As Integer = 50 To Panel2.Width Step 50
            For y As Integer = 50 To Panel2.Height Step 50
                g.DrawLine(Pens.Blue, x, 0, x, Panel2.Height)
                g.DrawLine(Pens.Blue, 0, y, Panel2.Width, y)
            Next
        Next
    End Sub
End Class

Select allOpen in new window

I'm pretty sure he's saying to put PictureBox1 (with the ruler) OUTSIDE and ABOVE your Panel1...that way you're only scrolling the grid itself.

Hi Idle Mind,

Ok I started with the Pictuerbox out side of panel1.
The problem is I then need away to make the picture scroll left and right with the grid. Any idea on the how to do that or how do I get the scroll position so I can adjust the ruler to match the grid.

Thanks
Richard

Hi again,

Sorry, was eating dinner. :)

I thought you already knew how to tap into the scrollbar position values. If not, let me know. The idea is that the vertical scrollbar will control your grid's TOP property (Y offset) whereas the horizontal scroll bar will control your grid AND your ruler's LEFT property (X offset).

Does that make things clearer or can I help further? Don't hesitate.

Regards,
Jon500

Just to clarify a bit more:

The ruler's location.x property must be tied to the hscrollbar's value property; the ruler's location.y property should be fixed at 0.

The grid's location.x property must be tied to the hscrollbar's value property; the grid's location.y property must be tied to the vscrollbar's value property.

Regards,
Jon500

With the PictureBox outside of Panel1...you should place all of them inside a "master" panel.  This way, when you change the X position of the ruler to track the horizontal scrollbar it will be clipped by the master panel on the left/right sides.

Hi guys,

Scrolling and panels are new thing to me. Im some what new to vb.net.
Jon500, Yes I want the ruler's location.x property must be tied to the hscrollbar's value property; the ruler's location.y property should be fixed at 0.

I may need some type of code example to help me understand how to link the scrolls x locations if thats what your saying to do?

Thanks
Richard

OK--I will be happy to do that for you as your New Year's gift. :)

GIve me a few mins...

I attached an example that covers the things we have discussed. A fixed ruler is at the top of the form with a grid below. Each moves, as discussed, with the scroll bars.

Let me know if this example helps.


Regards,
Jon500
ScrollingGridExample.zip

I just realized I sent you only the .proj and form files. You should be able to add this project to your existing Solution. If you need a .sln file, let me know.

Jon500

John500,

I tryed to run what you attached.
I get 4 errors.
Cant find Application.Designer.vb, AssemblyInfo.vb, resources or settings.Designer.vb
I'm using 2010 beta.
I did get the form to open I took a look at it . I think I know what what I was missing now.
I was using the built in scrollbars from the panel and you added VScrollBar1 and HScrollBar1 I think thats the key to getting what I want done. I tested the idea on my program I can use the scroll the panel with no problem it looks like I may need to place the picturebox on a sepert panel to scroll it.
If you want to attach file to make you code work I would like to see it work or if im not loading/opening it correctly let me know.

Thanks for all the help.
Richard

Jon500,

Ok I placed the picturebox on a panel by its self. I was able to used the VScrollBar1 to scroll it. This fixed my main problem ,now it's off to see what else I don't know. lol iIm sure it wont take my long.
I did notice what i'll call ghost scrollbars on the panles when I scroll but I can live with that.

Again Thank You and Happy New Year
Richard

Richard,

Sorry about the dependencies. I will post a new one soon for others to see.

As far as ghosting, try doing a "DoEvents" to ensure that there is enough time for your app to repaint the GUI.

I'll be in touch again in a moment or two.

Regards,
Jon500

"I have to learn an easier way to share a solution!"

You can upload things to EE-Stuff:
http://www.ee-stuff.com/

I've used it before on occasion myself...  =)

@Idle_Mind: Wow! Thank you so much. I will use that!

Happy New Year,
Jon500

First off
Thank You Jon500

I rewrote and added to some of my code to your code to help others like me who are just learning vb.net
My misstake was that I was using the build in scrolls of the panel and not the scrolls from the Toolbox.
Ok
Add Panel1 to form
Add Panel2 inside/on top of Panel1
Resize Panel2 to a size biger than Panel1
Add VScrollBar1 and HScrollBar1 to the form
Add Panel3 to the form
Add Panel4 inside/on top of Panel3
Add PictuerBox1 inside/on top of Panel4
You should have a form that looks like the attached Image.
Select all the code from the attached Code Snippet.
Now double click the form select all code and past the code snippet.
Thats it now hit F5 and try it out.

Thanks
Richard

Imports System.Drawing

Public Class Form1

    Dim PointGrid As New Point

    Private Sub VScrollBar1_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles VScrollBar1.Scroll

        PointGrid.X = Me.Panel2.Location.X
        PointGrid.Y = Me.VScrollBar1.Value * -1
        Me.Panel2.Location = PointGrid
        Application.DoEvents()

    End Sub

    Private Sub HScrollBar1_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles HScrollBar1.Scroll

        PointGrid.X = Me.HScrollBar1.Value * -1
        PointGrid.Y = Me.Panel2.Location.Y
        Me.Panel2.Location = PointGrid
        Application.DoEvents()

        PointGrid.X = Me.HScrollBar1.Value * -1
        PointGrid.Y = Me.Panel4.Location.Y
        Me.Panel4.Location = PointGrid
        Application.DoEvents()

    End Sub

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Panel3.Width = Panel1.Width
        Panel4.Width = Panel2.Width
    End Sub
    Private Sub Draw_Gridlines(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Panel2.Paint

        Dim GridStep As Integer = 25
        Dim g As Graphics
        g = Panel2.CreateGraphics
        For x As Integer = 50 To Panel2.Width Step 50
            For y As Integer = 50 To Panel2.Height Step 50
                g.DrawLine(Pens.Blue, x, 0, x, Panel2.Height)
                g.DrawLine(Pens.Blue, 0, y, Panel2.Width, y)
            Next
        Next
    End Sub
    Private Sub PictureBox1_paint(ByVal sender As System.Object, ByVal e As PaintEventArgs) Handles PictureBox1.Paint
        Dim x As Integer
        Dim y As Integer
        Dim units As Integer
        Dim f As Font = New Font(Font.Bold, 10)
        Dim myBrush As New SolidBrush(Color.Red)
        Dim num As Integer
        Dim string_format As New StringFormat
        string_format.Alignment = StringAlignment.Center
        string_format.LineAlignment = StringAlignment.Center


        x = 0
        y = 0
        num = 1
        units = 25
        e.Graphics.FillRectangle(Brushes.White, 0, 3, PictureBox1.Width, 20)

        For i = units To PictureBox1.Width
            e.Graphics.DrawLine(Pens.Black, i, 10, i, 15)
            i = i + (units - 1)
        Next i
        For i = 100 To PictureBox1.Width
            e.Graphics.DrawLine(Pens.White, i, 5, i, 20)
            i = i + (100 - 1)
        Next i
        For i = 100 To PictureBox1.Width
            e.Graphics.DrawLine(Pens.Black, i, 17, i, 22)
            i = i + (100 - 1)
        Next i
        For i = 100 To PictureBox1.Width
            e.Graphics.DrawString(num, f, myBrush, i, 10, string_format)
            num = num + 1
            i = i + (100 - 1)
        Next i
    End Sub

    Private Sub Draw_Gridlines(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Panel2.Paint

    End Sub
End Class

Select allOpen in new window

Setup.png

Thanks for my new years gift. I posted the code with an image and form setup explanation for thoes who are just learning vb.net.

Thanks
Richard

Hi Richard,

Thank you for the follow-up and points.

Yes, the h/vscrollbar controls are key here. Also key is using panel controls to serve as "parent" to "child" controls.

I like how you placed the ruler outside and above the grid. That's exactly how it should be done even though my example showed how you can place the ruler inside the grid's panel as well (it's just not as clean and may cause extra flicker; my goal (of course) was simply to show how child/parent controls can be contained and manipulated with scroll bars rather than offer a polished app).

I hope the Application.DoEvents() helped the flicker issue. Remember that running in debug mode will always be slower than running your compiled release-version EXE.

I'm glad I could help and thanks for provided the additional post to help others getting started. I'm sure others will find this thread useful.

Regards,
Jon500