Getting Started With Expression Blend 4

Introduction

In this article you will learn how to create a new project for beginners using Expression Blend (Silverlight Application and website ). Silverlight Application and Website -> A Project with an associated website that you can publish to a web server.

Step 1

Open Expression Blend 4 then select "Project" > "New Project" > "Select Silverlight Application + Website" > "Change Name and Location" then hit "Ok".

Step 2

In the Tools Panel, click Ellipse. On Artboard draw an Elliptical Shape by dragging with your mouse.

   

In the Object and Timeline Panel, the element you just added has appeared is the active section.

Step 3

In the Properties Panel, click the Arrow to expand the Layout category (If it isn't already expanded). Set the Width to 100 and the Height to 150. The Ellipse you drew on the Artboard changes shape to match the changed Width and Height.

Step 4
In the Properties Panel, find the Brushes Category, If it's Collapsed expand it. Notice that the Ellipse has a default fill and uses a Solid Brush by default.

Step 5

Click the Gradient Brush tab just above the Color Editor. Expression Blend applies a basic Gradient to your Ellipse. Below the Color Editor and the Color Bar, click the Radial Gradient button to switch the fill style from a Linear Gradient to a Radial Gradient.

Step 6
In the Properties Panel, at the bottom of the Brushes category, click the Show Advanced Properties Icon (the small white square to the right of the gradient stop offset field). The Advanced Properties appears. Set the Gradient Origin fields to 0.7 and 0.3.

Step 7

Click the Hide Advanced Properties icon to close that Panel Area.

Step 8

Now you will change the Color of each Gradient Stop. Click the Right Stop on the Color Bar, type the Hexadecimal (hex) Color Value to #FF00B6BA into the Color Field, and then press Enter on your keyboard. The Object's Color changes.

Step 9

On the Properties Panel, in the Brushes Category, click the Stroke Horizontal Tab. You'll find it grouped with the Fill and Opacity Mask Horizontal Tabs. Select the No Brush Sub Tab. Now the Ellipse has no edge border (stroke) and looks even more three dimensional.

• Press Ctrl+C to copy the balloon, and then press Ctrl+V to paste it onto the Artboard. Notice that there's another entry in the Objects and Timeline Panel. That's the balloon Object you just pasted.
  

• On the Tools panel, click the Selection tool button, and then drag the newly pasted balloon to the right and a little lower on the Artboard.

• In the Layout category of the Properties Panel, set the Height Property to 105 and then Margin your balloon location.

Step 10

In the Assets Panel, double-click the Callout Cloud shape. A new object appears in the upper-left corner of your document. In the Brushes category, select Stroke and click the Solid Color Brush Tab. Enter #FF00B6BA into the Color Field and #FF00B6BA into the Foreground Field. These values set the color of the border and the text of the Callout shape, respectively. On the Artboard, drag the Cloud shape to the right of the yellow balloon.

Step 11

Double-click the Cloud shape, type Hi! Expression Blend inside of it, and then click the Artboard Outside of the Callout shape to Exit Text-Editing mode.

Step 12

In the Objects And Timeline Panel, select LayoutRoot.

Step 13

In the Properties Panel, click the Background Property, and then click the Gradient Brush Tab.

Step 14

Click the Black stop of the Color Bar, type #FFA7F0F1 into the Color Field, press Enter F5 on your keyboard, and then save the Document. Close your browser window and return to Expression Blend.