Cannot find a performant way to refresh 2 elements which have a lot of other elements between them

[tster123]

I am working on an application which has an interface similar to WinDirStat or WizTree. I am planning to have many rectangles visible at once. However, I am running into a performance issue because I want to highlight whatever item the mouse is over and I also want to update some text on the bottom of the application. The issue that I am experiencing is that the performance is bad whenever the hovered item is not near the text. You can see this behavior yourself in this video.

Researching, I found this discussion where I learned that Avalonia uses a single bounding box around all updated elements to repaint, which explains this behavior.

Further researching I discovered the composition renderer. Looking at the sample code, I got it in my head that by using this to manually render the boxes and invalidate only the rectangles I want to invalidate that I wouldn't run into the same problem. Unfortunately, what I found is that even when I only invalidate small rectangles, it invalidates a bounding box of those rectangles. You can see this behavior in this video. NOTE: code to produce the above video is here.

Another thing I tried to do was to delay the update of the text until the next frame. (NOTE: I believe trying to figure out how to do this is how I found the composition renderer in the first place). While I got this to work, it only worked if there were no other updates in that frame and then once they collided once the frame performance bogged and then every update collided because the frame rate was low.

So, I'm kind of stuck on how to proceed with Avalonia. I am very new to Avalonia, and so far have been impressed with how much better it is to work with than WinUI3 and with the render performance of the framework compared to WinUI3. But I've now been stuck trying to figure out how to make this UI feel good, and I would love any advice from folks who have been working with this framework :)

BTW, I should mention that I played with the sample code and rendered some rectangles behind the animated circles and then watched as the invalidate method removed the paint of the rectangle even where the circles didn't pass over them.

• video
• modified sample code

If anyone cares to play with that you should note that I currently have it logging some text to C:\temp\log.txt (see line 317). In order to make it render a new rectangle click stop then start.

[msneijders]

Could UseRegionDirtyRectClipping = true help out here?

public static AppBuilder BuildAvaloniaApp()
    => AppBuilder.Configure<App>()
        .UsePlatformDetect()
        .With(new CompositionOptions()
        {
            UseRegionDirtyRectClipping = true
        })
        .UseSkia()

[tster123]

Wow, thank you. I spent >20 hours trying all sorts of different things to work around this and it's resolved with just a boolean flag :|.

One follow up question if you don't mind. I notice that you added .UseSkia() where the default doesn't have it. I tried my app both with it and without it and can't tell a difference. Is there a reason you recommended that line?

[msneijders]

AddSkia just came with my copypaste from the avalonia sample code without giving it much thought -- I think skia is the default anyway.

[msneijders]

ps: its the UsePlatformDetect() that is already calling UseSkia on all desktop platforms, another call is not doing anything.