[Comprehensive unblocking! Practical Expression blend development skills: Chapter 5 starts from the most commonly used buttonstyle-imagebutton

This chapter focuses on imagebutton. Why is it imagebutton? The image itself is one of the best ways to express beauty. Since ancient times, it has been described as beautiful as a painting. In actual projects, imagebutton has a very high incidence and will certainly be higher in the future. Do not believe, please see :( the program source code http://www.kaodigua.net/download/Lession5.rar)

　　　　

　　　　

These two software are believed to be familiar to everyone. One is PPLIVE, and the other is the most popular iPhone. imagebutton is a typical application of these two software. In addition to images, we noticed that imagebutton is also equipped with descriptive text. If you encounter a similar requirement, you may immediately realize that the logic tree of the button has only one content attribute, either put the image in it or enter the text. What if both of them are required? Let me list the possible implementation methods. Of course, they are all negative teaching materials, which are inefficient, inflexible, or costly. (If, unfortunately, you have been mentioned and used the following methods, forgive me. I will use the best solution as compensation)

　　Not recommended practices:

1) make the image and text into an image! They are not afraid of hard work.

2) My button is a simple textbutton, and the image is actually part of the layoutroot background, so they can look like they can be together. However, I have to write down the resolution of the entire program. Otherwise, when the resolution is changed, I have to calculate the relative position.

3) I used grid to wrap both image and textblock and use it as the content of the button. However, if you want to make motion animations for images, and the text to change the color of the animation, it is not easy to do.

4) on the first floor, I am the artist who is not afraid of hard work. I am not afraid of trouble. I have created an exclusive style for each button, style1, style2, style3 ..... I am not afraid of more buttons, but you should at least tell me how many buttons are required.

5) I am a programmer. I will customize a class, inherit from the button, define my own dependency attributes, name it imageurl, and then put an image in the style of the button, bind the source of the image to the imageurl. Since source is an address string, I also need to write code to read the image based on the relative or absolute address. Of course, in this way, I want to customize a class for every project that uses imagebutton. In order to be reusable and minimize redundancy, I encapsulate it as a class library and keep it for future reuse, but when I reference my library in the first project, I find that the image in the address cannot be found in my imageurl attribute? This damn Microsoft is easy to use in a program, and cross-DLL is not easy to use. I want to scold Microsoft, and I want to send a post to solve it .....

6) I am more nervous than the programmer on the 5th. I turn the imagecontent into textcontent and pass the text. The dll will not go wrong even if it is transferred for 100 times.

　　

The above six methods all have obvious disadvantages, such as inflexible, redundant code, redundant classes, complex development methods, high maintenance costs, and slow development speed. However, the best practice must be a combination of multiple advantages, which are flexible, and the image text can be separated for different animation. Easy to use. Fast. It can be done within 1 minute. The lowest maintenance cost. Of course it may not be perfect, but it is enough in most cases. Another point is that the best practice is often very easy to understand. If you don't believe it, you will also say, "Ah, that's the case. ". Okay. If you don't need a lawsuit, let's start with the best practices.

　　Best practices:

 First, add a textblock to layoutroot. Right-click textblock, select make into control in the pop-up menu, name the style imagebuttonstyle, and then you can get the expected effect. (If you are a newbie and are confused about this step, you can find the graphic explanation of this step in chapter 3 of this series.) blend shows the automatically generated style element structure, A simple contentpresenter is wrapped in grid.

　　　　

Click the left-side icon, return scope to [usercontrol], and switch to usercontrol editing view.

　　　　　　

At this time, we need several images as the material. We can download some icons at will, create a folder named images in the project, copy the image, and select an image at will, drag it to the button and release the mouse to get the effect. The image is wrapped by a button.

　　　　

Right-click the button and choose edit template> edit current from the shortcut menu to switch to the style editing view.

　　　　

　　

The following are the key steps: Add a textblock to the grid of imagebuttonstyle,Find the text attribute of textblock in the right attribute panel and click the small square on the far right of the text attribute. Select templatebinding-> tag in the pop-up menu.

　　　　

　　

Click the "Return scope to [usercontrol]" icon on the left to switch to the usercontrol editing view.

　　　　

　　In the objects and Timeline panel, select the button, view the right property panel, find the tag property, and enter some text such as "wood firewall"

　　　　

Then you will find a miracle! Well, after a slight adjustment, add some animations you like. The following figure shows the effect.

　　　　

　　

The Code is as follows:

<Button style = "{staticresource imagebuttonstyle}" tag = "wood firewall" horizontalalignment = "Left" Height = "86" margin = "8, 8, 0, 0 "verticalalignment =" TOP "width =" 64 ">
<Image Height = "64" Source = "images/sytb_298.png" stretch = "fill" width = "64"/>
</Button>
<Button style = "{staticresource imagebuttonstyle}" tag = "color palette" width = "64" horizontalalignment = "Left" Height = "86" margin =, 0, 0 "verticalalignment =" TOP ">
<Image Height = "64" margin = "0" Source = "images/sytb_087.png" stretch = "fill" width = "64"/>
</Button>
<Button style = "{staticresource imagebuttonstyle}" tag = "Microphone" width = "64" horizontalalignment = "Left" Height = "86" margin = "136,8, 0, 0 "verticalalignment =" TOP ">
<Image Height = "64" Source = "images/sytb_099.png" stretch = "fill"/>
</Button>
<Button style = "{staticresource imagebuttonstyle}" tag = "my computer" width = "64" horizontalalignment = "Left" Height = "86" margin = ", 8, 0, 0 "verticalalignment =" TOP ">
<Image Height = "64" Source = "images/sytb_116.png" stretch = "fill"/>
</Button>
<Button style = "{staticresource imagebuttonstyle}" tag = "" Height = "86" margin = "264,8, 312,0" verticalignment = "TOP" width = "64">
<Image Height = "64" Source = "images/sytb_081.png" stretch = "fill"/>
</Button>

Congratulations, you have learned the best practices of imagebutton.

　　Principles behind

　　This method only utilizes the tag attribute of the button and looks at the help document. The tag is of the object type, and almost all controls have this tag attribute. Of course, the button is no exception. Silverlight and WPF both have built-in Simple Type converters designed for XAML. For example, if you enter an address character in the source attribute, you can see the image, which is the credit of the type converter. So when we input any text in the tag attribute, it will be converted by the converter reasonably. Although the Microsoft Silverlight development team does not recommend using the tag attribute like this, they did not tell me what to do with the tag. The N actual projects I 've experienced prove that this method is very convenient and has no side effects. Therefore, you can use it with confidence. In most cases, it is enough.

Work will be busy in a few days. Blog updates are slow. Please be patient. These articles are my sincere work. If you think my articles are practical and understandable, please help me to recommend them for more people to see. I hope you will continue to support me. I will share more practical experience with you later.