[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2280
  • Last Modified:

vb.net panel scroll with picture box

Hi Experts,

I have a panel and a pictuerbox with a picture of a ruler on it.  The problem is when I scroll the panlel up and down the ruler/picturebox goes off the panel so you cant see it. I need some way keep the picturebox fixed in the Y / up and down direction/location, I still want it to scroll in the right to left direction.   I'm think something like what WordPad does.

Thanks
Richard
pic1.bmp
pic2.bmp
0
fwlrichard
Asked:
fwlrichard
  • 10
  • 7
  • 3
1 Solution
 
Jon500Commented:
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
0
 
fwlrichardAuthor Commented:
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

Open in new window

0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
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.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
fwlrichardAuthor Commented:
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
0
 
Jon500Commented:
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
0
 
Jon500Commented:
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
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
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.
0
 
fwlrichardAuthor Commented:
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
0
 
Jon500Commented:
OK--I will be happy to do that for you as your New Year's gift. :)

GIve me a few mins...
0
 
Jon500Commented:
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
0
 
Jon500Commented:
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
0
 
fwlrichardAuthor Commented:
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
0
 
fwlrichardAuthor Commented:
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
0
 
Jon500Commented:
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
0
 
Jon500Commented:
Hi,

I posted the solution file this time.

I also added the Application.DoEvents() to the code that moves the panel controls.

I used panel controls for my ruler container and grid container. Panel controls can host child controls, and those child controls will move along with their parent (panel) control. This is why the numbers on the ruler move even though the numbers are actually on a label control. The DoEvents() prevents some of the flicker.

Of course, my app is a demo only. You can refine it to suit your taste.

One final point: I have my scrollbars set to a min of 0 and a max of 100. This is nice because it translates to a percent. But to make effective use of scrollbars you may want to use a larger max and also tie the horiz scrollbar to the width of the grid panel and the ruler panel as the vscrollbar max to the height of the grid panel.

(BTW: It's not easy to upload a project solution here! The uploader won't allow .settings, .user, .suo, or other file types, so there was a lot of trial and error just getting the demo uploaded...... I have to learn an easier way to share a solution!)

Good luck,
Jon500
ScrollingGrid.zip
0
 
Mike TomlinsonMiddle School Assistant TeacherCommented:
"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...  =)
0
 
Jon500Commented:
@Idle_Mind: Wow! Thank you so much. I will use that!

Happy New Year,
Jon500
0
 
fwlrichardAuthor Commented:
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

Open in new window

Setup.png
0
 
fwlrichardAuthor Commented:
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
0
 
Jon500Commented:
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
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 10
  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now