Silverlight3 :( itemcontrol) UI Virtualization

What is itemcontrol?

It refers to a set of items, such as DataGrid, ListBox, tabcontrol, and Treeview.

What is UI virtualization?

At first, we saw this concept inBea stollnitzBut if a control supports UI Virtualization (virtualization ),

Then it will only create the UI elements that need to be displayed in the actual visible part of the screen. This may not be quite clear. Suppose I have a ListBox with a scroll bar and there are 10000 data records bound to The ListBox,

The height of ListBox can only display 100 pieces of data. Because ListBox supports UI Virtualization in silverlight3, ListBox actually only creates 100 pieces of listitem,

Instead of the 10000 actually boundIf you disable the UI virtualization function of ListBox, ListBox will create 10000 listitems or 100000 or more. What is the performance? Therefore,

To some extent, UI virtualization can solve the performance of big data sets,

Of course, it is not enough to completely solve the performance problem of binding itemcontrols to a big data set by relying solely on UI virtualization, because another technology (Data virtualization) needs to be used ).

 

1. How does itemcontrol implement UI virtualization? 

WPF has long supported UI virtualization. However, in Silverlight, itemcontrols does not support UI virtualization until 3. All itemcontrols in silverlight3 are

Virtualization is achieved through virtualizingstackpanel. By default, virtualizingstackpanel creates an itemcontainer for each visible item and does not

This container is discarded when necessary (for example, when an item is rolled out of the view. When itemscontrol contains multiple items, the process of creating and discarding the items container may have a negative impact on the performance. If

Virtualizationmode is set to reconfiguring. virtualizingstackpanel will reuse the item container instead of creating a new item container each time. If you set virtualizingstackpanel

When the configuralizationmode of is set to standerd, The virtualizingstackpanel will not be able to recycle the item container. It will use the standard virtualization mode, that is, creating and discarding the item container for each item.

For details, see the introduction of msdn.Irtualizingstackpanel,Virtualizationmode.

Let's take ListBox as an example. Suppose I have a ListBox with a scroll bar and bind it to ListBox.

There are 10000 pieces of data, while the height of ListBox can only display 100 pieces of data. ListBox will use the virtualizingstackpanel as their item container.

The actual data is 1-. If ListBox is set in this way, <ListBox implements alizingstackpanel. configuralizationmode = "reconfiguring "... />, When I drag the scroll bar,

To display the 100-data, ListBox does not recycle the first-items container previously created, and then re-creates the first items container to display the-items of data, but reuse the data.

The project container that has been created, that is, the project container created for the first 1-pieces of data. However "... />

In this way, the virtualizingstackpanel is like a normal panel. When you need to scroll to display other data, the items container will not be reused. All itemcontrol in silverlight3

The default value of virtualizingstackpanel. virtualizationmode is reconfiguring. UI virtualization is disabled unless the specified virtualizationmode is standerd explicitly.

 

2. What is the problem if itemcontrol implements UI virtualization?

Since I asked this question, the answer is absolutely yes. I didn't fully understand it until Friday because of UI virtualization. I saw some people raise such questions in siverlight forum.

DataGrid: scrollbar size not changing correctly when data added to the gridOf course, this is only one of the problems. In my Silverlight project, there are two scenarios where the problem occurs:

A. After adding new data to a ListBox with a scroll bar, the newly added data is sometimes invisible to the screen. In fact, the data has been successfully added,

Similar situationDataGrid: scrollbar size not changing correctly when data added to the gridThe methods mentioned by some friends in this post,

For example, the updatelayout () method of itemcontrol is called after the storage is successful. However, after a long period of test,

I found that this phenomenon only occurs when the data in the ListBox exceeds the height of The ListBox (you need to drag the scrollbar to view all the data. The same is true for deleting data in ListBox,

The database does not exist, but the interface still exists. I used an extreme solution to solve the problem. After successfully deleting the data, I found the deleted object and deleted its corresponding listitem, instead of re-binding the data to ListBox.

B. this problem is even more troublesome for me. I still need to post two images. This is a picture of the object attributes in my project. The attributes include five types, text, numbers, dates, and single-choice items, if you select multiple attributes, different editing methods must be displayed based on different attribute types.

The text and buttons in Figure 1 overlap. The original button and checkbox should be hidden. The saved button appears only when the property value is edited, figure 2 shows a normal image,

Of course, the normal operation in Figure 2 is limited to not dragging the scroll bar. After dragging the scroll bar, the content in Figure 2 is the effect of figure 1. as for Figure 3, since its attribute type is simple text, there is no problem with the date and number dragging.

Although I am working on this project by myself, I have discussed the cause with other colleagues and thought that the problem should be in the high computing of multiple options (ListBox, the option values of multiple options are uncertain,

In addition to errors in the ListBox height calculation, the UI elements are deduplicated. The solution is to manually calculate the ListBox height, my colleagues' conclusions can hardly explain this problem.

Figure 1 Figure 2

Figure 3

 

However, when I really understand the UI Virtualization of ListBox, it seems that the above two problems have been solved. When I try to explicitly virtualize the ListBox shown in the outermost layer in Figure 1.

Virtualizationmode = "standerd", no matter if I drag the scroll bar, the image in Figure 1 will not appear. Why is this problem?

 

My explanation is:

1. For question A, it is becauseNot every time the newly added data is displayed at the front end of the List (business needs), when the scroll bar appears, the newly added data will not appear within the visible range of The ListBox,

Because of UI virtualization, ListBox does not create an item container for display for the data. Why do you think it is sometimes visible immediately? I think it is probably because of the position of the scroll bar,

However, disabling the virtualization function of ListBox solves the problem.

2. For Problem B, when ListBox virtualization is enabled, if all attributes are simple text, numbers, and date types,

The height of the items container is one unit (one row). Therefore, when you drag the scroll bar, the height of the items container is still one unit regardless of the attribute type and content, naturally, there will be no overlap,

However, when the attribute type is multi-choice or multiple options, the number of multiple options for each attribute is different, resulting in high inconsistency of the item container. If you drag the scroll bar and reuse the item container,

No matter whether the current number of multi-option options is excessive or less than the previous one, the height of the item container is inconsistent with the actual display height of the current multi-option, that is, overlapping occurs. So the solution is

Disable the virtualization function of ListBox so that it recycles the previous item container and creates a new item container after each rolling operation. Of course, this will result in a loss of write performance. Therefore, you also need to use data virtualization alization, I will not talk about it here.

Finally, I would like to ask a question here, which is also a headache for me: Upload large files in Silverlight (of course, using WCF Service). During the upload process, I will use K as a part of the file,

The service is continuously called until the file transfer is complete. Of course, the transaction is used in this process, and now it can be used normally, however, one problem is that if I force close the IE window (that is, force cancel upload)

In this way, the entire WCF Service will not be accessible unless the service is restarted. I guess the cause may be a transaction. Due to forced cancellation, the transaction is neither completed nor rolled back, in a pending state,

However, I wonder why I cannot access the service, but I don't know how to solve this problem. I hope someone can give me a prompt. Thank you!