[Comprehensive unblocking! Practical Expression blend development skills: Chapter 6 understanding ListBox

After re-consideration, we are ready to take the entry point of this chapter into consideration. I used a seemingly awkward title "know ListBox". Many people don't like it here. Even students who use winform in college will say that ListBox has been around for several years. However, in actual project development, apart from the button, ListBox is the most frequently used interface element.ListBoxBut you may not know the following special listboxes or how to quickly construct such a special ListBox. This involves the usage of blend's unique and important element,Sampledatasource! Are you interested? Good. Please refer.

Many of my projects use the expressions in figures 2 and 3. For example, the layout in Figure 3 is used:

A very famous company in China has a siverlight product, which also uses the layout effect. During a communication, I showed my demo to their developers. Then he asked me, "What controls are used for your layout?Stackpanel?Wrappanel?Grid? ", He was surprised when I told him it was ListBox. He told me that in their products, the grid is used to achieve this effect. The code is used to dynamically generate grid rows and columns and add elements one by one. Because the grid does not have its own scroll bar, so they also need to use code to control the scroll bar. So much trouble can be achieved. I was speechless and admired for their patience. In fact, it takes only 30 seconds to achieve the above effect. Turn on blend and work with me.

Open the data panel, click the create a sample data button, and select the first item in the pop-up menu,New sample data....

Click OK in the pop-up menu.

Then blend automatically generatesSampledatasource, Followed byCollectionThe set contains two properties: property1 and property2. Click the rightmost button of property1. In the pop-up box, select the typeImage. As shown in:

Click the Browse... button in to browsePrepare the image folder in advance. Click OK. In my computer, the path is "E: \ image folder"

Next, directly set property1DragOn the canvas, blend automatically generates a ListBox. Fill in ListBox with the image content you just browsed.

In this way, we get a default style ListBox, which is arranged from top to bottom like our common ListBox. Next, right-click ListBox and select edit additional templates-> edit layout of items->Create empty.

In the displayed dialog box, name your template and click OK.

Then you will find that the objects and timeline panels are automatically switched to the template editing mode. For example:

In the Property panel on the right, findOrientationAttribute, we can see that the default value of this attribute is vertical, that is, top-down arrangement, please change itHorizontal.

On the objects and Timeline panel, click the leftmost button to return to the editing mode of the main interface.

In this horizontal direction, The ListBox arranged from left to right is created.

Next we will implement another effect in Figure 3, which can automatically wrap the ListBox. Right-click ListBox and select edit additional templates-> edit layout of items->Edit current

Replace stackpanelWrappanel.(Replace: delete stackpanel first, click the button on the toolbar, enter wrappanel in the search box, and wait about 1 minute until blend searches wrappanel. If you still cannot find wrappanel following the steps above, check whether Microsoft Silverlight 4 toolkit unzip l 2010 is installed on your computer)

On the objects and Timeline panel, click the leftmost button to return to the editing mode of the main interface.

The following figure shows the effect. If you do this, you may have questions. Why does the ListBox effect remain unchanged?

Don't worry, this is because the wrappanle feature isWhen the width of wrappanle is insufficient for all sub-items, other items will be arranged in a line break.. Therefore, we need to disable the horizontal scroll bar of The ListBox so that the wrappanle inside it has no extended space. Click ListBox, and find the horizontalscrollbarvislbility attribute in the right attribute panel and set it to disabled.

In this way, The ListBox effect in Figure 3 is realized.

The story behind

Some may ask, assuming that there are 10 thousand images in The ListBox, loading together consumes a lot of resources? You may think that if you can drag down with the scroll bar, the content will be gradually loaded and displayed.

In fact, Microsoft has considered and integrated this feature by default for us. In WPF, collection controls such as virtualizingstackpanel have their own namesVirtualizes. See

This is a ListBox with 10 items. But his height is only enough to show four items, 5 ~ 10 (translucent) users cannot see it. We can now find that no matter how many sub-items there are in ListBox, you can see only four items at the same time. In WPF, virtualizingstackpanel no matter how many sub-items there are, only the four items that the user sees actually consume resources. When the scroll bar slides down, it dynamically loads and visualizes the subsequent resources, and automatically releases the items that are removed from the user's field of view. As the younger brother of WPF, Silverlight is also integrated by default.VirtualizesFeatures.

See http://msdn.microsoft.com/en-us/library/bb613565.aspx for detailsUser Interface Virtualization

Nagging

after Chapter 5 is published, I was surprised to find that my Article was reprinted by many websites, and yinguang China put it on the headlines of the homepage. I'm flattered and don't know whether to thank CCTV or MTV. I have been busy recently, and the time is full. I wanted to wait for this time and continue writing, but when I saw the comments from everyone, I thought that there were so many people waiting to see the following, and my heart was the same as scratching the liver. This article focuses on three points: "The most commonly used, the most practical, and the fastest", so it is more difficult to talk about what to say than how to do it. I hope you can help me think about the subject. You can leave a message or email to me here. Thank you!