WPF Learning notes-making vector images with expression design and exporting them to XAML

WPF Learning notes-making vector images with expression design and exporting them to XAML

The first time you write something with Windows Live Writer, it feels good, haha ~ ~

1. It is very difficult to imagine a drawing on a white paper, especially one who has no artistic basis and no art cell, as I do. So you can find a reference, such as a digital photo, to this picture, you can basically trace the outline of the object.

2.ctrl+c then CTRL + V, add a bitmap to Expression design, notice that design automatically creates a new layer, and double-click the Modify layer named Mousephoto:

3. Click the new Layer button in the lower-right corner of the layer panel, add Mousepath, and move the new layer below the Mousephoto layer:

4. Click the Lock button on the Mousephoto layer to lock the layer to prevent the picture from moving.

5. Select the B-spline tool in the tool bar:

6. Start the outline of the mouse picture and place several anchor points along the outer contour. If you want to make a closed curve, you can point the mouse pointer to the starting point, and the curve is automatically closed and then clicked:

7. The above points are only rough positioning and can now be precisely adjusted for each point position, or add/remove anchor points.

Select the Direct Select tool in the Toolbox to adjust the position of each anchor point so that the closing defect is coincident with the outer contour of the mouse picture as much as possible:

Experience: a smooth curve can be approximated as a series of tangent arc connections. Therefore, it is best to place these anchor points at the tangent and midpoint points of each arc.

8. Select the B-spline tool again to draw the gaps in the mouse wheel. There are sharp corners in the middle of these slits, and you can draw a sharp angle by pressing the ALT key before adding the anchor point at the sharp corner :

The appearance of the outer contour and the completion of a gap:

9. Repeat the above actions to complete the description of the rest of the mouse:

10. This "sketch" seems more monotonous and less stereoscopic, and now adds some color to her. Select the selection tool in the toolbar:

Then select the outer contour, select Fill in the Appearance panel, set the two stop color,

Then select the gradient Transform tool to adjust the gradient direction of the color gradient:

In this way, my mouse looks a little better:

The above stuff dusty, still very awkward. If it is colored like a real thing, it looks much better. But this should be a work of art (designer).

11. Next, export my artwork to XAML for use in blend.

12. Select the drawn mouse and select: File->export ..., the Export dialog box appears:

Configure export Properties, then click the Export All button.

13. Open Expression Blend and select Add Existing items to add the exported Mouse.xaml file from design to the project. Open this file and you'll see my mouse:

14. Select the mouse in Mouse.xaml and CTRL + C to open the file window1.xaml,ctrl+v the custom button in the previous article and paste it into the grid. Then select the mouse pattern in the Window1.xaml and drag it to the Circle custom button:

Hold down the ALT key and then release the mouse to set the mouse picture to the content of the circular custom button:

Tags: WPF,. NET, Blend, Expression, Design, XAML

WPF Learning notes-making vector images with expression design and exporting them to XAML