Displaying an unknown amount of images in WPF without losing smooth scrolling - c#

I'm trying to code a picture book. For this I am scanning every subfolder of the MyPictures Folder and add every picture I find to an observableCollection. I dont want to limit the amount of pictures, in this view.
In function it should work the same way, the normal Windows explorer window with extra big symbols does.
I have tried a lot of things, but every solution I found always had the problem that I lost smooth scrolling (I tried virtualizing stackpanel. Aside from the worse looks compared to a grid it also had the scrolling problems).
If I understood correctly, the smooth scrolling doesn't work anymore, because pictures are loaded, and the scrollviewer has to be updatet, regardless if it is a virtualizing stackpanel or not.
In the windows explorer this is worked around by displaying placeholders, I think.
Do you have any idea how I could implement something like that myself?
Edit: At the moment, I am preloading chunks of the pictures. When the view was scrolled down, I update that chunk with the new pictures. But while the update is running, the scrolling gets laggy again.

Related

ListView flashes black on resize when large number of items inside

I have a ListView based control.
It's a file explorer.
When Path property is set, first all file system items are loaded by asynchronous method (using Win32 API).
This is super fast even for large number of files. Anyway, for C:\Windows\System32 I don't see any lag.
The items are then added to my ListView in batches of 64, after each 64 Dispatcher.Yield() is awaited to show what was added before the operation finishes. This again makes the whole thing way faster and more responsive.
There is however one not very fast operation: when I need an icon for a file for the first time, I have to make a system call. This call is made in getter, it's smart, it tries to use cache if available.
The loading of the view is a blink.
However when I load a huge directory (no problem, fast) - and then resize or maximize the window - I see some black flash before the control resizes.
It's like first the window resizes, the added space is painted black, then the larger ListView appears. It's supper annoying and like devastates my smooth experience. Is there any way to avoid this black space?
I tried to set Window background to white, didn't help. I tried to set my UserControl containing ListView background to white. No joy.
When there are not many items in the ListView there is no black flash, but it's still not smooth enough.
So - how to prevent seeing a black background while the control is being resized?
If anyone has performance issues with ListView - here's what should be done about it:
Do not execute any expensive operations on UI thread. In my case it was not exactly it, but similar. The offending code was hidden in item constructor, it tried to make some string conversions on start. Very bad idea, all expensive operations were moved to getters which solved half of the problem. The item constructor should be empty. No initial values. No initialization at all. All properties should be read via getters. This will result in executing 20 such operations per view instead of like 20000, but only if UI virtualization is used.
Use MVVM pattern, so do not add items directly, create an item source and add items to the source. This would allow built-in UI virtualization which is essential where you have a large number of items. Search "UI virtualization ListView" in Google for more details. This solved the problem definitely.
Think of data virtualization if populating the item source is too slow. In my case this was unnecessary. When getting ALL the data is relatively cheap - we're good. If not - we have to get only a chunk of data which is currently needed to be shown.
A simpler control template could increase application performance a little bit on some low end mobile devices.
If you use unmanaged code anywhere in your application, double check it, I forgot calling DestroyIcon once, and it resulted in very weird, unexpected behavior. So dispose anything disposable, destroy unused handles and such. Make triple sure it's done, I wasted countless hours on debugging such things. To be clear: unreleased resources didn't cause any performance issues, it caused other unexpected behavior like weird exceptions, disappearing icons and such. The issues seemed to come from ListView though.

Make the FlipView scroll smoother

I am programming a Windows 8.1 App using C#/XAML as well as the MVVM-Light Toolkit.
In that App I have a FlipView with an items in it that occupy the space of the whole Page. However when scrolling between them it does not look smooth because instead of really scrolling the FlipView directly displays about 8/10 on one side of the item that is being scrolled to and then just scrolls the left 20%.
My question now is whether it is possible to make the FlipView display all of the content. I've also thought about replacing the FlipView with a GridView. That would imply the problem of switching directly to the next item when the GridView is scrolled.
I don't see any code in my App that fits the question and research did not provide an answer yet.
Help is much appreciated.
Thanks :)
Problem solved.
I just had an unnecessary, complex task running every time the user scrolls. The issue I had was just a lag. Since it was the first time I used a FlipView I thought that was regular behaviour haha :D
Thank you anyways :)

Redrawing images on c# form

I have some troubles with redrawing images on c# Windows forms. I have some images to be drawn on panel. Everytime a panel_Paint event is raised, i draw my images. Everything was nice, untill I started to scroll my panel. The "redrawing" is for some reason noticeble to human eye. I mean, you can watch how the place, where image takes place, is for a very small time empty and image is drawn upon that place a bit later. This effect appeares each time I redraw my images. This effect reminds me the same as, when a Person scrolls something in folder on a PC without Graphic Card drivers installed.
Can i get rid of these visible "redrawings"?
I wish i could scroll my images without any lag.
I invalidate my panel with images, each time i move my mouse over other panel(this panel is some sort of scrollbar, that i am trying to implement).
EDIT: Problem resolved

Optimize controls animation

There are code in the project that implements simple "animation" - slide. There is pictureBox as content unit, and two buttons to slide to next pictureBox, or to previous. This code uses winforms.
To implement this "slide", location for both pictureboxes changes in cycle. But the control that slides to the screen (its start location out of the screen), does not redraw properly. So we tried to add refresh of content panel to the cycle (like this.contentPanel.Refresh()). And it worked fine. But problems occured when QAs tested this application on very slow VM. This animation took ages, because of that refsresh in cycle.
As quickfix we refactored code to perform this animation for constant time. So slow machine can animatie it for same time, but not so smoothly.
The question is, how can we optimize this? How can we redraw this controls more optimal?

Mouse cursor does not 'stick' to silverlight scrollbar control

I'm using the silverlight scrollbar and I'm finding that the mouse does not drag the scrollbar 1:1. When I drag downwards for instance I find the mouse cursor starts going down further than the scrollbar has..
edit: this issue occurs in IE8 but not Firefox 5.
Are you working with datasets or trying to display large, complex data within the object whatever the scrollbar is attached to?
If yes, try toggling UI virtualization and see if it changes anything.
If it doesn't work it may be something to do with GPU acceleration. Just toggle GPU acceleration in both SL project and IE. Sometimes when CPU loads a lot while scrolling, it just doesn't scroll correctly because of this, well, I call "lag".

Categories

Resources