Geeks With Blogs
RizwanSharp; Sharp Technology with RizwanSharp

Let's start the WPF Learning Series of articles with definition and analysis of two terms which are used interchangeably when thinking of and working on Human Computer Interaction.

User Interface (UI) vs User Experience (UX)

We’ve been seeing and using software for decades. Though the purpose of computer and software is still the same today when comparing to the past but the way we interact with computers today has dramatically changed the way it used to be in the past. Having a look back at 1970's, we used to interact with computers with a command-line user-interface where we had to issue some text based commands to a computer, having computer process those commands and returning some results back on the console in the same text based manner. Computers through the software they were running used to notify us if we had typed something wrong which was not understandable by it and/or ultimately telling the things to make sure to rectify the errors to proceed further.

As mentioned above, the purpose of computer and software today is still the same as it used to be in the past but human computer interaction is much more mature today. Our interaction with computer is not only based on a typical input device which enables us to input some text commands and a black & white screen to see the results back. Today, we interact with computers in more natural way (the way, we do with other living things in our environment). It’s not a fiction anymore to interact with computers through voice commands and some sophisticated types of input/output devices which ultimately make the experience very natural for computer users. Imagine a world of computer where everything looks and behaves like a real object; a received email pops up a letter symbol in front of you with a sound, you open it with your hands by touching the screen, letter unfolds itself in front of you with sound and so on. This all has been made possible due to collective advancements in software and hardware technologies. Today, it’s not a luxury to have 1 GB of memory, high speed and high capacity hard disk, a good GPU, a high speed CPU, and a plethora of types of input/output devices.

To conclude the discussion on User Interface and User Experience, we can say that UI is just a component of a larger term UX where UI with other components collectively make the user experience better. And UX is all a user’s experiences from software interaction point of view. So ideally speaking, a UX can incorporate basic input controls, 2D and 3D animations, audio and speech capabilities and other media.

Where the inspiration comes from?

Inspiration to work on a technology like WPF comes from the limitation of previous technologies used by developers to develop a better UX. There were/are technologies available like GDI to build basic UI and technologies like DirectX and OpenGL for building UX for games but what if a business developer needs some cool UX in the software he/she is working on? He/She had to learn different technologies to make this happen. Argh… What’s this? One software, more than one technologies just for a single UX. On the other hand, frankly speaking DirectX and OpenGL are not really for a business developer but these are the technologies for game programmers who are well aware of all that geometry stuff to rotate some sphere, showing shadows, managing views and bla bla. A typical business developer is more concerned with the task in hand that how to validate this information, how data is being processed and how to present and save results. Why he would learn geometry stuff to handle different aspects of graphics, which is a really time consuming work.

As a result of this, many UX designers ended up using gradient styled images on the back of windows, containers and buttons, and using animated images (GIFs) for the animation effects which they could not even start and stop or changing the flow programmatically. And others started buying some third party controls, though these controls were better looking than the standard set of controls available to windows programmers but they also had some limitations like not being able to paint some special area of control, seeing a killing flicker while resizing them and so on plus these were full of un-resolved bugs.

What is WPF?

In simple, Windows Presentation Foundation is a rich set of libraries (API) for UX development which is accessible by both designers and developers through a declarative language called “Extensible Markup Language” (XAML). In this article, we are just focusing on introduction to WPF and its usefulness in UX and I'll be ignoring XAML for now. We’ll be looking at XAMl “zammel” in detail in the next article. WPF is the technology which makes it possible to very easily build better UXs incorporating all the components and features explained above. WPF is one of the four technologies added to version two of .Net Framework ultimately making it .Net 3.0. So what you need to have installed on your machine is .Net Framework 3.0 or above to run a WPF application.

Features of WPF

There was really a need of some nice technology which may address all those issues, providing a concise and unified programming model etc. Fortunately today, we have WPF.

WPF has the following features:

  • Rich Integration:

As mentioned above that in the past, if a developer needed to incorporate animation and/or speech support in UX of a software, he/she needed to learn other technologies which was really not desired by him/her. Using the WPF, its now possible to incorporate nice looking UI elements, 2D and 3D animations, audio, video, speech in the UX of a software. WPF not only provides a built in support for all the types of media which a developer may wish to incorporate in the software UX he/she is working on but also a consistent programming model to access all those resources.

  • Resolution Independence:

In WPF world it does not matter if you see the visual part of a software on and 15” monitor or on a 60” plasma screen because WPF is based on vector graphics and vector graphics are resolution independent which means that they are redrawn to suite the underlying resolution of a screen on which they are being viewed.

  • Hardware Acceleration

Internally, WPF uses Direct3D which is a part of DirectX and Direct3D uses hardware acceleration which means that all rendering work is offloaded to the Graphics Processing Unit (GPU) which is able to do such type of work faster than a general purpose CPU can do. But in case there is no capable GPU hardware available on machine WPF manages it the other way.

  • Declarative Programming

WPF provides a consistent declarative programming model through Extensible application Markup Language (XAML) using which you define the objects’ hierarchy and relationship and leave the rest to be done by parser and compiler. XAML, being a consistent language lets both designers and developers can contribute on a single project because tools used by both group of people understand XAML. (we’ll be talking on XAML in detail in the next article)

  • Backward Compatibility

WPF provides backward compatibility with previous Microsoft technologies like Windows Forms and ActiveX. It means your existing investments are secured and Windows Forms and ActiveX controls can still be used the same way in WPF application. We’ll address the topic in one of the future articles when talking about the WPF Inheritability.

  • Types of Applications

In WPF, you can create both a standalone application which compiles to an .exe file as well as an application which can be hosted in a browser such as Internet Explorer from Microsoft and compiles to XBAP. And the good thing is that for targeting both types of applications, we follow the same programming model. We’ll be looking at the topic in future articles.

What WPF can Do?

I hope you have seen Microsoft Surface Computing Platform, Yes you can see the power of WPF in Microsoft Surface computer. For more information please have a look at this.

Yahoo Inc. has also implemented a new version of it famous IM client “Yahoo Messenger” for Windows Vista in WPF. If you are running Windows Vista, you can download from here and play with it.

And Last but not least, New York Times Reader Application has also been developed in WPF.

Here I’m linking to some of the URLs of browser hosted WPF applications (XBAP) on which you can have a look to see what kind of experience WPF can provide.

  1. WPF Analog Clock
  2. WoodGrove Finance Application
  3. Xceed WPF Data Grid

These are just the examples of what we can do with WPF.

Conclusion

WPF is the technology which will be used to build rich user experiences on the windows platform in next few years and make the fictions possible you used to see about the software UX in movies.

Assessment

After reading this article you should be able to define:

  1. Difference between UI and UX
  2. What is WPF?
  3. Resolution Independence.
  4. Hardware Acceleration.
  5. Types of applications built with WPF.
  6. Declarative Programming Model.

What's next?

This article was all theoretical and may have bored some of the readers who are always eager to write some code but it was important to understand the basic knowledge of what is WPF and why it should be learned and used? Plus beginners should also get maximum output from the WPF. In the next article (within a week), we’ll be looking at XAML so we’ll be writing some code in both XAML and C#.

So, if you have joined me in WPF learning and are interested in the next articles, please get your machines equipped with:

  1. Microsoft Visual Studio 2008
  2. Microsoft Expression Blend

Feedback

I’m looking forward for your comments, recommendations and questions...

Best Regards & Best of Luck,

Rizwan a.k.a RizwanSharp

Posted on Sunday, December 16, 2007 11:20 PM WPF , .Net | Back to top


Comments on this post: An Introduction to WPF (Part 1 of WPF Learning Series)

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
thanks for the great article rizwan
Hope ur articles will teach me more about wpf and xaml thanks again
Left by Hassaan on Dec 17, 2007 1:25 AM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Hassan,
I am happy that you liked the article. Will be posting the next article within a week. Please stay tuned to my blog and hope you'll have a great learning time.
Best Regards,
Rizwan a.k.a RizwanSharp
Left by RizwanSharp on Dec 17, 2007 1:29 AM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Thanks for your greate article, man.
I really love the way you guid me, felt good, I think I couldn't wait to read the following article, thanks again.
Left by XiaoYong Dai on Dec 17, 2007 11:58 AM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi master,

Thanks for this perfect article! When I read "resolution independence and vector based", I smiled and thought about where the technology came and is going! I haven't checked the examples but I will check them as soon as possbile..

Take care and give us more informations about WPF when you will learn!
Left by Soner ALTIN on Dec 17, 2007 12:27 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Thanks Soner and Xiao,

Great! that you enjoyed and appreicated first article and hope you'll also like what is coming in the next articles.

Best Regards,
Rizwan a.k.a RizwanSharp
Left by RizwanSharp on Dec 17, 2007 12:31 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
hi RiX
though its not at all related to my field and passed way beyond my mental level :( but i can still say its very well written whatsoever it is .. i love U :P
plz try to focus on technical documenmtation issues also, so that this blog can be fruitful for me also

cheerssssssss :)
Left by Salman on Dec 17, 2007 2:51 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Rizwan

Its nice to read such a helpful article for me as i am related to this field as well. I am looking to work in the new set of technologies in new .NET Frameworks like WPF, WCF etc. So, i am waiting for the next articles from your side to start work on it.

Thanks
Usman
Left by Usman Iftikhar on Dec 17, 2007 3:27 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Thanks for the comments Usman!

Yes I'll be covering WCF after completing the WPF series. Stay tuned for XAML stuff in the next article.

Best Regards,
Rizwan a.k.a RizwanSharp
Left by RizwanSharp on Dec 17, 2007 5:04 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi,
Article is very cool and especialy the historical context.
Links are also very helpful.
Hope that we will find the valuable information in future also.

Thanks
Left by Asif Mushtaq on Dec 17, 2007 5:37 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
that was great article !!
this article is make me clearly about WPF
and easy to understand

thank you !

WPF is very interesting ^_^
Left by RAGOpoR on Dec 17, 2007 6:36 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Great introduction article!

I'm starting now with VS2008 and I hope learn about WPF in this blog :)

Keep it up!

Regards.
Left by vtortola on Dec 17, 2007 6:37 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Congratulates Rizwan for this Wonderful Article

and i have a question ... XAML .. Should the developer learn XAML to make his Application or it will not be his business and it will be the Designer's responsibility ?

um waiting WF and WCF man :)
Left by Mohamed Gamal El-Din on Dec 18, 2007 12:50 AM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Gamal,

You will get your answer in the next article which will be full-fledged on XAML. And trust me its not difficult at all, you just need to know the basic rules.

Best Regards,

Rizwan a.k.a RizwanSharp


Left by RizwanSharp on Dec 18, 2007 3:12 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Riz! this is great Article and i m now waiting for your next article in which you will write some code...
Keep it up dear

Best Regards,
Waqas Aziz
Left by Waqas on Dec 18, 2007 6:31 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Mr. Rizwan

As a senior developer with tens of large windows applications, at first site i didn't believe in this new technology, and didn't pay attention on that too much. By reading this article, and the links you provide for some good-looking aps, I will definitelly start playing with it (I already have VS2008 :) ). Keep up the good work and i'm looking forward to read the next of your articles.

Best wishes,
Boban
Left by boban.s on Dec 18, 2007 11:08 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hello Rizwan
I must say that I am really impressed with this article not because its well written and detailed but also very informative. The examples you have added are great. They provide a strong visual imagination of how WPF actually works. I believe all above of the above people including myself are looking forward for your next article to help us learn WPF in depth.
So, Giddy-up and get started!!! :)
Regards,
-Bisma
Left by Bisma Siddiqui on Dec 19, 2007 7:04 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
It is really very helpful article, and I waiting for next part of it... :)

Thanks
Regards,
Muhammad Akhtar Shiekh
Left by Muhammad Akhtar Shiekh on Dec 30, 2007 12:17 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Rizwan,

If you don't mind, I'd like to host a link to your article on my site, WindowsClient.NET.

Would this be okay? (Feel free to e-mail me directly.)

Thanks,

Michael :-)
Left by Michael Hendrick on Jan 16, 2008 11:21 AM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
thank u
Left by DEW on May 11, 2008 4:45 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Rizwan, thanks for giving a wonderful article ,i m new to wpf n it really gave me gud knowldge abt wpf.keep posting good articles like this.
Left by Punit Singhi on Mar 12, 2009 5:25 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Really a very informative article,,, The way you have started is really very appealing...from level 0 and onwards ..... :)


Can you please elaborate your line "the use of XAML is optional when working with WPF".

Regards,
Saira.
Left by Saira Jabeen on Mar 17, 2009 12:54 PM

# re: An Introduction to WPF (Part 1 of WPF Learning Series)
Requesting Gravatar...
Hi Saira,

Thanks for the feedback :). Your answer has been answered in the http://geekswithblogs.net/RizwanSharp/archive/2007/12/31/deep-dive-into-xaml-part-2-of-wpf-learning-series.aspx. Optional in a sense that everything that can be done in XAML can also be done in C# (but ofcourse XAML is preferred for many reasons).

I hope that answers your question.

Thanks & Best Regards,
Rizwan
Left by RizwanSharp on Mar 17, 2009 2:05 PM

Your comment:
 (will show your gravatar)


Copyright © RizwanSharp | Powered by: GeeksWithBlogs.net