GUI Creation - WPF/C# Tutorial

[@ruantec]

PART I - Intro and basics

Since long time a lot of members and coders want to know how to create advanced GUI's in a very easy way and since there are no proper tutorials over the net on how to do that i decided to create this tutorial after many requests on msn, here and other places and specially from Bill_gates and because of that am posting it here for everyone interested.

first of all i would like to apologize for the bad gramma and my bad english but i guess the goal of this tutorial is not to show how bad my english is but to teach others on how to create rich GUI's for there applications in a very easy way which do not necessary require good english to comprehend how is done.

Normal GUI's are mostly generated from the designers available for almost every language. those designers however use the form of the system and in the case of Window it use the pre-historic windows form API which in my eyes is overrated and old. another way to create advanced GUI's is by using GDI+ but there are some limits that may give you problems and create troubles at the end as you will need to use the SetLayeredWindow API call and pass the HWND long number of your form and then proceed to render the data on your layer. as mentioned it works but at the end you will write a lot of lines of code to get something acceptable.

Q: is there a easier solution????
A: Yes.

lets start!!!

Requirements:

1. Any graphics tool like Photoshop, gimp or whatever you preffer to edit your pictures.

2. Expression Studio(Blend)

3. Visual Studio 2008/2010. Optional(Expression studio have a compiler and a editor but i recommend to use VS instead):

4. C# knowledge(at least the basics).

If you have the necessary tools list above then you're ready to start!!!!

Before we start i would like to mention this is not a "Hello world" tutorial nor a tutorial to learn C# or XAML but an explanation on how to use an awesome set of tools to create awesome GUI's for your applications. sadly the designer allows users to create application without the need to write a single line of code and that could be a bad habbit... because of that i recommend to take some time and write/create your stuff yourself as much as you can.

another thing is the fact that a lot of tutorials online make XAML look as if it were a new language and even write down the entire XAML code by hand. sure its a good practice but XAML is nothing more than a structure language in my eyes and nothing that you must hard learn in order to get great results.

Blend: is the tool we're going to use as the other ones aren't really necessary unless you want to do other stuff that aren't required for GUI design at all. Blend is a designer for WPF and Silverlight applications where you get the freedom required to do whatever you wanted to do design-wise... but be careful as freedom can be bad at certain points because you get the control of everything and as such you have to care about everything you do.

the first thing we're going to do is create a new project:


after that we're going to see the designer for the first time:


Highlighted areas:
I just bother to highlight what isn't obvious to most of the coders out there which are "Allow transparency" , "Events" and properties icons. as you will notice after watching the designer for the first time its the fact that it offers a lot of features a normal form doesn't have and the reason for that is because WPF use the new Windows API called WPF(Windows Presentation Foundation) which is the new API that its going to replace the traditional Form API from now on as far as i know.

Allow transparency:
This option allows to apply something similar to the SetLayeredWindow API call on normal forms and its going to make your form transparent and ready to render content on it anytime. to make the form fully transparent you need to remove the borders and style using the properties of the WPF form.

Events:
Events are listed depending on the item you choose and of course you can choose which event should be created. however there are XAML events that can be applied using animations as i will explain at a later time in this tutorial.

Properties:
As every designer Blend list a lot of properties for each item where you can change several properties of an item.

Note:
Controls in WPF are templates and you can change absolutely everything from them including taking the logic of a component and changing its shape or even behaviour and transforming it into your own custom control.

LayoutRoot:
is the first primitive container which is going to hold the controls or items on your form which can contain sub-containers such as canvas, stackpanel, grid etc. where each of them have different behaviour while displaying its content.

Timeline:
is a tool that allows you to create animations that can be played anytime. animations are created by setting a timeline and moving/changing the properties or controls positions you want to change at certain time.

Triggers:
are XAML events applied to controls at the animation time when you want that something happen if the user click, entered, leaved the control.

PART II - Design

I want to remind you that this is not a "Hello world" tutorial so we're going to start with a basic but advanced animation.

First click the row to open the control toolbox and choose items you want to add:


Then proceed to create a new animation:


By default WPF create a "Windowloaded" event which is bad as all the animation will run on start so make sure to modify or delete that event as i show in the following video:


PART III - Events

There are two kind of events triggers in WPF and those are:

1. XAML triggers:
used for animation interaction and predefined behavious.

2. Code behind triggers:
used for everything else by writing C# code.

Before we get started we need to change a setting in the options menu in order to use Visual Studio as our standard code behind editor. for that click the menu and open the options window:


Click the project tab and activate the following option:


now close the options window, click the object you want to add an event and click the flash icon on the top-right to see the list of available events for your object(btw add proper names to your objects):


double-click the event you want to add and Visual Studio should open. sometimes Blend shows a message telling you that the comunication between blend and Visual Studio failed but that's not a big issue so just re-double-click the event again or open the .cs file from Visual Studio to see the event you just added:


Since you're in Visual Studio now you can work with both tools parallely without problem where blend is used for design and Visual Studio to edit your code behind and write the code you want to get executed:


Remember that XAML Triggers are executed as well if you have any event binded to the same object that is going to execute the code.

PART IV - Graphics

After learning the basics on how to create animations and events i think we're ready now to start working with graphics and Per-Pixel apps such as @ES. for that we will create a new empty project or just delete the items we already added:


when you get the empty screen then click the form item and under properties activate "AllowsTransparency" in order to transform our form into a layer and then remove the background which will cause the form to have a transparent background:


our next step is add a new file to our project and in my case am going to add @ES's background which is a PNG file with a transparent background. in case you didn't knew some formats hold transparency data and one of them is the popular png format. other formats such as jpg, bmp and others do not contain transparency data and gif does contain transparency data but the image quality is low so i recommend you to use high quality png files for your per-pixel apps.


now select the LayoutRoot and double-click the image you just added(you can create folders and add items inside those folders if you wish). as you will notice the image is going to be added to the layout container and will serve as a background(don't forget to give the object a proper name).


as you can see in the picture the layer is smaller than the pic and if you run the app at this point the image will appear cut-off because it only renders the size of the layer and everything else is excluded. to change that we will have to modify the layer sizes to fit the background. by default the pictures are aligned to fit the layer sizes which means that if you change the size of the layer the image will stretch to fit the sizes of the layer and its going to look horrible! to fix that just click the bindings to remove them(click the image object to see them):


After that you're ready to resize your window and it won't change the size of our background. click the form and resize it to fit the size of the background and if the background size changes then check the bindings again to see if you remove them correctly and also use the zoom feature to gain more space in your screen and view the whole GUI.


Now hit F5 and you will have your first per-pixel app made with just few clicks and 0 troubles yay!!!


after few seconds of enjoying your first per-pixel app you will notice something and that's the fact that there is no way to move the GUI around!!! so lets fix that by adding our first event that is going to do the job for us. click the background image and then click the flash icon and look for the "MouseMove" event and double click it:


Once you do that Visual Studio will show up and display the new event created which is going to be triggered when the mouse move. now proceed and type the following code:

            try
            {
                this.DragMove();
            }
            catch { }

usually i do not ignore any errors but in this case there is nothing much to handle and in case a minor error appear is going to be ignored. now hit F5 once again and run your app and as you will notice you will be able to drag the app around with your mouse:


Now close stop the debugger to close the application and return to Blend as we're going to add some new stuff to create a screen. what we're going to add is a canvas control which is a primitive container that is going to hold several objects we add to our new per-pixel application:


once you add the canvas control to your layoutRoot resize it to fit the desired area to cover like shown in the following picture:


right after check the properties tab of the canvas and click the row to view the hidden content where the option "ClipToBounds" and activate it. that option is going to prevent objects to be rendered outside the area of the canvas object which is going to create a region path for you.

in our next step we are going to add a wallpaper to our canvas by following the previous steps(just as you added the background picture to the project), make sure the canvas object is selected and double-click the wallpaper you just added and a new object is going to be added to the canvas as shown here:


depending on the size of your picture the image is going to appear inside your canvas. now that you got your picture all you have to do is resize the image to fit the canvas size and select the stretch mode that fits your needs:


now that we got everything setup hit F5 once again and you will see how fast and without any troubles you've created a wonderful GUI in just few minutes of work!


For those who care about it here is the XAML generated code that as you will notice its very clean, simple and small so no generated crap as many editors does out there:


Now that we know how to group objects, create animations and add files to our project i think its time to use them and create something more useful. for that we're going to load several pics and try to create a menu for our GUI in my case i took @ES files but you're free to use your own ones. after you added all the files you want to your project add some animations and as usual do not forget to add the necessary triggers and remove the standard triggers added by newly added animations.



after adding animations you can also proceed and add code-behind triggers in order to add the behaviour you're expecting to see in your application.


Note:
I intentionally used the .ToLower() several times in my code because i wanted to make it easy to understand for beginners.

Here is a video of the GUI i just created and some of its behaviour:


To be continued...

__________________

Current development tools:

Visual C++.net, Visual C#.net
Visual VB.net, Visual Webdeveloper.net
Bloodshed Dev C++, Borland C++
Visual Basic 6

---

Last edited by @ruantec; November 6th, 2010 at 20:31..

[omegadox]

Nice, I never head of blend studio, but I have made one small MD6 hasher program that uses WPF Graphics.

md6hasher - Project Hosting on Google Code

__________________
Current Projects
Eimu - Chip8X Emulator
Super64 - N64 Emulator

Emulators are for learning, fun and success and not for demanding gamers and freeloaders.

:: I love my Monarch girl ::

[raksmey1309]

Wow Thank U tecman I will try follow instruction.

__________________
I am the keyblade that, hopefully, will unlock your heart someday.

Proud to be Asian, proud to be Cambodian.
CPU: intel Core i7 3770 - GPU: nVidia GTX 660
M/B: Asrock Extreme 4M - RAM: DDR3 8GB bus 1600 MHz
HDD: 3TB SATA 3 7200rpm - Windows 7 64bits SP1

[Bill_gates]

thanks for writing this tutorial. Your english is fine so far. Im following along!

__________________
OS: WinXP Professional Service Pack 3
CPU: Intel pentium 4 3.0GHz
Video: Nvidia Geforce 8400GS
Sound: ASUS Xonar DS 7.1 Channels 24-bit 192KHz PCI Interface Audio Card
Memory: 512 MB
HD: [C:] 140.36/449.09 GB
Connection: Marvell Yukon 88E8053 PCI-E Gigabit Ethernet Controller

[@ruantec]

Originally Posted by Bill_gates

thanks for writing this tutorial. Your english is fine so far. Im following along!

Am updating the tutorial now and i will try to add new stuff daily if i can so stay tune and i hope it help you to learn how to design your GUI's. right now we're in the boring part as am showing how to do the basic stuff but once i finish the basic things i will start with advanced GUI design such as the one i use in @ES.

Originally Posted by omegadox

Nice, I never head of blend studio, but I have made one small MD6 hasher program that uses WPF Graphics.

md6hasher - Project Hosting on Google Code

Yeah, not many people know about it even if is probably the best Editor available out there for design as well as for application development. i wish OSX or Linux had such a tool

Originally Posted by raksmey1309

Wow Thank U tecman I will try follow instruction.

Glad you like it

__________________

Current development tools:

Visual C++.net, Visual C#.net
Visual VB.net, Visual Webdeveloper.net
Bloodshed Dev C++, Borland C++
Visual Basic 6

[LoRd_SnOw]

Great, now i will actually get to see how this is done with blend

__________________
Development Blog

[@ruantec]

Sorry for the lack of updates but i've been very busy today after i got home from work and couldn't continue the tutorial. tomorrow am planning to start with more advanced stuff as well as video/audio, 3D usage and of course the creation and use of layers.

if anyone have a question, doubts or probably an idea feel free to write it here.

__________________

Current development tools:

Visual C++.net, Visual C#.net
Visual VB.net, Visual Webdeveloper.net
Bloodshed Dev C++, Borland C++
Visual Basic 6

[@ruantec]

Here is the source code for everyone interested to know what i did in the last part of my tutorial.

How to:
- Right-click the application in order to rotate the UI and move the mouse over the menu items.

- Drop a pic to the screen to change the Wallpaper(you can see the code in the source).

Attached Files

WPF_Tutorial 02 - AES.rar (1.86 MB, 51 views)

__________________

Current development tools:

Visual C++.net, Visual C#.net
Visual VB.net, Visual Webdeveloper.net
Bloodshed Dev C++, Borland C++
Visual Basic 6

---

Last edited by @ruantec; November 7th, 2010 at 00:14..

[entredosaguas]

Great tutorial! thanks!

[@ruantec]

Sorry for the late reply and thank you!

I wrote the tutorial as basic as possible to make it easy to understand. However the proper way to do it is by using MVVM coding pattern which i didn't used on porpuse not to confuse people that much in the basic stage. Still i'm planning to update the tutorial when i get some free time and show how real advanced stuff is done as well as the use of bindings and MVVM coding pattern that makes the code cleaner, faster, easier and more usable for unit testing.

__________________

Current development tools:

Visual C++.net, Visual C#.net
Visual VB.net, Visual Webdeveloper.net
Bloodshed Dev C++, Borland C++
Visual Basic 6