I created a simple application with ListBox and 1000 very short strings in it. (no explicit ItemTemplate).
If i scroll it really fast - there are black holes(CPU cant render fast i suppose).
At the same time if i use ItemsControl in ScrollViewer - everything is OKay.
Why ? Can i slow down scrolling speed in ListBox somehow ?
Users can get really confused when they are to see these black holes in the screen.
Update: Reproduces on device(HTC HD7 7.10.7740). I use databinding via ItemSource
Repro project: https://www.dropbox.com/s/lgcod878srnctp0/SLTK_LLS_TEST.zip
Repro video(!): https://www.dropbox.com/s/t25dguq0vaa88o9/WP_20111213_113729Z.mp4
The ListBox has "virtualization" enabled by default (exactly: sort of UI container virtualization), it's not loading the complete list, just fragments. When scrolling, it has to render the items first, and when you scroll quickly, you are noticing this rendering delay. It's achieved by the VirtualizingStackPanel. The advantage is, it saves Memory.
You can disable the virtualization when using a custom ItemsPanel:
<ListBox x:Name="YourListbox">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
...but the solution will take up more resources from the beginning. Might become dangerous with long lists.
The other way round, you can enable virtualization on your ItemsControl, for a testing purpose, you should be able to achieve the rendering delay ("black holes").
How long are your strings? Is it something you can easily and sensibly split into a very brief summary (8 - 10 characters)? If so you might want to take a look at the LazyListBox which tries to address the issue (it was intended for more complex layouts than you are talking about, though, so the benefits may be negligible)
Related
I created a simple application with nested ListBox and strings in it. If i scroll it really fast - there is empty spaces.Can i increase the rendering speed or
Can i slow down scrolling speed in ListBox somehow ?
Inorder to overcome the black occurrence on scrolling you need to virtualize your scroll control. For that you should inherit IList and create a Collection of your own similar to ObservableCollection in which you will have to override the default indexer depending on your caching requirement and simultaneously maintain a cache for your items. I feel this might be what you are looking for: http://blogs.msdn.com/b/ptorr/archive/2010/08/16/virtualizing-data-in-windows-phone-7-silverlight-applications.aspx
There is a sample project on that page. Try that out.
I also feel that you are facing this problem http://blog.rsuter.com/?p=258. I guess this will be solved using virtualization itself. Hope it helps
The blog Milan posted is a good source to start with. Virtualizing data works by changing the item template of the list item while scrolling. This will not work up to the expectations when there is a complex layout.
But I suggest you work more on the layout you are working on. Having too many stack panels in order to make the layout a bit generic will destroy the performance.
I have items which can have very different sizes. They can contain picture, or two.
I used ListBox inside ScrollViewer, scrolling was wery fast, but initialization was taking time.
I tried to use just ListBox or LongListSelector, I can't say it works: scrolling is very jumpy, some lags.
What can I use for this items to achieve fast enough initialization and smooth scrolling?
Inorder to overcome the black occurrence on scrolling you need to virtualize your scroll control. For that you should inherit IList and create a Collection of your own similar to ObservableCollection in which you will have to override the default indexer depending on your caching requirement and simultaneously maintain a cache for your items. I feel this might be what you are looking for: http://blogs.msdn.com/b/ptorr/archive/2010/08/16/virtualizing-data-in-windows-phone-7-silverlight-applications.aspx
There is a sample project on that page. Try that out.
I also feel that you are facing this problem http://blog.rsuter.com/?p=258. I guess this will be solved using virtualization itself. For initialization, use lazy loading. Hope it helps
Silly question, but how do you scroll down in the wp7 design pane for visual studio ?
I have a lot of StackPanel elements in the page and the design pane only shows the first ones who fit the wp screen. i can't find a way to scroll down to the other elemets.
in the capture attached, you can see that after "Units in stock" it doesn't show anything else although i have more elements after.
Have you tried increasing the design height in the statement which somewhat looks like this? You may find it on the top of your XAML page.
<phone:PhoneApplicationPage mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="1500" />
Unless I'm not understanding the question, just put your StackPanel inside a ScrollViewer. That's what I've done in my apps.
I have a registration form on my layout grid, made out of a stackPanel. Textboxes are taking most of the screen (800px) along with a button. When user is positioned in one of the text boxes, keyboard covers almost half the screen and in order to access boxes below, they first have to click somewhere blank to remove the keyboard and then click another box. It isn't possible to scroll down.
I want to enable same behaviour like when editing name in contacts, but didn't manage yet. How to achieve this?
Try wrapping it into a ListBox or a ScrollViewer (probably easier), like so:
<ScrollViewer>
...
</ScrollViewer>
Also, check to make sure you don't have the same problem described here.
I'm not a WP7 developer but here's what I do in Android and iOS and you may get a hint of what to do.
I wrap my forms in a Scrollable View. This gives easy scrollable features to users without the need of anything else.
I have tried adding a progressbar to my Windows Phone 7 application, but it doesn't show in the emulator. Am I doing something wrong? Can you give me an example of how to implement the progressbar?
I actually put the progress bar on a grid with a Panorama control. It seems that the Panorama control sits on top of the progress bar unless you set its visibility to collapsed. Once I set the Panorama control's visibility to collapsed, I could see the progress bar.
Thanks for all your help, though.
With IsIndeterminate = false, you simply write code to update ProgressBar.Value to reflect how far through your processing your are.
This assumes you can quantify your progress of whatever processing you are doing in terms of a percentage.
For cases where you can't quantify this, say for example downloading content of unknown size, you can set IsIndeterminate = true.
Early on it was recognised the storyboards used to implement the IsIndeterminate = true ProgressBar animation were very costly and had not been implemented on the render thread.
In response Jeff Wilcox posted this solution.
Jeff Wilcox – A high performance ProgressBar for Windows Phone
And this update, which Matt has referred you to.
Jeff Wilcox – Windows Phone performance progress bar update: part 2, remember to turn IsIndeterminate off when not needed!
Do not use the progres bar which ships with the SDK.
Use this instead.
You use it like this (from the above linked page):
<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center"
IsIndeterminate="{Binding IsProgressBarVisible}"
Style="{StaticResource PerformanceProgressBar}"
Visibility="{Binding IsProgressBarVisible, Converter={StaticResource VisibilityConverter}}" />
You either need to set a value on it, or set IsIndeterminate=true, or it doesn't show/do anything.
You can set the Canvas.ZIndex property to put in front of the panorama controls.
E.g.
<ProgressBar x:Name="ProgressBar"
Canvas.ZIndex="100"
Width="400" Height="30"
IsIndeterminate="True"/>