Flickering canvas scroll

Can anyone help me with this project ?

It’s a very simple scheduler wannabe… (a work in progress). So I am drawing a grid in a canvas, with some columns and rows… but when I scroll it vertically, it flickers, specially in the top part… I don’t know how to avoid this and I don’t like how i looks. I even removed the scroll bar in the hope that If I coded the scroll just one row at a time it would not flicker… but I can’t fix it…

I’d appreciate if anyone could take a look at it… (excuse my bad coding).
Just move the mouse wheel to scroll the main canvas up and down (fast)…

You can download it at : https://drive.google.com/open?id=0B3LQKr6mspNPemEtdjA2eVVOSE0

thanks!

Have you turned on double buffering?

I had a similar problem in CalendarView

As you redraw the entire control in the Paint event, you can disable EraseBackground which causes most of the flickering.

Second improvement is to replace all DragCanvas.Refresh by DragCanvas.Refresh(False), to prevent the background from being erased.

Third improvement is to first draw everything into a Buffer image and then draw the buffer. This is how I did it in CalendarView.

Your Paint event code would be something like:

  
  Dim buffer As Picture
  Dim gb As Graphics
  
  #if TargetWindows //Only buffer on Windows
    buffer = new Picture(g.Width, g.Height, 32)
    gb = buffer.Graphics
  #else
    gb = g
  #endif
  
  ///DRAW BACKGROUND
  gb.DrawPicture(background, 0, mYScroll)
  
  // Now draw each event
  For Each pic As DrawnEvent In mPics
    
    gb.DrawPicture(pic.Image, pic.x, pic.y+mYScroll)
    
  Next
  
  // THIS IS HERE TO ADJUST THE VERTICAL SCROLL BAR MAX IN CASE OF RESIZE. (?)
  //MainWindow.VerticalScrollBar.Maximum = background.Height - g.Height
  
  //MainWindow.VerticalScrollBar.Maximum = app.WorkingHours*20
  
  #if TargetWindows
    g.DrawPicture(buffer, 0, 0)
  #endif

Please keep in mind that your code isn’t optimised for Retina on Mac, and maybe not optimised for HiDPI on Windows.

Hey Jrmie, thanks a lot…

Unfortunately, I tried all your suggestions and have seen no change… :frowning:

Scrolling the picture in the canvas cause flickering… it’s not a show stopper but I don’t like it at all…

ps. Double buffering is on…

did you remove EraseBackground in the Inspector for MainCanvas on MainWindow ?

yes, I did…

Could you verify the flickering on your computer, as well ?

I don’t have a Windows computer at the moment so I can’t test.

Don’t scroll. Repaint with an offset.

Hey Michel thanks for the idea… I could try that… but there’s no way I can get rid of the flickering without re writing ?

Seriously… (I really have no experience with this)… There’s not a SAFE no flicker technique to scroll a canvas on a windows pc ???

Roman,

I have used Xojo (RB then RS) for Windows apps for close to 15 years. I believe learning how to apply an offset to a canvas to obtain scroll is the best way to alleviate flicker.

That said, there are other techniques. One of them is to use a ContainerControl, rest the canvas onto it with the full size of the drawing, controls on top of it if needed. Then place the ContainerControl onto the window, and scroll its content by setting the offset of the canvas inside. I my experience, that means much less flicker when you want to rest controls on a canvas.

If you do not need to scroll controls with the canvas, drawing with offset is the simplest.

I will think about it, but for now, I don’t need any controls within the canvas… I will investigate drawing it with an offset…

Thanks!