How to create Page turning effect in vb.net

Question

I am making a project in vb.net. I want to include Page turning effect in my project. Can anyone please guide me how to do it.

Thank you in advance

Answer 1

I am making a project in vb.net. I want to include Page turning effect in my project. Can anyone please guide me how to do it.

Thank you in advance

A page turning effect?

For what type of control?

AFAIK the only way to simulate that would be via using Images in some fashion which display drawn text on each one of them so that you can skew the image or something.

You should probably explain what your project is going to do, how it is going to display a page for whatever a page is, what control you are trying to use to display a page and what type of file the information for the page is obtained from.

---

La vida loca

Answer 2

Hello,

The only true example is on Code Project web site but only in C#. I did a quick search and when VB.NET coders wanted this the stock answer was look at the Code Project article. I invite you to view the source code of this project and scan over the text in the article, it will not take long to realize this is not easy to code.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem.

Answer 3

This is an example of skewing an image for a page turning effect. It could be speeded up or slowed down.

---

La vida loca

Answer 4

I have to Make Entrance Exam project in vb.net. In my project i used a panel control to display a Question with its four Options. I have kept a button named "NEXT" to display the Question with it's options. So I want, when the user clicks on NEXT, then a page turning effect should be created to display the next Question. So i need help in doing this. I request you all to please help me.

Thank you in advance

Answer 5

How did you do this?

Answer 6

I have to Make Entrance Exam project in vb.net. In my project i used a panel control to display a Question with its four Options. I have kept a button named "NEXT" to display the Question with it's options. So I want, when the user clicks on NEXT, then a page turning effect should be created to display the next Question. So i need help in doing this. I request you all to please help me.

Thank you in advance

Monkey's example looks promising, will that work for you?

If not you need to describe what you want exactly. I can think of a number of ways to do it.

Do you have a link to an example to show us? Try to describe the effect you want to see. Do you want to draw it? Move a picturebox? Use a bitmap image etc?

Answer 7

How did you do this?

It's an image. Which probably will not work for what you want to do.

In a panel control you are displaying a question with four options. I don't know what that means.

Does the panel have a textbox in it that displays the question? And then the options are selected using other controls on the panel or something?

The code I used is with a PictureBox and two images are loaded into a List(Of Bitmap). The First image is drawn, the one looking like a page turning, after the second image is drawn so that it is always displayed over the second image. Then the first image is skewed to look like a page is being turned kind of.

So if you were to use this you would need to create all your questions in images. Load them in a List(Of Bitmap). Know which image index in the list is supposed to be on top and which one is supposed to be below that. And provide appropriate page turning controls to turn pages forwards or backwards.

Not much more difficult than this. But I've no idea what "options" for a question means.

Option Strict On

Public Class Form1

    Dim MyPages As New List(Of Bitmap)

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.Left = CInt((Screen.PrimaryScreen.WorkingArea.Width / 2) - (Me.Width / 2))
        Me.Top = CInt((Screen.PrimaryScreen.WorkingArea.Height / 2) - (Me.Height / 2))
        Dim Bmp1 As New Bitmap(225, 225)
        Dim Bmp2 As New Bitmap(225, 225)
        For y = 0 To Bmp1.Height - 1
            For x = 0 To Bmp1.Width - 1
                Bmp1.SetPixel(x, y, Color.White)
                Bmp2.SetPixel(x, y, Color.White)
            Next
        Next
        Using g As Graphics = Graphics.FromImage(Bmp1)
            g.DrawString("Hello." & vbCrLf & vbCrLf & "How are you?", New Font("Book Antiqua", 14, FontStyle.Regular), Brushes.Black, 20, 40)
            g.DrawString("Page 1", New Font("Book Antiqua", 14, FontStyle.Regular), Brushes.Black, 160, 190)
            Using Pen1 As New Pen(Brushes.Aqua, 5)
                g.DrawRectangle(Pen1, 3, 3, 219, 219)
            End Using
        End Using

        Using g As Graphics = Graphics.FromImage(Bmp2)
            g.DrawString("Hello to you." & vbCrLf & vbCrLf & "I am fine!", New Font("Book Antiqua", 14, FontStyle.Regular), Brushes.Black, 20, 40)
            g.DrawString("Page 2", New Font("Book Antiqua", 14, FontStyle.Regular), Brushes.Black, 160, 190)
            Using Pen1 As New Pen(Brushes.Red, 5)
                g.DrawRectangle(Pen1, 3, 3, 219, 219)
            End Using
        End Using

        MyPages.Add(Bmp1)
        MyPages.Add(Bmp2)
        Button1.Text = "Start Timer"
        Button1.BackColor = Color.Lime
        Timer1.Interval = 1
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        If Button1.Text = "Start Timer" Then
            SkewIt = 225
            Button1.Text = "Stop Timer"
            Button1.BackColor = Color.OrangeRed
            Button1.Enabled = False
            PictureBox1.Refresh()
            Timer1.Start()
        End If
    End Sub

    Dim SkewIt As Integer = 225 ' Image width which is same as PictureBox's width

    Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

        e.Graphics.DrawImage(MyPages(1), 0, 0, MyPages(1).Width, MyPages(1).Height) ' Draw second page Moon2

        ' New Point(0, 0)  = destination for upper-left point of original 
        ' New Point(225, 0) = destination for upper-right point of original 
        ' New Point(0, 225)  = destination for lower-left point of original 

        Dim destinationPoints As Point() = {New Point(0, 0), New Point(SkewIt, 0), New Point(0, 225)}

        e.Graphics.DrawImage(MyPages(0), destinationPoints) ' Draw first page Crossbones.

    End Sub

    Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        If SkewIt > 5 Then
            SkewIt -= 3
        Else
            SkewIt -= 1
        End If
        PictureBox1.Refresh()

        If SkewIt = 0 Then Timer1.Stop() : Button1.Text = "Start Timer" : Button1.BackColor = Color.Lime : Button1.Enabled = True
    End Sub

End Class

---

La vida loca

Answer 8

Thank you for your replies.

Sorry I posted with less information. In the panel control I used a Lable to display question and four Radiobuttons to display the multiple choices(options).

From your above given suggestion and code, I am planning to take take run time snap of the panel control(Which contains a Lable with 4 radio buttons), and when the user clicks on the NEXT button, then create the same effect what you shown me in your earlier reply. But now here the problem arises , how to take a snap of a particular control and store it into a LIST(Of Bitmap) or in IMAGELIST control for temporary storage.

So can you guide me how to do it please.

Thank you in advance:)

Answer 9

Here is an example that captures the panel and then puts the image in another panel that is the page moving. This way you wont need to save the images. If you want to save the images that can be done but this seems easy.

Public Class Form3
    Private WithEvents Timer1 As New Windows.Forms.Timer With {.Interval = 50, .Enabled = False}
    Dim QuestionNumber As Integer
    Dim panelx As Integer
    Dim questions(1) As String
    Private Sub Form3_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.DoubleBuffered = True


        Panel2.Size = Panel1.Size
        Panel2.BackgroundImageLayout = ImageLayout.Stretch
        Panel2.Visible = False
        Panel2.BorderStyle = BorderStyle.FixedSingle

        questions(0) = "Who is buried in Grant's Tomb?"
        questions(1) = "Who was the first man on the moon?"

        Label1.Text = questions(0)
    End Sub
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Using bmp As Bitmap = New Bitmap(Panel1.ClientSize.Width, Panel1.ClientSize.Height)
            Dim rect As New Rectangle(0, 0, bmp.Width, bmp.Height)
            Panel2.Location = Panel1.Location
            Panel2.Visible = False
            'copy the panel to bmp
            Panel1.DrawToBitmap(bmp, rect)

            'show the hidden panel with the bmp
            Panel2.BackgroundImage = bmp.Clone
        End Using

        'advance to next question
        Panel2.Visible = True
        QuestionNumber += 1

        If QuestionNumber > 1 Then
            MsgBox("This concludes the test")
            End
        End If
        Label1.Text = questions(QuestionNumber)

        'turn the page

        Timer1.Start()

    End Sub

    Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        panelx += 10
        If panelx > Panel1.ClientSize.Width Then
            Timer1.Stop()
            Panel2.Visible = False
        End If
        Panel2.Width = Panel1.Width - panelx

    End Sub
End Class

Answer 10

1. Nobody. Grant's Tomb isn't underground so it's not buried and neither is he.

2. Neil A. Armstrong (RIP). "One small step for man, one giant leap for mankind."

---

La vida loca

Answer 11

Thank's a lot:)

The code was easy to understand with the appropriate comments related to the statements.But I am confused why we are using rectangle along with Bitmap image?

And also ,Though DOUBLEBUFFER is true, yet some flickering is happening, so is there any way to reduce it ?

Thank you in advance:)

Answer 12

Thank's a lot:)

The code was easy to understand with the appropriate comments related to the statements.But I am confused why we are using rectangle along with Bitmap image?

And also ,Though DOUBLEBUFFER is true, yet some flickering is happening, so is there any way to reduce it ?

Thank you in advance:)

Tab,

The Rect is required for the DrawToBitmap function. It is the size of the source image is drawn on the target bitmap.

I dont think the form doublebuffer is doing anything in this case. I tried it and forgot to take it out.

As far as flickering goes, that depends on what you mean by flickering. I think you can make the panelx step smaller, now it is 20. And you could speed up the timer to maybe 30ms but I think that is as fast as it will go. That will help smoothing the animation.

I dont think you can do much else to this technique for flickering. Seems pretty smooth to me now compared to any other animation made this way. Note the animated gif I posted is a little jerkier than the real program running.

Maybe others have suggestions.

The next step would be to draw the whole thing instead of moving a control with an image in it as shown. Not sure it would change anything though. How much time do you want to spend on this part of it?

Answer 13

Thank you for your response:)

Yeah it worked out. i reduce the Timer interval value and now it is moving smoother.

Is it possible to turn the Panel2(control used in above program) as a page turning(see the below image) instead of turning the page horizontally.If it is possible please help me out.

Thank you in advance

What is this for? Is it homework?

What have you tried already? Show us what you have done. Kevin's example above is similar. There are other examples on the net. Its not easy. How much time do you want to spend on it? What is your drawing level?

Answer 14

No its not a home work, It is my project. I am done with my Design and Coding. Now just searching for this Page turn effect. I have more 10 days left to submit the project.

Answer 15

No its not a home work, It is my project. I am done with my Design and Coding. Now just searching for this Page turn effect. I have more 10 days left to submit the project.

If its not for school, then who do you submit it to?

I have spent some time on this but it is quite involved and I really have other things I should do. I can get you started with what I have so far. But you need to be more involved in it. You may not find anyone to just write the code for you on this one.

It is well laid out in the link that Kevin gave but it is C# code. Maybe someone can translate it? Monkey?

I would suggest posting the question again with the new pictures, ref this thread. Maybe others will have more ideas. Put the details in of exactly what you want. Its still not clear to me exactly what to do. ie do you want the page image to move and turn on the page or just show a blank page turning?

Once the question is marked as answered the interest goes down.

Answer 16

No its not a home work, It is my project. I am done with my Design and Coding. Now just searching for this Page turn effect. I have more 10 days left to submit the project.

I would recommend you use a search engine and search the net for something like "page turning effect vb.net" or "page flipping effect vb.net" or "page turning vb.net" or "page flipping vb.net" or any number of other possible search strings.

Although some results will be in C# you can use an online code converter like Telerik to convert C# to VB.

After all this isn't a custom order code forum and plenty of code is available out there on the net for such a thing. Then you can shop the results and see on your own if anything impresses you and will work with the controls you want to use.

---

La vida loca

Answer 17

Thanks alot. Il do the same thing as u said.

I am really thankful for your all guidance and support:)

Answer 18

Sorry its my college MINI project.

Thank you for your previous code. I have used that in my project. And yeah ill make sure next time when i post an Question Il be clear to my point with proper material.And what I wanted was the Panel image what you have created to turn as a Paper(Instead of moving straight towards left side). Any ways ill browse for it. If you get a Idea or information , please mail to my EMAIL ID.

My Email ID is [e-mail]

Almost you have given 80 percent of Page turning code, i just need to search to change the turning of image style.

Once again thank you and Monkey for your helps

Answer 19

Sorry its my college MINI project.

Thank you for your previous code. I have used that in my project. And yeah ill make sure next time when i post an Question Il be clear to my point with proper material.And what I wanted was the Panel image what you have created to turn as a Paper(Instead of moving straight towards left side). Any ways ill browse for it. If you get a Idea or information , please mail to my EMAIL ID.

My Email ID is [e-mail]

Almost you have given 80 percent of Page turning code, i just need to search to change the turning of image style.

Once again thank you and Monkey for your helps

Tab,

Its not rotating the image that is hard, it is clipping the image into a triangle or trapezoid as the page turns that seems the most difficult.

You might need to make a polygon path the shape of a triangle and use it for a clipping region. Again I think they show how in the article in Kevin's post but I did not download the code and look at it.

Here is a sample that uses path clipping to make an irregular shaped bitmap. The photo is clipped inside the blue outline.

You can use something similar. You just need to calc the triangle etc shapes to create the polygon and then put the captured image of the panel inside. To rotate the image your can use the graphics.rotatetransform.

'bitmap clipped inside polygon using g.SetClip
Imports System.Drawing.Drawing2D
Public Class GraphicsPthClipScaled
    Private Sub Form5_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        'load Rusty's image 
        Using bmpRusty As Bitmap = Image.FromFile("c:\bitmaps\rusty.jpg")

            'make a bitmap the size of the form to draw on
            Using bmp As Bitmap = New Bitmap(Me.Width, Me.Height)
                Using g As Graphics = Graphics.FromImage(bmp)
                    With g
                        'setup a scale 20 units across the width
                        Dim theScale As Single = 20
                        Dim scaleratio As Single = Me.ClientSize.Width / theScale
                        .PageUnit = GraphicsUnit.Pixel
                        .PageScale = scaleratio
                        .Clear(Color.White)

                        'draw grid
                        Using p As Pen = New Pen(Color.Gray, 0.01)
                            For x = 0 To 20 Step 5
                                'x axis
                                .DrawLine(p, x, 0, x, theScale)
                                .DrawString(x.ToString, New Font("Arial", 12), Brushes.Gray, x, 0)
                                'y axis
                                .DrawLine(p, 0, x, theScale, x)
                                .DrawString(x.ToString, New Font("Arial", 12), Brushes.Gray, 0, x)
                            Next
                        End Using

                        'draw polygon with rusty inside
                        Using pth As New Drawing2D.GraphicsPath
                            'make a rect 7 units wide
                            Dim thePolygon(3) As PointF
                            thePolygon(0) = New PointF(3, 2)
                            thePolygon(1) = New PointF(20, 3)
                            thePolygon(2) = New PointF(18, 13)
                            thePolygon(3) = New PointF(4, 16)

                            pth.AddLines(thePolygon)
                            pth.CloseFigure()

                            'size the destination rectangle to be the scale size of the picture
                            Dim w As Single = 14 'picture width in scale drawing units
                            Dim h As Single = w * bmpRusty.Height / bmpRusty.Width

                            'use pathbounds to get upper left of polygon in scale units
                            Dim PathBoundsRect As RectangleF = pth.GetBounds

                            'locate the dest rect at the upper left of the polygon with size in scale units
                            Dim destRect As RectangleF = New RectangleF(PathBoundsRect.X, PathBoundsRect.Y, w, h)

                            'the source rect is the full size Rusty image
                            Dim srcRect As RectangleF = New Rectangle(0, 0, bmpRusty.Width, bmpRusty.Height)

                            .SetClip(pth)
                            .DrawImage(bmpRusty, destRect, srcRect, GraphicsUnit.Pixel)
                            .DrawPath(New Pen(Color.SteelBlue, 0.5), pth)

                            'restore previous
                            .ResetClip()

                            'copy what we drew to the form
                            Me.BackgroundImage = bmp.Clone

                        End Using
                    End With
                End Using
            End Using
        End Using
    End Sub
End Class

Answer 20

Thanks a lot. I know you have spended a lot time on this. Still i dint went through your code. Now I need to study it:) I dint expected again you will code it,I really appreciate your help:) Thank you