19 December 2010

Getting Started on WPF

Assalamulaikum wbt..

After some comments received from my loyal reader, I finally decided to write this and upcoming tutorial in English as some programming terms are far more easy  to digest. I'm fullly aware my English writing skill is not the best, but I'm trying to do the best I can. I'm more than happy as long as you readers can gain some knowledge in here and put them into practical. So, just ignore my grammar mistakes (notice the "s" = many)..haha..After all, sharing is caring rite!

This article is about "Getting started" by showing you the fastest way to gear you up with .Net environment tools and as usual, your first HelloWorld application in WPF. Next article will further explain on structure of .Net Framework including its component such as WPF, WCF, Silverlight, ASP.Net and so on. At the end of this tutorial you will have all your IDE ready for any type of .Net application.

Compulsory tools:
1) .Net Framework 3.5 ( version 4.0 is recommended)
     -You already have one if you running on Windows 7
2) Visual Studio Professional or C# Express
3) Microsoft Expression Blend ( part of Expression Studio package)

Bear in mind, if you want to develop an application such that it will eventually be commercialized, please consider first your future customer's desktop environment. During my internship, I need to use .Net Framework 3.5 with distributable package as most of their computers running Windows XP with .Net Framework 3.0 (even some of them still on Windows 98). I'm using version 4.0 for my tutorial simply because by default, it already in my Windows 7.  By any chance, if you have any difficulties on getting these tools, inform me and I will give you one.

Getting Started

Open your visual studio, go to File > New > Project and one dialog box will appear. Choose Visual C# > Windows on left panel and select WPF Application. Notice that on combobox option on top, there is your target platform version. You can choose to develop on version 3.5 though if you want. Then fill in your solution name and browse your preferable directory. Left other option by its default for now. Refer to figure below. Thats it and your are ready to go!

Using Visual Studio

The best thing about Visual Studio is it allow you to design your user interface (UI) on drag-drop basis. Your Visual Studio should look like below:

On left panel is the collection of control. Xaml Viewer and Solution Explorer is on bottom and right panel respectively. You can rearrange it though to suit your needs. Just brief explaination, WPF works on Xaml for UI customization purpose and whole bunch of work in the background is C# driven. You will notice this later. Try to build the application by pressing F5 (atlease to some laptop) or go to Debug > Start debugging and you should see your application window running without anything on it.

Using Expression Blend

Go to your installed Expression Blend and open your project. Some developer may find it useful to use drag and drop feature in Visual Studio, but for me, I love my Blend even more.

In Expression Blend, you will see that your application consist of one main window with a grid inside it. Now go to left panel and right click on Grid control (refer to figure above). There is lot more layout type but for now, choose Border. Double click on border to put it on your window. In Objects and Timeline panel, select your border. Go to left panel again and double click on textblock. Notice how Blend insert your textblock on the selected border. In general, Blend will try to insert the control in the item that you selected. There are bunch of options available on the right panel where you can play around with. I change my border background to gradiant blue while textblock is black like below:

Adding Event Handler

As I mention earlier, Blend is used to play around with the GUI things while Visual Studio remain your core programming tools. Save all your work on Blend. Now, go back to your Visual Studio and notice that they ask you to reload things up. Click "Yes to all". This is one of .Net Framework abilities as it allow you to use multiple IDE ( even on multiple computer using Visual Studio Team Foundation) and synchronize it all together. Makesure to save your work first before changing IDE, otherwise the framework couldn't detect and dialog box for reload wouldn't appear as it use to be.

What we gonna do here is to allow user to click on border and simple messagebox will appear. There are two ways to add event handler. I will show you both and explain which one is better and why. First way is done on your Xaml by adding MouseLeftButtonDown="YourBorder_MouseLeftButtonDown" inside your border. Second way is by editting your C# file to look like below:

public partial class MainWindow : Window
        public MainWindow()
            bdrHelloWorld.MouseLeftButtonDown += new   

        private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

When an application launch, constructor MainWindow will be called first (notice the name is same with window's name). InitializeComponent() is default function telling .Net to start construct your customized UI. Since everything start in this function, I add event handler for MouseLeftButtonDown so that this event will begin listening as soon as window is launched and fire when user click on it. For those who familiar with Java  or ActionScript programming, this thing work same as the ActionListener. If you notice, Intellisense will help you generate the function. Now, edit this function to look like below:

   private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        MessageBox.Show("Hello World!!");
Finish and Compile

Thats it!.. now build and compile your application. Test the function by click on the border. If nothing goes wrong along the way, you should see one messagebox popup with Hello World message like below:

Now you have familiarize yourself with Visual Studio and Expression Blend. Next thing to do is explore other option and play around with UI customization in Blend. Future article will have detailed explaination on structural organization of .Net Framework component and how they interact each other.

Download example code from my SkyDrive:

Until then, gud luck!!

No comments:

Post a Comment

terima kasih.