Use the PSD file to style the Silverlight Program

 

Generally, when I develop an app, there are three processes: first, the development of network request related APIs and other basic class libraries, and second, the functional development of the app, add a style to the app.

This blog is about how to use the PSD file to add styles for the Silverlight app. (For Development of Silverlight, WPF, Windows Phone, and Windows 8 Metro, refer ).

First, the PSD file is a Photoshop file. After the designer designs the file on Photoshop, the generated file is the PSD file. What we usually get in JPG format can only be said as a by-product, for JPG files, you can only see the approximate effect of one app, but you cannot get other information in the app, such as font, color, font size, and spacing. The PSD file contains all the information. At this time, in addition to the related cut chart, the designer also made a separate annotation file, marking the font, color, font size, spacing and other information, so that developers can make styles.

Here, I would like to tell you that for apps developed using the Silverlight technology, the designer only needs to provide PSD files. What do you need to cut and mark all files, you need to know that nothing can better describe the app style than the PSD file. Here I only target apps related to Silverlight technology, because we are blessed with developing apps related to Silverlight technology, because we have blend. If you do not know what blend is, this is just like a designer does not know Photoshop. The reason why we mention blend is that blend has a very powerful function, which is generally ignored, that is, blend can convert the PSD file to XAML.CodeHere you should understand what I mean. When we develop an app, the interface is developed using XAML. Of course, we should not be so happy here. Although it can be converted to a XAML file, it is static. This is similar to the development of web pages. Web pages also have static and dynamic web pages.

Next I will show you one (note the parts circled by the Red Line ):

In contrast, if we make a style, according to the general method, the designer should first provide us with a cut chart (the red area in the figure), followed by marking the font, font color, font size, the spacing of each element. However, if we use blend to open this PSD file, we will find that the red part of the image does not need to be cut, because blend has automatically converted this part into a path, in addition, you will also find that text information (including font, color, and size) has become textblock. How convenient is it? You can directly copy the path part for use, text information can be extracted directly using blend. However, the spacing is not so easy to see. It is thought that blend uses canvas by default for element containers, so the spacing of elements is not as easy to read as that of text styles. We need to follow the canvas of the element. left or canvas. top.

Then let me talk about the additional advantages of this method. Taking the path converted from blend as an example, when we press the button, we either change the size or transparency, either change the color of the content, or there are three options, such as the "love" button in the figure above. When the user clicks it, the "love" border will change to red, if you use images, you need to provide two images to correspond to different buttons. However, after the blend conversion, the "love" has been converted to the path, we can easily implement this function by changing the fill attribute of path. This reduces the number of cropping andProgramThe volume of the package.

Here is a note that blend does not provide this conversion function for all projects. Currently, I have found that if the Windows Phone project is enabled with the conversion function, so no matter what projects you develop, you can use blend to create a Windows Phone project, load the PSD file with blend, and convert it to XAML. We only need the information in the XAML, you don't have to worry about the project.