Nextwave Software

2008.12.24 04:03:14

admin

Here is the picture guide and tutorial on how to design and draw commerical software box using Microsoft Expression Blend 2.

Step1: Select Pen from the Toolbox, draw the path Front layouts of the Software Box. Customize the Fill color of the Front to LinearGradient as following. Perform BrushTransform so that the gradient is parallel to the side of the Front.

Step2: Select Pen from the Toolbox, draw the path Side layouts of the Software Box. Customize the Fill color of the Side to LinearGradient as following. Perform BrushTransform so that the gradient is parallel to the side of the Side.

Step3: Using a Paint .Net, design the commerical front and side image to be display on the software box. You can set the background to transparent and save them as PNG format. 

Step4: You can add the side and front images to your Expression Blend project. You can add the images to your project by select "Add Existing Item".

Step5: Select on the LayoutRoot, then drag and drop the image from Projects Tree to the Designer. Resize the image, then, select "Make Image 3D".

Step6: Select on the Front3D 3D image model, then customize the 3D rotation of the front image to fit the front layout of the software box.

Step7: In order to make a reflection for the software box, select on the Front 3D model, perform a Flip Y-Axis tranform.

Step8: Then continue with a Translate-Y tranform. Select clip to bound in order clip your desired reflection bound. You can repeat the same concept for the Side.

9. Finally, you have the commercial software box.

Expression Blend

2008.07.14 06:13:09

admin

Here is the picture guide on how to do data binding between two elements using Microsoft Expression Blend 2. In this example, I am showing how to bind between a Slider and a Circular Marker.

Step1: Select the element you would like to bind from. Example below shows how to browse to the Circular Marker element.

Step 2: Select the property of the element you want to bind from. The example below shows that the value property of Circular Marker will be binded.

Step 3: Click on the "Advanced Property Option" from the value property

Step 5: From the Create Data Binding Menu, select "Element Property" Tab, then browse to the element you want to bind to. After that select the property of the element you want to bind to.

Expression Blend | XAML