Click here to Skip to main content
13,343,419 members (56,301 online)
Click here to Skip to main content
Add your own
alternative version


49 bookmarked
Posted 23 Dec 2008

How to Design and Draw a Commercial Software Box using Microsoft Expression Blend 2?

, 23 Dec 2008
Rate this:
Please Sign up or sign in to vote.
Step by step Expression Blend 2 tutorial on how to draw and design a Commerical Software Box.

Note that you need Expression Blend 2 with .NET 3.0 installed.



In this tutorial, I'm going to explain how to draw and design a Commercial Software Box using Expression Blend 2. It is only XAML code. By the end of this tutorial, you'll know how to draw and design a commercial software box using Expression Blend 2.


Get some basic knowledge of Blend 2 from: .NET 3.0 WPF Tools && Examples.


Step 1: 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.


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


Step 3: Using a Paint .NET, design the commercial front and side image to be displayed on the software box. You can set the background to transparent and save them as PNG format.


Step 4: 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".


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


Step 6: 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.


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


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


Step 9: Finally, you have the commercial software box.


View More "How to Blend" Tutorials


  • 24th December, 2008: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United States United States
Senior Software Developer at nextwavesoft

You may also be interested in...


Comments and Discussions

Generalgreat Pin
omycah8-Jun-09 22:52
memberomycah8-Jun-09 22:52 
GeneralThank you for the tutorial Pin
usacoder3-Mar-09 15:37
memberusacoder3-Mar-09 15:37 
GeneralMy vote of 1 Pin
filippov.anton29-Dec-08 19:37
memberfilippov.anton29-Dec-08 19:37 
GeneralAdvert Pin
Paul Selormey23-Dec-08 19:47
memberPaul Selormey23-Dec-08 19:47 
GeneralRe: Advert - Removed. Pin
Steve-Low-NextwaveSoft26-Dec-08 11:39
memberSteve-Low-NextwaveSoft26-Dec-08 11:39 
GeneralRe: Advert - Removed. Pin
Paul Selormey26-Dec-08 12:42
memberPaul Selormey26-Dec-08 12:42 
GeneralMy vote of 1 Pin
Puchko Vasili23-Dec-08 19:39
memberPuchko Vasili23-Dec-08 19:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 24 Dec 2008
Article Copyright 2008 by Steve-Low-NextwaveSoft
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid