locked
How to create Page turning effect in vb.net RRS feed

  • 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

    Thursday, September 11, 2014 6:09 PM

Answers

  • 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

    • Edited by tommytwotrain Saturday, September 13, 2014 2:25 PM added panel border
    • Proposed as answer by Mr. Monkeyboy Saturday, September 13, 2014 3:14 PM
    • Marked as answer by Tabzee Saturday, September 13, 2014 7:12 PM
    Saturday, September 13, 2014 2:11 PM

All replies

  • 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


    • Edited by Mr. Monkeyboy Thursday, September 11, 2014 7:20 PM Changed rotate to skew
    Thursday, September 11, 2014 6:30 PM
  • 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.

    Thursday, September 11, 2014 7:37 PM
  • This is an example of skewing an image for a page turning effect. It could be speeded up or slowed down.


    La vida loca


    Thursday, September 11, 2014 7:39 PM
  • 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

    Friday, September 12, 2014 1:48 PM
  • How did you do this?
    Friday, September 12, 2014 2:07 PM
  • 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?

    Friday, September 12, 2014 2:08 PM
  • 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


    Friday, September 12, 2014 3:58 PM
  • 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:)

    Saturday, September 13, 2014 3:42 AM
  • 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

    • Edited by tommytwotrain Saturday, September 13, 2014 2:25 PM added panel border
    • Proposed as answer by Mr. Monkeyboy Saturday, September 13, 2014 3:14 PM
    • Marked as answer by Tabzee Saturday, September 13, 2014 7:12 PM
    Saturday, September 13, 2014 2:11 PM
  • 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

    Saturday, September 13, 2014 3:14 PM
  • 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:)



    • Edited by Tabzee Saturday, September 13, 2014 8:11 PM
    Saturday, September 13, 2014 7:16 PM
  • 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?

    Saturday, September 13, 2014 8:41 PM
  • 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?

    Saturday, September 13, 2014 9:33 PM
  • 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.
    • Edited by Tabzee Saturday, September 13, 2014 10:14 PM
    Saturday, September 13, 2014 10:12 PM
  • 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.

    Sunday, September 14, 2014 2:16 PM
  • 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

    Monday, September 15, 2014 2:45 AM
  • Thanks alot. Il do the same thing as u said.

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

    Tuesday, September 16, 2014 7:37 AM
  • 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 tabrez.rules@gmail.com

    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

    Tuesday, September 16, 2014 7:46 AM
  • 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 tabrez.rules@gmail.com

    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

    Tuesday, September 16, 2014 12:10 PM
  • 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

    Tuesday, September 16, 2014 5:36 PM