I am new the WP7.1. I am developing chat app, in that there is screen like friends, in that screen it like 1000s of friends are there, We are binding to longlistselector the using sqlite.
Main problem is like, we have one API for calling friend's update like (displayname, profile picture etc) and I am processing the API data and binding the data to longlistselector, at the time of binding, I am not able to scroll the longlistselecor and any other buttons in the screen.
I am binding the data using Deployment.Current.Dispatcher.BeginInvoke(() => { Binding to }); and Dispatcher.BeginInvoke(() => { Binding to }) and BackgroundWorker (I tried those many ways).
Please suggest any solutions binding the without disturbing UI.
Thanks in advance.
-- Chandra
Whenever you push data on the screen (be it through XAML {Binding} or through directly accessing the page's UI elements) it needs to be done on the UI thread. While the UI thread is busy with processing your code or with redrawing the UI because of your code, the UI freezes.
This means that you need to make everything inside BeginInvoke() as short and efficient as possible. However you also need to make as few calls to BeginInvoke() as possible. Finding the balance between these will determine the experienced speed of your UI.
In the case of LongListSelector I found that it's efficient to add 50 items at a time, wait half a second and add the next 50 items. Your mileage may vary.
Related
I am trying to do the standard - bind a list of data (including images) received from REST API calls in a very quick and smooth manner - a paradox in itself. I have 2 service calls that each take about 2 seconds to complete so I can async/await those, but based on the data returned, I then build other lists (observableCollection) in memory and bind them back to ListBox's in the page.
Problems:
This actual binding seems to lock up the UI thread, how can I asynchronously load my page - listBox by listBox (or even item by item) in a lazy fashion? I'd like to put a placeholder image in place and when finally bound, the placeholder is replaced by the bound image. Any ideas? Frameworks? Tools?
When binding the actual images, the other data in my DataTemplate, actually jumps around the screen while the Image is rendered. It looks terrible... I'd like to be able to, at the very least, bind the image first and then the other controls in the dataTemplate after? Anything that would make it appear a bit smoother would help.
Thanks in advance.
I suspect your problem in (2) will be solved with the placeholder image (assuming that it is the same size as the downloaded images).
I suspect that your "lock up" problem in (1) is that you are calling Wait or Result on a Task returned by an async method. In many cases, this results in a deadlock, as I explain in a recent MSDN article and on my blog.
I think what you really want is a way to start a Task and get a data-binding notification when it completes. I've developed a set of types (TaskCompletionNotifier) that helps out in this situation. Check out the end of my blog post on async properties for a sample. You may also be interested in my blog post on async constructors.
(1) If the list of items is large, binding them all at once will cause some stalling on the UI thread. One fix is to add the items a few at a time and pause so that the UI thread can get a new frame to the compositor before continuing.
public async void AddObjects(List<object> objects)
{
for(int i = 0; i < objects.Count; i++)
{
_myObservableCollection.Add(objects[i]);
if(i % 10 == 0) await Task.Delay(100);
}
}
(2) You should set a fixed width and height on the images in the DataTemplate, so that it does not change as the image is actually downloaded. Alternately, if you can fetch the width and height from your service in the API calls, bind the image width/height to those values before it gets downloaded.
I try to migrate my iphone app to wp7.
On ios, UITableview is well designed, and very easy to code.
I have the some book about wp7, but there are no detail concerned about moving and removing of a row of listbox.
Welcome any comment
I'd like to think that Windows Phone is also well designed. :)
To simply remove an item from a ListBox in your codebehind, you need to get a reference to the ListItem that you want to remove. For example, to remove the currently selected item:
var myListItem = myListBox.SelectedItem;
Then you can remove it with:
myListBox.Items.Remove(myListItem);
In order to address your question about moving items, we'd need to know more about how you're populating the ListBox. Are you using databinding, or adding items with myListBox.Items.Add(myListItem)?
If I needed to move items between two lists, I would create a public List<MyItem> property for each list and databind each list to its own ListBox. Then I might do something like this (working from memory here):
var itemToMove = myList1.Remove(myListBox1.SelectedItem);
myList2.Add(itemToMove);
myListBox1.DataBind();
myListBox2.DataBind();
There's a much better way to do this, using INotifiyPropertyChanged, but I suspect you need to play around with the basics for a while to get comfortable in C#.
Bonus tip: Windows Phone is very similar to Silverlight, and you can usually find more information if you search for Silverlight examples.
In WP7, usually we set the ItemSource of listbox, when our source changes its changes automatically propagate to the UI due to data binding ( it is known as one way binding ; source to UI ).
so what ever you do ( add, update or delete) in itemsource, it reflects to UI.
databinding in wp7
I'm trying to determine some testing strategies for a Silverlight application of ours.
What I'd like to determine is the total time it takes for a grid to load and show data in the client. I've tried to put a timer round assigning the itemsource, but I need to know how long it takes the browser is finish loading the data into the grid.
Is this at all possible? If so, in what direction do I've to search?
This might help an article on MSDN "Loaded event timing in Silverlight"
http://blogs.msdn.com/b/silverlight_sdk/archive/2008/10/24/loaded-event-timing-in-silverlight.aspx
I think the main idea is to make use of the LayoutUpdated event. Since the event hangs off the FrameworkElement object I guess you could add a handler to all controls and effectively profiler all the framework elements of your Silverlight app. Something similar to the MVC Mini Profiler (SO uses/created this). http://code.google.com/p/mvc-mini-profiler/
I would certainly explore the LayoutUpdated event further.
I'm finding a common pattern during my WP7 development.
Something takes a long time to display and I want to break down the display into 2 parts - an initial display so I can show a Loading message and start the progress bar then a secondary display where I can load the data.
At the moment I'm trying to do this in a custom control but it could equally apply to user control or a page.
I can't find a way of doing this. Way back in WinForm days there were events I could call before the form was shown and others for after. I guess I'm looking for something similar.
I have also tried to see if I can display a stack panel first with the Loading message then capture an event on that to fire the data loading but nothing so far.
Any ideas?
I'm using Caliburn Micro BTW.
You can use the page's Loaded event or an OnNavigatedTo override to show the Loading message, and then you can use the BackgroundWorker class to run your long-running process on a background thread so that the UI thread remains responsive, and then in the handler for the RunWorkerCompletedEvent handler, which is marshalled onto the UI thread for you, you can hide the loading message and perform your second stage display.
Usually, when a View requires a lot of bindings, or some UI Elements like a Bing Map, it takes a "while" to load (like between half a second and a second).
I don't want a delay between a "tap" action (like tapping an element on a ListBox) and the navigation action (displaying a new page).
I don't mind displaying the page progressively. For example, for a Bing Map, I don't mind displaying a black page with only a title, and a second later, having the Map appear.
What are the best practices ? It could post a sample if i'm not clear enough
edit: I'll keep the question open for a while, so other can answer. Thanks Matt and Mick for awesome answers. I'm already working on some improvements. The major one being binding my controls after the page loaded.
It's expected on resource constrained devices that non trivial actions will take at least a little time to execute.
The most commonly recommended best practice for dealing with this is to use animations to give the user the impression of perceived performance. This has been a recurring recommendation throughout the CTP and Beta phases by the product team and in presentations at Mix 10 and Tech Ed 2010.
Page transitions are a common approach to this.
Discussed here by Kevin Marshall, prior to inclusion in the November toolkit.
WP7 – Page Transitions Sample
And here, referencing the control in the toolkit.
Transitions for Windows Phone 7
There are also a number of very basic optimisations you can do that will give you some bang for a little effort.
don't name controls that you don't reference in code
use background worker to load any data to avoid impact the UI thread (already busy loading your page) and fire this off after the page is loaded (disable any controls not usable in leui of this) (Phạm Tiểu Giao - Threads in WP7)
use httpwebrequest over webclient for the same reason (WebClient, HttpWebRequest and the UI Thread on Windows Phone 7)
I would also reiterate Matt's suggestion for not loading controls that aren't used initially.
If you decide to go the extra mile, there is more you can do to optimise page loading. These two posts are worth absorbing in that regard.
Creating High Performing Silverlight Applications for Windows Phone
WP7 Development Tips Part 1 - Kevin Marshall's Epic Work Blog for Awesome People
If using Listboxes, also familiarise with Oren Nachman and David Anson's
WP7 Silverlight Perf Demo 1: VirtualizingStackPanel vs. StackPanel as a ListBox ItemsPanel
Keep a low profile LowProfileImageLoader helps the Windows Phone 7 UI thread stay responsive by loading images in the background
Never do today what you can put off till tomorrow DeferredLoadListBox (and StackPanel) help Windows Phone 7 lists scroll smoothly and consistently
and be sure image sizes are optimised for their display size.
My suggestions/recommendations:
Create and navigate to the new page as quickly as possible.
Display the page with placeholder content while it loads (if appropriate).
Give an indication that something is happening while the page loads. An indeterminate progress bar (use this one) is the convention on the platform.
If it's not possible to use the page until all controls are loaded, then prevent access to the page. A semi-transparent object displayed over the entire page is a common technique to not only prevent touching of controls but also to indicate that they can't yet be touched.
If possible/practical set the size of the items in xaml/code to prevent relayout due to resizing once an item is loaded.
Try delay loading of items which aren't on the screen initially to get the perceived total load time down.
and finally:
Optimize everything to get the load time down and the application as responsive as possible.