Expression blend (1)-ListBox big transformation

Recently, many friends in the garden wrote excellent and practical articles about blend. On behalf of Silverlight fans, I would like to thank them for their selfless sharing. I will share some things today and hope it will be useful to everyone.

Just like the title of the article, this time we will use ListBox for tossing, then will your mind show what ListBox looks like? Finally, The ListBox is changed to the following:

Are you familiar with it? I have seen it in JS, and I have seen it in flash? No, right? Is it changed to ListBox? Don't be fooled by your eyes. Believe me, it is actually ListBox. At least, you will trust me after reading this article. In fact, all of these benefits from the powerful template Technology of Silverlight, but this is still not enough. Without blend, it will become so unrealistic that you face a lot of XAML code, I believe you will feel dizzy without looking at 50 lines. Let's thank blend for making everything so simple (the interface design mentioned here, if you want to use it for business logic, then ......). Next, Let's rebuild the ListBox step by step. You don't need to write a line of code to make it look like the above:

First, open blend to create a Silverlight Project

Next, open the data source option to create a sample data

Select image data and specify the File Source

Drag property1 to layoutroot.
In this way, we can see the following:

Create a copy template for ListBox

After confirmation, we modify the grid attribute under the template to set the vertical scroll bar to invalid, and the horizontal setting is valid.

Next, we will continue to select scrollviewer to edit the template-edit the copy

After creation, you can see the following interface:

Here, we delete verticalscrollbar because we don't need it. Then we continue to edit the verticalscrollbar template.

After confirmation, it will be the following structure:

Delete unnecessary items. Here we delete all rectangle, horizontallargedecrease, horizontallargeincrease, and horizontalthumb items under verticalroot and horizontalroot.

Then, edit the horizontalsmalldecrease template.

Delete all the items in the selected item, leaving only the path. We enter the item layer by layer. It seems that we have removed a piece of clothing and are already in the underwear area, this path is actually the triangle button for adding and decreasing the ListBox scroll bar. However, it seems to be a little small at present. It doesn't matter. We modify its attributes to make it bigger.

In this way, we can see it:

Make the same changes to horizontalsmallincrease (omitted here)

Then exit the template editing to go to the initial interface and edit the layout template of ListBox:

Set the position of stackpanel to vertical

Adjust the ListBox size. Then, you will see the following results:

The two arrows seem to be in a wrong position. It doesn't matter. We open the horizontalscrollbar template and set the margin attributes of horizontalsmalldecrease and horizontalsmallincrease to the appropriate position:

The specific value is adjusted based on your own size. When you run the project, you can see the effect, but there is still a bit wrong, that is, there is a blank section under the image in ListBox, this is because there is a horizontalscrollbar, find a way to hide it, but it cannot be deleted. If it is deleted, the triangle arrow will disappear because it is part of the scrollbar attribute. Here, set the top of the margin attribute of horizontalscrollbar to a negative number to move it up, so that it is hidden.

There are more details, so we will not repeat them again. We can set various status responses for the arrow, such as moving the mouse up to color changes and other animation effects. I finally finished writing it. If you read it for the first time, it may be complicated and involves many steps. However, when you are skilled, you will find it easy, of course, you may prefer to use Coding hard encoding to achieve this effect, which is also good. Here is just a way of thinking, and you do not have to do this. :)