Windows Phone 7 ListBox list item fade loading animated learning notes

In the WP7 program, the performance problem is a problem we have to consider when the function of the program becomes more and more complex. In a chat list, if there are too many chat items and the project UI component is complex enough,

We have to do everything we can to get the UI loaded as quickly as possible. So there is a feasible solution, like QQ chat list, from top to bottom, list items loaded one by one (load the first item, then load the second item, then load the third item, give the user the UI response as soon as possible, nor wait until all the list items are displayed.

In our case, I also added a fade animation to each list item display, so that when the list item is sufficiently complex, it can also show a better display effect.

Basic principles of implementation:

The principle of implementation is not difficult, the main idea is:

1. The list item was originally just a simple custom ContentControl (Codewp7itemcontainer), waiting for the right time to reload his content (Codewp7listboxitem);

2. Using a management class Loadservice, control the loading of the UI list items, when an item is loaded, then the second item is loaded, then the third item is loaded .....

3. Add fade animations to the display of each actual list item.

Let's start by looking at our implementation:

Listitemobject: Actual data for the list

public class Listitemobject {public string Title; public string Info;}

Loadservice implementation of queue control

Routedeventhandler itemloaded;
List<uiloadaction>loaditems = new list<uiloadaction> ();
Object loadarraylock = NewObject ();

When all UI load in the Uiload queue succeeds, the function is recalled
public event Routedeventhandler Loadedcomplete;

Public voidpushloadaction (Uiloadaction loadaction)
{

if (loadaction = = null)
Return
Lock (Loadarraylock)
{
Loaditems.add (loadaction);
}
if (Loaditems.count <= 1)
{
Poploadaction ();
}
}
private void Poploadaction ()
{
if (loaditems.count <= 0)
{
LOG.D (TAG, "loadedcomplete!");
if (Loadedcomplete!=null)
{
Loadedcomplete (Null,null);
}
Return
}

MEle.Dispatcher.BeginInvoke (() =
{
Lock (Loadarraylock)
{
Uiloadaction Action;
if (loaditems.count<= 0)
{
LOG.D (TAG, "Loadedcomplete inbegininvoke!");
if (loadedcomplete! = null)
{
Loadedcomplete (null, NULL);
}
Return
}
LOG.D (TAG, "loadaction Array Size:" +loaditems.count);
Action =loaditems[0];
Action (item_loaded);
LOG.D (TAG, "pop");
Loaditems.removeat (0);
}
});
}

void Item_loaded (Object Sender,routedeventargs e)
{
Poploadaction ();
}

Add fade animations for each item

Private Storyboard Getloadstoryboard ()
{
Storyboard ret;
Prepare for Scaleanimation
Double from = 0;
double to = 1;

TimeSpan TimeSpan =timespan.fromseconds (0.8);
Ieasingfunctioneasingfunction = new Exponentialease {easingmode = easingmode.easeinout};
ret = new Storyboard ();


doubleanimationanimationopacity = new DoubleAnimation {from = from, to = To, Duration =timespan, easingfunction = EASINGF Unction};
Storyboard.settarget (animationopacity, this);
Storyboard.settargetproperty (animationopacity,new PropertyPath (Uielement.opacityproperty));
Ret. Children.add (animationopacity);


return ret;
}

This is also my study in the it online education platform Wheat College When I do a note, here to tidy up, hoping to give a point.

Windows Phone 7 ListBox list item fade loading animated learning notes