[Comprehensive unblocking! Practical Expression blend development skills: Chapter 4 starting from the most common buttonstyle-pathbutton

In the previous article, we introduced textbutton, but in order to pursue the tension and fashion of the interface, it is not enough to only use the system font. In the media field, the fonts in business cards, newspapers, magazines, and advertisements are very exquisite. The same is true for our system interface. For some cool flash English websites, more than 20 fonts are often used to achieve the best results.

I personally like, but I cannot ensure that every client is installed with. In blend, you can easily embed a font package for users to download. However, the Chinese font is too big, and it takes more than 20 mb for a. Fortunately, Microsoft provides vector graphics so that Chinese developers can use some special fonts without downloading the font, but this also brings a lot of trouble, in many cases, you can only find a quick and effective way of working by yourself, and you cannot find a solution on a foreign website. It may take me a few weeks to solve some problems. Then, we gradually improved it in N months of practice. In the process of Silverlight front-end development, more is the accumulation of many fragmented knowledge points and experiences. Maybe every point is shared, and readers will think this is too easy, but as I wrote in my signature, "Once all really outstanding designs are well designed, they seem so simple and obvious. However, in the process of building an outstanding design, you need to make incredible efforts. "Before learning knowledge, you must first respect the knowledge and then the knowledge will respect you. In this chapter, I will take the textbuttonstyle in the previous chapter as the basis to share with you how to convert the text in special fonts to vector graphics, and how to solve the difficulties encountered when using vector graphics for button.

If you have read the previous chapter and follow me step by step. Then you should get a button using textbuttonstyle, as shown in

Below isCode

<ButtonContent= "I'm textbuton"Horizontalalignment= "Left"Margin=" Style="{Staticresource textbuttonstyle}"Verticalalignment= "TOP"/>
 

You may have noticed that I used a special font named 28 Days Later here. Since we intend not to rely on this font, the first step is to normalize I'm textbutton.

Add a textblock and set the font to 28 Days Later (you can specify other fonts, such as ). Right-click textblock and choose path> convert to path from the pop-up menu.

In this way, we can get a vector image.

On the left side of the blend, in the objects and timeline window, drag the path to the button. If you have succeeded, the interface structure should be shown in

Click F5 to runProgramIn this case, you will encounter the first problem.

Note: in the previous chapter, we set the cursor of contentcontrol to hand in textbuttonstyle. So when we move the cursor over the text, the cursor changes to the shape of "finger, but when you move a button, you will find a disgusting thing. Why does the cursor keep switching back and forth in "Arrow" and "hand? This experience is obviously poor. Then, you move the mouse slowly on the button and finally figured out that it turns into "finger" only when the cursor stays in the black part. All the white parts, it contains the white part in the middle of the letter "O", and the cursor is still "Arrow )". To solve this problem, we must first understand several concepts. In Silverlight, all interface elements have three states.

The first type is "exist and visible", that is, opactiy = 1, visibility = visible;

The second type is "nonexistent and invisible": opactiy = 1, visibility = collapsed (when collapsed, the visual tree of the control will not be loaded or consume resources );

The third type is "exist and invisible", that is, opactiy = 0, visibility = visible;

In addition to these three types, I want to tell you the fourth mysterious one. Many people do not know it, but it is really useful;

The fourth type is "exist, but invisible": opactiy = 1, visibility = visible, background = "#00 ?????? "(The focus is on the first two 00, and the question mark below represents 0 ~ 255 arbitrary values );

To solve the problem above, you must use the fourth state. Right-click the button and select Edit template> edit current from the shortcut menu to enter the style editing status.

Set the grid cursor = hand of the contentcontrol package, and setGrid randomly specifies a background color., Click F5 to run the program, move the mouse over the button, and you will find that the cursor has finally stabilized, completely changed to the hand state. But the only pity is that the red background is not what we want.

But it doesn't matter. You only need to set the Alpha value of the button's backgroun to 0, which can solve this problem perfectly.

Run the program again, and a perfect button with a cool font appears in front of you.

But for a program, this is not over yet. From the perspective of naming, the current style name textbuttonstyle seems a bit inappropriate. It is best to change it to pathbuttonstyle. Click the resource panel, expand the usercontrol node, and double-click the textbuttonstyle area to modify the name.

here, I will introduce a special imagebuttonstyle in the next lecture. I promise you will encounter this design, and it will be a headache. I will share with you the most perfect solution, so stay tuned!