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):
Select the New Project option:
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:
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:
On the right there is the Properties pane, where you can change various properties, depending on the selected object:
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:
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.
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.
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
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.
Give a name for the label, something like MainLabel. This also is set in the Properties pane while the label is selected.
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
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.
You will see a list of possible events for the selected control:
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:
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:
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:
If you open the sln file, you will see your application being opened in Visual Studio (if you have it installed).
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.
MultiQuote
| 