Hi. I am trying to implement an animated side menu bar for a desktop app to be used with Windows and Mac. Building on Windows and using r16.4
I’m using a canvas and a couple of timers to animate the side menu canvas. When the mouse hovers over the canvas, it comes out a little. It works fine when I built it in a dummy sample project, but when I implemented into my actual project, it still animated well, but when it went over another graphic on the screen, it seemed to move behind the other canvas or bleed into the other canvas or control.
I’m not sure if there is some magic trick to this, such as one control is in front of another or the timers are not using an appropriate calculation. The layout, items, and code from the sample was copied directly to the actual program but still the two canvases bled together when the menu bar was fully out in the actual program.
The link below is for the sample project. The first button takes to the screen where the menu bleeds into the static canvas, and the second button is the menu bar working as expected with no bleed. In the dropbox zip, there is also a screenshot showing a comparison just in case if you run the sample, and it does not perform as I am seeing it
side menu bar
The use of the timers for the animation was borrowed from another project found on the forum some time ago. I think the animation is pretty smooth, but sometimes it is a bit choppy. If someone has advice on a better, smoother method for the animation piece, please advice. Most importantly for this post though is the bleeding issue when the canvas animates over another control. Advice on the smoothness of the animation is a bonus 
Thanks!
Ryan
Here you go Ryan.
https://www.dropbox.com/s/1j4wkmrjkossxsx/side%20menu%20bar%20fixed.zip?dl=1
I’ve just included my zorder fix routine and some temporary transparency fix code that I’ve been playing around with (not released or discussed about anywhere yet). See how you get on with it. The code change is in sideMenuBar1.Open, I also turned off EraseBackground from Canvas4 so make things flicker a little less.
If you want to know more about the fix, have a read of this thread Flicker/Refresh Problem - Windows - Xojo Programming Forum and my posts here How to fix canvas flicker in Windows 7/8/10? - General - Xojo Programming Forum and through the feedback app here <https://xojo.com/issue/47001>.
This problem has been acknowledged by Xojo but how long will it take to fix is anyones guess, I’m afraid it could be a few months, or it could be a few years.
Regarding the problems with making smooth animations, that’s something that needs a little more work on your part when using Xojo. The whole form isn’t double buffered (in windows) meaning that when the folder slides away there can be multiple paints on the form leading to flickering and/or tearing. Ideally during the slide in process you would not move your control as you do, but place it onto the form where you want it to finally end up, then you would animate/move the MenuFolder image instead of the Canvas control. You can also use Page Not Found — Xojo documentation if you want to render some moving controls during the animation, when they are in their final resting state, then make the controls visible that you have just animated moving out, but move when in one go, don’t animate their move (with .Left)
Hope this helps.
Awesome Julian, thanks! I’m not at the computer at the moment but will try this out tomorrow.
I really appreciate the assistance!
Hi Julian. This works great now! I still have to work on the moving of the image itself instead of the whole canvas, but at least this solves the bleeding/overlapping issue. Thanks again!
Ryan,
Try adding a control such as a button or a popup menu so your menu slides out over it. Notice that the controls bleed through.
The only way I’ve successfully done this is by putting the slide out in a window.
Snap Design.xojo_binary_project
Hi Neil. Thanks for responding and showing this example. It’s quite impressive! Yes, I do have some controls on the screen, and when the menu moves over these, at first there is no issue, but when I hover over where they are placed on the screen behind the canvas, they do indeed pop out.
I tried working with your project to get it to fit the needs of my project, however, I was having some difficulty. For example:
- How can you change the size of the side menu bar? Your example seems to have the height relative to the number of items in the MainMenu canvas open event. For the width, I attempted, but could not find how this can be customized. I have the image of my menu bar with the dimensions of 290x530
- In my project, I want no menu to be present at open. Instead, I have a stall timer that waits for 2 seconds and then pushes out only a small piece of the canvas. In my image, it’s a folder on the side with the tab part saying Menu and is sideways. I couldn’t figure this part out too. This initial move isn’t critical, but for the start of the app, I’d like the folder to be present with just the tab and a little of the folder showing
I really wish I could get this to work with your sample. What I’ve done to prevent the controls from bleeding through is to disable and/or make certain controls .Visible = False while the menu is out
Thanks again and nice work!
Hi Ryan, I’ve tried the side bar project on windows 10 and it flicker a lot during the animation.
Is there a way to avoid it?
Not that I’ve come up with yet. Still playing around with it. I think it worsens when there are more controls on the screen and the menu goes over them