Build a simple "WPF/E" Application

Let's take a look at Microsoft Expression Graphic Designer, which is used to create a very simple graph for "WPF/E. Figure 1 shows the products in the creation process.

 

Figure 1. Expression Graphic Designer

Expression Graphic Designer is a new tool developed by Microsoft. It combines the advantages of Vector-based and pixel-based Graphic design tools, allowing designers to explore new creative goals. You can use this tool to incorporate graphics from other applications and to export design elements to various software tools, including XAML for WPF and "WPF/E.

Prepare a graphic design file for "WPF/E"

Use Expression Graphic Designer to open the Popcan. xpr file. You can find this file in the Program Files \ Microsoft Expression \ Design Beta 1 \ Samples Directory. This is the graph file used in Figure 1.

After you open the file, you will find that if the size is measured by pixel, it can be determined by using the vertical and horizontal scale, its actual size is 1280 × 1024 pixels. Figure 2 shows a horizontal scale that represents the image width.

 

Figure 2. horizontal scale in Expression Graphic Designer

You can also choose Document Size in the Document Size dialog box (select Document Size in File), as shown in 3.

 

Figure 3. "Document Size" dialog box

Use the Document Size dialog box to change the image Size to 300x150 pixels. To change the value, Type 300 in the Width text box of the Document Size dialog box and 150 in the Height text box, 4.

 

Figure 4. Set the size to 300x150 pixels

When you click OK in the dialog box, the image size is adjusted. At this time, the appearance of the can is too distorted, short and rough, as shown in 5.

 

Figure 5. document size adjusted to 300x150 pixels

Since the plot is a vector-based drawing, you can adjust the size without losing sight of it. When you are on the design surface, press CTRL + A to select all elements in the drawing. A green contour line appears and the selected elements are displayed, as shown in 6.

 

Figure 6. All selected image elements

In this case, you can drag the image around the border and drag its corners to adjust the image size until the aspect ratio is satisfactory. Figure 7 shows that the cans are more realistic after being adjusted and placed in the upper left corner of the document.

 

Figure 7. Adjust the size of the can to get a better Aspect Ratio

You can export the image as a "WPF/E" XAML image.

The procedure is as follows: click "File", "Export", and "XAML", or press CTRL + ALT + X. This operation will bring up the "Common Save" dialog box, which can be used to specify the position where the XAML file is to be placed. Call the Popcan. xaml file and select Save ). The "Xaml Export" dialog box appears. You can use this dialog box to further specify the exported file, including specifying the XAML that you want to export compatible with "WPF/E", as shown in 8.

 

Figure 8. Export "WPF/E" XAML

On the right side of the screen, there is a Preview pane in which you can check the image by scaling and shifting to ensure that the image looks normal and then perform subsequent operations. The tab on the right is used to switch between checking the image and checking the XAML code that represents the image. If this is the first time you get started with XAML, you 'd better take a look at the "XAML Code" tab to associate the Code with the result after the Code is applied to the image.

The drop-down options on the right are used to specify the export attributes, including how to process raster images, that is, whether they should be vectorized or directly output to a specific directory. Currently, the default settings remain unchanged. Make sure that "WPF/E" under "Document Format" is selected, as shown in 8.

After everything is ready, click the "Export" button to write the "WPF/E" XAML code to the disk. Later, the code will be used in the Visual Studio 2005 Web project. In the next step, you will learn how to set up a Web project and how to prepare the project for XAML.