Page 1 of 1

Using Microsoft Expression Blend 3 to develop WPF applications

#1 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

Posted 20 December 2009 - 03:48 AM

As you probably know, WPF (Windows Presentation Foundation) is a component part of the .NET Framework (since version 3.0) that allows the GUI (Graphical User Interface) to be a part, completely separated from the code. This means that the GUI can be separately develop by the designer and the code to be written by the developer.
WPF is based on a XML-based markup language, called XAML (Extensible Application Markup Language). The GUI in WPF is designed by using this markup language, and it looks something like this:

<Window
	xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
	xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
	x:Class="WPFBlendTutorial3.MainWindow"
	x:Name="Window"
	Title="Simple Application"
	Width="400" Height="300">
	<window.Background>
		<LinearGradientBrush EndPoint="0.07,0.943" StartPoint="0.919,0.19">
			<GradientStop Color="#FF01293B" Offset="0"/>
			<GradientStop Color="#FF161616" Offset="1"/>
		</LinearGradientBrush>
	</window.Background>
	<Grid x:Name="LayoutRoot">
		<Label x:Name="TextLabel" HorizontalAlignment="Center" Margin="8,24,0,0" VerticalAlignment="Center" Content="" Foreground="#FF256A00" FontStyle="Italic" FontWeight="Bold" FontSize="48"/>
		<Button x:Name="DisplayTextButton" Margin="159,0,150,8" VerticalAlignment="Bottom" Content="Default Text" HorizontalAlignment="Center" Click="DisplayText"/>
	</Grid>
</Window>


The code above describes a window with a button and a label on it. All the object (button, label etc.) properties are set in attributes. At this point, donít pay too much attention to the code above Ė it is there to show you what XAML looks like.

Now, there are three ways for the developer to build WPF applications:

1. By using Microsoft Visual Studio (the free versions of the development tools can be found here)
2. Manually (by using a simple text editor, like Notepad or Notepad++, but this will require you to manually link and compile the project files)
3. By using Microsoft Expression Blend (the trial for this product can be downloaded here)

Now, why I am going to show you how to create a WPF application in Expression Blend? Simply because this way you will concentrate on the GUI design and application coding, rather than on the code-behind part of the user interface.

Expression Blend lets you design the user interface without writing a single line of XAML code. Now, this doesnít mean that you cannot modify the XAML part of your application. You can, but we will discuss this later, in a more advanced tutorial.

Letís begin. Start Expression Blend.

Note: In this tutorial I am using Expression Blend 3, but the described parts will also work in previous version of Blend, with some small exceptions that will be mentioned later.

You will see this welcome screen (unless you have it disabled):

Posted Image

Select the New Project option:

Posted Image

Now, select the WPF Application option and type a name for the project that is more descriptive than WpfApplication1. I used WPFBlendTutorial for this project. The path to the project is up to you, the language also (whether you are a C# or VB developer).

Note: It doesnít matter whether you code in C# or Visual Basic Ė the XAML part remains the same, independently of the chosen language.

If for some reason you did not see the welcome dialog, you can create a new project by using the File > New Project menu.

Now, you will see something like this:

Posted Image

The UI might look a bit confusing, but later you will see that it is not that complicated. First of all, you see the canvas for your main window. This is the visual part of your application. On the left side of the screen you see the toolbox:

Posted Image

On the right there is the Properties pane, where you can change various properties, depending on the selected object:

Posted Image

Now, the whole new window looks pretty plain. Letís change some of its properties and add some elements. Select the Window in the Objects & Timeline pane:

Posted Image

Now, you can modify the wide variety of window properties. Letís change the background color to dark blue. From the Brushes section (on the Properties pane) select the Background element. Now, in the Editor section (also in Brushes select a tone of dark blue). Basically, you can choose any color you want Ė I am just using dark blue for this tutorial.

Posted Image

Now that your window has a color, it should also have a title. Find the Common Properties section in the Properties pane, and edit the Title property.

Posted Image

I set it to Sample. Obviously, you can set it to whatever you like. If you wish, you can customize the window even more by changing the default properties, but we arenít going to do this now.

So far the window is pretty plain. Letís actually make it do something. From the toolbox, click on white arrow on the Posted Image icon and hold the mouse for a bit. When a list appears, select the Label and double-click anywhere on the canvas. You will see that there is now a label on your window canvas.

Now, click the Selection tool from the toolbox (or press the V key) and click on the label. The black colored text doesnít really look good on the dark blue background, so it is a good idea to change its color. Now that you see the Properties pane for the label, select the Foreground element from the Brushes section and set the color to white, the same way you did for the window.

Posted Image

Give a name for the label, something like MainLabel. This also is set in the Properties pane while the label is selected.

Posted Image

You need to set a name for the control to later access it in the code-behind sections of your application. Now, letís add a button to the application. Select the Button Posted Image control from the toolbox and add it to the canvas the same you did for the label. Assign this button a title (by modifying the Content property in the Common Properties pane) and a name (the same way you did for the label). Now, for the button to do something you need to create an event.

An event is what happens when the button performs an action (whether it is clicked, selected, double-clicked, etc.). It is quite simple to create an event for a button in Expression Blend. Select the button on the canvas and click the Events button on the Properties pane.

Posted Image

You will see a list of possible events for the selected control:

Posted Image

Now, we need a Click event (so that a specific action will be triggered when the button is clicked). Right by the Click event, type ChangeText and press Enter.
Note: If you are using a version of Expression Blend older than 3, Visual Studio (or Visual C# Express) will be launched for code editing.

You should now see the code editing window:

Posted Image

This is where the application code is. It is really convenient to code some parts of the application directly in Blend, without actually going to Visual Studio. Please note, that Blend is not the perfect coding solution for a project Ė you will still miss a lot of features Visual Studio has to offer, like project and reference management, debugging, etc. But it is pretty neat for some simple functions.

So, in the newly-created ChangeText event write the following code:

MainLabel.Content = "New Label Content";



Now, press F5 to compile the application. You should see something like this:

Posted Image

If you press the button, the content on the label will change.

You are probably wondering Ė what should you do if you want to develop the project even more, adding more functionality or work on it more efficiently, especially on the code-behind part. When you create a project in Expression Blend, a Visual Studio solution (sln) is automatically created. So, if you navigate to the folder where you created your Blend WPF application, you will see something like this:

Posted Image

If you open the sln file, you will see your application being opened in Visual Studio (if you have it installed).

Posted Image

This is exactly the same project you were working in Blend.

Here I am going to end my introductory tutorial. As you see, WPF development with Blend can be easier and more interesting for those who work on the design part of an application.

If you have any questions regarding this tutorial or any WPF development elements, feel free to visit our WPF & Silverlight forum, and you will surely get some helpful replies.

Is This A Good Question/Topic? 2
  • +

Replies To: Using Microsoft Expression Blend 3 to develop WPF applications

#2 mentallybroken  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 82
  • Joined: 03-October 07

Posted 15 February 2010 - 03:15 AM

hey i have a question .... so which is good using microsoft visual studio or Expression blend in making WPF applications.. and can i use both? using expression studio 3 in design and visual studio 2008 for coding the logic.. and how? thanks

This post has been edited by mentallybroken: 15 February 2010 - 03:18 AM

Was This Post Helpful? 0
  • +
  • -

#3 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

Posted 17 February 2010 - 01:20 PM

Read my reply in this thread:
http://www.dreaminco...view=getnewpost

Pretty much covers my opinion on the question.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1