Expression Blend 101

Posted on February 16, 2011


When I first encountered Expression Blend, I never thought I will be able to “use” it at all.  As I mentioned before, I am not a CS or IT student so I am not that knowledgeable when it comes to programming.  I am surprised that you can actually develop simple applications when using Expression Blend.

When you open Expression Blend, you will be prompted with a welcome screen.  In the welcome screen, there are three tabs: Projects, where you can see projects that you have started recently; Help, which has a user guide as well as links to online tutorials; and Samples.

Let’s try to create a new project.  After clicking new project, you will be ask what if you want to make a WPF (Windows Presentation Foundation) or a Silverlight application.  A very simple explanation would be if you want to make apps to run on your desktop, you choose WPF.  On the other hand, if you want apps that run on the web, go for Silverlight.  You can also select between Visual Basic and C#, as well as the .NET framework version you want to use (3.0, 3.5 or 4.0).

There are two workspaces you can choose from: Animation and Design workspace. You can toggle between them by pressing F6.

The workspace can be divided into three sections. If you are on the Animation workspace, you can see on the left side the Toolbar, where you can select and create elements. On the right side, you can see Palettes where you can select Project, Properties, and Resources. When you go to the Project palette so you can see the other files related to your project. You can right click on a .cs or .vb file and select “Edit in Visual Studio.” The nice thing is that all changes you make in Expression Blend carry over when you work on the same project in Visual Studio and vice versa.

Below, you can see the Object and Timeline where you can create storyboards to create simple animation. Beside it are the Events and Triggers palette where you can add functionalities to the elements you create such as buttons.

After creating some elements and adding animation, a code was already generated for each of them! If you recall, in my previous blog post, Expression Studio generates XAML codes for you! Want to see XAML? You can toggle between Design, XAML, and Split view by clicking the buttons on the upper right side.

Expression Blend is part of Expression Studio.  It is available in MSDNAA as well as DreamSpark.  You can also get the free trial version here.