Building a simple application with Blend and Visual Studio

I have dedicated lots of time recently to understand WPFapplications and the large WPF API.

I have been working with window forms applications for many years and I wanted to have a look at this rather new technology, which is a brand new way of building desktop and RIA applications.

There is a lot of stuff one must learn and along with WPF API and Visual Studio, Microsoft Blend is almost a necessity to explore and learn.

I will create a small application with Blend and Visual Studio in this post.

But I think it is very important to understand why Microsoft created WPF and the accompanying tools and what are the differences between WPF and Window forms applications.

Let’s start with the differences between WPF and Win forms

1. Window forms was built on top of  2 lower APIs User and User 32(newest version) and GDI

WPF is built on top of DirectX. We could design-draw an application using User32 and GDI libraries but we could never do things like 3-D effects, transparency, shadows. We can do that with DirectX.WPF is relying on DirectX.User32 and GDI are rendered via the CPU.

DirectX utilises the GPU.Almost all PCs nowadays have integrated GPUs and with WPF we can harness that extra processing power.So it was natural for Microsoft to implement and provide us with an API , WPF in this case, to take advantage of the new capabilities of graphic cards.The WPF application when it starts it checks to see on what kind of machine it executes and decides if it needs to downgrade certain effects.

2. XAML is used to define the WPF objects and is built on top of WPF API. It is an XML-style language. Expression Blend is just a tool in assisting developers-designers in the creation of User Interfaces. Expression Blend generates XAML code. The business rules and the back end access is still  implemented with .Net languages

3. With WFP we have the addition of New Navigation Project types. In WPF we have the option to create page based applications. For example we can navigate back and forth in our application like in a web based interface.

4. The layout of the controls in WPF is quite different.WPF’s default layout is relative. In a WPF application it is much easier to resize and reposition controls

5. With WPF we have much better tools at our disposal when dealing with audio and video within our applications

6. We can have fantastic and really impressive animations in our WPF applications, somthing we could not really do easily with window forms.

7. We have “Themes and Skins” in WPF. It was very difficult in Window forms applications to keep all the controls (e.g buttons in all forms) to have the same background color.In WPF we can do that through styles and templates.

Let’s start building our first application using Blend and Visual Studio. I assume that you have Visual Studio 2008 installed.Visual Studio 2008 express editions can be downloaded from here. Download the Visual C#  2008 Express edition.

If you need to download Expression Blend 2.0 click here. Bear in mind, this is a trial software…

1) Launch Visual Studio 2008 and as a project template choose “WPF application”. Select C# as the labguage of development.

2) Save your project with a name e.g “myfirstWPFapp”

3) Launch Expression Blend 2. Open the “myfirstWPFapp” from Blend by clicking File->Open -> Project/Solution

4) Our solution is opened both from Visual Studio and Expression Blend. I will use Expression Blend to create the basic user interface. Drag and drop a button on the . You can resize it if you want, give it a name and set it a color. You can do all that from the Properties window. Spend some time to familiarise yourselves with the Blend IDE.

5) Click the “Window” option which is a top level menu in Blend.Check the “Interaction” option.The Interaction window is now visible.

6) Add a new event in the interaction window. When the button is clicked a new event is raised. You will see a message from Blend saying “No storyboard exists for you to begin or to control.One will be created.” Click OK

Have a look at the image below.

7) Now we have a new window appearing in our IDE, Objects and Timeline. Notice also that on the top left corner the statement “Timeline recording is on” is written.

8) From the “Objects and Timeline” window-pane drag a line(yellow line) until you reach 1.5 seconds in time in order to create a timeline

9) Now select the corner of the button and try to flip-rotate it 180 degrees.It is very easy to do. Just select the button and wait until the curly double-head arrows appear.Then just rotate it.

10) Now add another 1.5 seconds in the timeline, by dragging the yellow line to the 3 seconds interval. Rotate the button back to its original position.

11) Hit F5 to run your application. Click on the button to see that rotates

12) Close Expression Blend. Switch to Visual Studio. Reload and click “Yes” when asked to save the solution.

13) Run your application from Visual studio by hitting F5. You see the same results.

14) Double click on the button. In the code behind file in the event handler subroutine, simply type

MessageBox.Show(“This is a first WPF application”);

15) Run your application again. When you click your button, first the message pops us and then the animation starts to unfold.

So in a much more complex application than this, the designer can create the UI and the stunning effects while the developer can concentrate on the business rules and the data access.

Finally it is worth pointing out that

1) We can have  Windows Presentation Foundation inside existing Win32 code and vice versa we can have existing Win32 code inside Windows Presentation Foundation

2) WPF is interoperable with Window forms  through the use of the ElementHost and WindowsFormsHost classes.

And remember that Window forms are here to stay despite all the things I have been pointing out in this post.As things stand now, most users are familiar with the “look and feel” of window forms and there are more third party tools-components for window forms.

WPF is a new way of delivering excellent functionality with more style!!!!!!!!!

Hope it helps!!!!!