Expression. blend.4 chapter Interface Design

I found that there have been very few books on Silverlight and WPF Art series on the Internet, and many of them are in English. Start translation when you are bored in the company.

The translation may be incorrect. please correct me. However, every program in it has been tested in person and added some opinions.

Expression. blend.4.step. By. Step. If you have any questions, go to the original English version.

I hope you can add a link when reprinting. 3q

Http://www.cnblogs.com/WWLB

Visual elements

Blend supports vector and bitmap graphics. You can draw some simple or complex paths, use built-in graphics, and paste high-quality images to your project. When you drag and drop your visual applications or draw vector elements, blend creates an Xmal markup language definition for these elements. Blend provides a variety of design tools for those who like visual work.

The blend tool panel has a selection object that allows you to select the primary colors on the right and place them on the canvas.

 

In addition to the Panel and controls, you will learn more in the following sections. This tool Panel selects some common vector tools.

■

RectangleUsed to draw a square, a right angle, and a rounded rectangle.

■

EllipseUsed to draw an ellipse and a garden.

■

LineUsed to draw a straight line

 

■PenUsed to define nodes for a path

■PenpencilIt is used to draw arbitrary lines such as straight lines, curves, signatures, and pencil strokes.

 

There are two elements in the toolbar that allow you to select, move a node or the entire path or change the attributes of some images.

 

Create a new project.

1. Open the blend 4 Welcome dialog box. Click new project to open the new project dialog box.
2. There are usually two project labels on the left of the welcome dialog box: Silverlight and WPF. In this exercise, we will create a Silverlight project. If the Silverlight tag is not selected.

 

3. The Silverlight tag contains the following project options:

Using Silverlight
Application + website. You can place a website-related project on a web service.

Using Silverlight
Application. A project that can run the check in Silverlight. Inside or outside the browser window.

Using Silverlight
Databound application. A project bound with data and commands supports loose coupling between views (user interfaces) and view models (with code coordination and view states of the underlying models.

Using Silverlight
Control library. Create a project where custom controls can be reused in other Silverlight projects.

Using Silverlight
Sketchflow application. This option allows you to create an application prototype in a very intuitive way.

1. Click Silverlight
   Application + website. Enter the project name CH3 at the name position. Keep the default value for other locations.

 

4. Click OK. Blend creates a new project.

Use basic graphics.

Although you can manually call some basic shapes on the Expression blend canvas, it is usually faster and more accurate to insert basic shapes than manual painting. Expression
The blend tool Panel provides three basic shape tools: elliptical, rectangular, and line. They share the same button, but click the triangle button in the lower right corner to make all options visible.

 

Create basic images. Click ellipse in the toolbar. Drag your mouse on the canvas to draw an elliptical image.

 

On the objects and Timeline panel, the newly added elements are displayed and selected.

 

3.In the properties panel. Click the arrow to expand the layout category (if not displayed ). Expand the property panel and display the attributes of the newly added elliptical object. You can make some changes.

Change the width to 100 and the height to 150. The ellipse you draw on the canvas will change the shape based on your changes to the width and height.

5.Find the brushes category in the properties panel. Ellipse is filled with a solid color paint brush by default.

6.Click the gradient brush label in the color editor. Expression blend applies a basic gradient to your ellipse. Under the color editor and color bar, click the radial

Gradient button switch fill radial gradient style from linear gradient

7In the properties panel. At the bottom of the paint brush category, click the show advanced attributes icon. This advanced property is displayed. Set gradientorigin to 0.7 and 0.3.

Click CLOSE Advanced properties chart close panel.

9.Now you will set the stop color for each gradient. Click right-stop of the Color Bar, enter the hexadecimal color value # ff00b6ba in the color position, and then press enter on the disk. The color of the object changes.

10.Click the left dock of the color tone. Enter the hexadecimal value in the color position.# Ffbffeff, And then pressEnter. Your object changes the secondary color, and the current object has a three-dimensional appearance.

11.In the properties panel. Select the stroke tag from the brushes category. Select the no brush label .. An elliptic without edges (stroke) now looks more stereoscopic.

12.Press Ctrl + C to copy the gas ring, and then press Ctrl +
V paste it into the canvas. Note that there is another objects and Timeline panel. This is the object you just pasted.

13.In the toolbar. Click the selection tool button. Drag the pasted balloon to the low point on the right of the canvas.

14.Set the height to 120 in the layout category on the Properties panel.

15.Next, change each gradient of the object to stop. Click "stop" on the right of the Color Bar. Enter the hexadecimal value at the color position.# Ffffe100. PressEnter, the object color changes

16.Click the color bar to stop renting. Enter the hexadecimal value at the color position.# Ffffffff, PressEnter. You will find a blue and a yellow gas ring

Draw path

Draw a free path.

1.Select the pen tool in the toolbar. Click the first node located at a point below the blue balloon on the canvas. Move down 1 inch Click again to place the second node. Move down about 2 inch More, click again on the drawing board to place the third node.

2.In the toolbar, select the lower-level button. Press and hold the Alt key on the keyboard. When the cursor changes to the pointer of the conversion point, click the second node. Drag down and a little to the right. The cursor changes to the pointer of the conversion part.

Note that when your line has the gradient property you use, the paint brush with the same size as the second balloon is created to keep the selected path of your new painting. Click the stroke label of the brushes category in the properties panel, and then click the solid paint label. Enter # ff4d4d4d at the color position next to the color tone, and press ENTER

5.In the brushes category, click the fill label and select the no brush sub-label. Now, your path has only one stroke attribute.

6.In the toolbar, click the selection button. A border box appears next to the object. Drag the line up to see a red dotted line under the bubble. The red dotted line indicates that both paths are in contact. This is a feature calledSnapping to snaplines. Snapping is useful when alignment each object on the canvas.

 

7.Press Ctrl + C to copy the path, and then press Ctrl + V to paste the copy to the canvas. Move the second path to the right and capture the bottom of the yellow balloon.

In the next step, you will create a triangle to serve as the balloon tail.

8.In the toolbar, click the pen tool. You can create a small triangle by drawing its geometric point. Click on the canvas to define the first node of the triangle vertex.

11.. Move the pen tool to define the second node on the right of the triangle at the bottom right.

12.. Move the pen tool to define the third node of the triangle on the left side of the canvas.

13.When you move to the first node, the pen tool turns into a small circle to close the path. Click the first node to create a closed path to complete a triangle.

So much nonsense is to draw a triangle.

14.On the Properties panel, click the fill label of the brushes category, and then select the solid color paint label. On the side of the Color Bar, enter# Ffffe100, Press enter, and the triangle is filled with yellow

15.In the brushes category, click stroke, and then click the no brush label.

16.Click the selection tool to move the triangle to the yellow balloon until a red dotted line appears.

17.Press Ctrl + C to copy the triangle. Press Ctrl + V to copy it to the canvas. Move the triangle under the blue balloon.

18.In the brushes category, click fill and then enter the color field.# Ff00b6ba. The color of the triangle turns blue.

Use common images

Add a common image

1. Click the shapes tab on the left of the assets panel. Double-click the star chart. There is a star in the upper-left corner of your file.

3.
In the tool panel. Click the selection button and find the appearance category in the properties panel.InInnerradius: Enter 70%, and opacity: Enter 70%.

Layout panel, input 30 in width position, input 30 in height panel

5.
In the brushes category, click stroke. Click the no brush label, and the stars will have no edge color. In the brushes category, click fill to set the color to white. Move the stars to the blue balloon.

6.On the assets panel, double-click a cloud image. A new object is displayed in the upper-left corner of your file. In the brushes category, select stroke and click solid color paint brush. Input at the color position# Ff00b6ba, InForegroundLocation Input# Ff00b6baThese values respectively set the color annotation shape of the border and the annotation shape text. Drag the cloud on the canvas to the right of the yellow balloon.

7.Double-click cloud. Enter the text in the text box, and click a location other than the annotation shape to exit the text editing mode.

8.On the objects and Timeline panel, select layoutroot

9.On the Properties panel, clickBackgroundProperties, and then clickGradient brush label.

10.Click the black icon of the color bar and enter it in the color position.# FFA 7f 0f 1, Press enter, and then save the file.

 Press F5 to preview.

Use Controls

The Toolbar contains some common controls, but the assets panel's controls label contains more.

 

Adding a control to a file in blend is similar to adding other elements.

Add a control to the project.

1.In the toolbar, double-click the button icon. a button control is displayed in the upper-left corner of the file.

 

2.Select the selection tool from the toolbar, double-click the button on the canvas, and enter the text. Click anywhere on the canvas to exit the text editing mode. Drag the button to the cloud image.

 

3.On the assets panel, in the control group, double-click calendar to add a calendar control. Move the new calendar control to the bottom right corner of the file.

 Press F5 to preview.