Professional Documents
Culture Documents
You may want to try: PSAM WPF Control Library WPF Tutorial : Beginning
9,210,424 members and growing! Email Password Sign in Join highlights off Lost password?
Home
Articles
Quick Answers
Discussions
Zones
Features
Community
Help!
introduction to wpf
See Also
More like this More by this author
Introduction
Introduction What is the need for WPF when we have GDI, GDI+, and DirectX? How does hardware acceleration work with WPF? Does that mean WPF has replaced DirectX? Can we define WPF in a precise way? What is XAML? Is XAML meant only for WPF? Can you explain the overall architecture of WPF? Which are the different namespaces and classes in WPF? The different elements involved in a WPF application What are dependency properties? Are XAML files compiled or built at runtime? Can you explain how we can separate code and XAML? How can we access XAML objects in behind code? What is Silverlight? Can Silverlight run in other platforms other than Windows? Come on, even WPF runs under browser, why Silverlight? What is the relationship between Silverlight, WPF, and XAML? Can you explain the Silverlight architecture? Source code Other Silverlight FAQ
Related Articles
Introduction to Attached Behaviors in WPF Introduction to WPF Introduction to WPF Templates Introduction to the WPF DataGrid WPF Introduction: Databinding +
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
1/18
Styles + IValueC onverter Introduction to C omposite WPF (C AL, Prism): Part 1 Introduction to C omposite WPF (C AL, Prism): Part 2 Introduction to WPF Data Binding Introduction to D3DImage An Introduction to Silverlight Introduction to wxWidgets - 2. RavenDB - An Introduction Introduction to Anthem.NET Introduction to .NET Introduction to NLog Introduction to wxWidgets WC F by Example - Introduction SilverLight Introduction XLINQ Introduction Part 3 Of 3 Introduction to WF (Part01) LINQ Introduction Part 1 Of 3
Introduction
This article talks about 21 important FAQ from the perspective of WPF and Silverlight. Both of these technologies are connected to a certain extent. This article not only explains the theory aspect of these technologies, but also shows small samples for each of them. Heres a complete free e-book covering 400 FAQ for C#, SQL Server, WPF, WWF, WCF, and a lot more, feel free to download it and enjoy: http://www.questpond.com/SampleDotNetInterviewQuestionBook.zip.
What is the need for WPF when we have GDI, GDI+, and DirectX?
First lets try to understand how Microsoft display technologies have evolved: User32: This provides the Windows look and feel for buttons and textboxes and other UI elements. User32 lacked drawing capabilities. GDI (Graphics Device Interface): Microsoft introduced GDI to provide drawing capabilities. GDI not only provides drawing capabilities but also a high level of abstraction on hardware display. In other words, it encapsulates all complexities of hardware in the GDI API. GDI+: GDI+ was introduced which basically extends GDI and provides extra functionalities like JPG and PNG support, gradient shading, and anti-aliasing. The biggest issue with the GDI API was it did not use hardware acceleration and did not have animation and 3D support. Note: Hardware acceleration is a process in which we use hardware to perform some functions www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight 2/18
rather than performing those functions using software running in the CPU. DirectX: The biggest issues with GDI and its extension GDI+ are hardware acceleration and animation support. This came as a big disadvantage for game developers. To answer and serve game developers, Microsoft developed DirectX. DirectX exploited hardware acceleration, had support for 3D, full color graphics, media streaming facility, and lots more. This API did not mature in the gaming industry. WPF: Microsoft had 3 to 4 different APIs for display technologies, so why one more? DirectX had this excellent feature of using hardware acceleration. Microsoft wanted to develop UI elements like textboxes, buttons, grids, etc., using the DirectX technology by which they could exploit the hardware acceleration feature. As WPF stands on top of DirectX, you can not only build simple UI elements but also go one step further and develop special UI elements like G i , F o D c m n , rd lwouet and E l p e Oh yes, you can go one step further and build animations. WPF is not meant for lis. game development. DirectX still will lead in that scenario. In case you are looking for light animation (not game programming), WPF will be a good choice. You can also express WPF using XML which is also called as XAML. In other words, WPF is a wrapper built over DirectX. Lets now define WPF.
WPF is a collection of classes that simplifies building dynamic user interfaces. Those classes include a new set of controls, some of which mimic old UI elements (such as L b l T x B x ae, eto, B t o ), and some that are new (such as G i , F o D c m n , and E l p e utn rd lwouet l i s ).
The WPF API first detects the level of hardware acceleration using parameters like RAM of video card, per pixel value, etc. Depending on that, it uses a Tier 0, Tier 1, or Tier 2 rendering mode. Tier 0: If the video card does not support hardware acceleration, then WPF uses the Tier 0 rendering mode. In other words, it uses software acceleration. This corresponds to the working of DirectX versions less than 7.0. Tier 1: If the video card supports partial hardware acceleration, then WPF uses the Tier 1 rendering mode. This corresponds to working of DirectX versions between 7.0 and 9.0. Tier 2: If the video card supports hardware acceleration, then WPF uses the Tier 2 rendering mode. This corresponds to working of DirectX versions equal or greater than 9.0.
No, WPF does not replace DirectX. DirectX will still be needed to make cutting edge games. The video performance of DirectX is still many times higher than the WPF API. So when it comes to game development, the preference will always be DirectX and not WPF. WPF is not an optimum solution to make games. Oh yes, you can make a tic tac toe game with it but not high action animation games. One point to remember: WPF is a replacement for Windows Forms and not DirectX.
What is XAML?
XAML (pronounced as Zammel) is a declarative XML-based language by which you can define objects and properties in XML. A XAML document is loaded by a XAML parser. The XAML parser instantiates objects and sets their properties. XAML describes objects, properties, and the relations between them. Using XAML, you can create any kind of objects, graphical or non-graphical. WPF parses the XAML document and instantiates the objects and creates the relations defined by the XAML. So XAML is an XML document which defines objects and properties and WPF loads this document in actual memory.
The above figure shows the overall architecture of WPF. It has three major sections: presentation core, presentation framework, and Milcore. In the same diagram, we can see how other sections like DirectX and Operating System interact with the system. So lets go section by section to understand how everything works. User32: It decides what goes where on the screen. DirectX: As said previously, WPF uses DirectX internally. DirectX talks with drivers and renders the content. Milcore: Mil stands for media integration library. This section is unmanaged code because it acts www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight 4/18
like a bridge between the WPF managed and the DirectX / User32 unmanaged API. Presentation core: This is a low level API exposed by WPF providing features for 2D, 3D, geometry, etc. Presentation framework: This section has high level features like application controls, layouts, content, etc., which helps you build up your application.
There are ten important namespaces / classes in WPF. System.Threading.DispatcherObject All WPF objects derive from D s a c e O j c . WPF works on an STA model, i.e., Single Threading ipthrbet Apartment model. The main duty of this object is to handle concurrency and threading. When messages like mouse clicks, button clicks, etc., are initiated, they are sent to the D s a c e O j c which ipthrbet verifies whether code is running on the correct thread. In the coming sections, we will look in detail how WPF threading works. System.Windows.DependencyObject When WPF was designed, a property based architecture was considered. In other words, rather than using methods, functions, and events, object behavior will interact using properties. For now, we will only restrict ourselves to this definition. In the coming sections, we have dedicated questions for this. System.Windows.Media.Visual The V s a class is a drawing object which abstracts drawing instructions, how drawing should be done iul like clipping, opacity, and other functionalities. The V s a class also acts like a bridge between the iul unmanaged MilCore.dll and the WPF managed classes. When a class is derived from V s a , it can be iul displayed on windows. If you want to create your own customized user interface, then you can program using V s a objects. iul
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
5/18
System.Windows.UIElement
F a e o k l m n uses the foundation set by U E e e t It adds key properties like rmWrEeet Ilmn. H r z n a A i n e t V r i a A i n e t margins, etc. oiotllgmn, etcllgmn,
System.Windows.Shapes.Shape This class helps us create basic shapes such as rectangle, polygon, ellipse, line, and path. System.Windows.Controls.Control This class has controls like T x B x B t o , L s B x etc. It adds some extra properties like font, eto, utn ito, foreground and background colors. System.Windows.Controls.ContentControl It holds a single piece of content. This can start from a simple label and go down to a unit level of string in a layout panel using shapes. System.Windows.Controls.ItemsControl This is the base class for all controls that show a collection of items, such as the L s B xand ito TeVe. reiw System.Windows.Controls.Panel This class is used for all layout containerselements that can contain one or more children and arrange them as per specific layout rules. These containers are the foundation of the WPF layout system, and using them is the key to arranging your content in the most attractive and flexible way possible.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
6/18
Once we have created the WPF Application project, you will see two file types: the XAML file and the behind code, i.e., XAML.cs. XAML files are nothing but XML files which have all the elements needed to display the window's UI. Every XAML element maps to some class. For instance, the W n o element idw maps to the W f p l c t o 1 W n o 1class, B t o elements in the XAML file map to a pApiain.idw utn S s e . i d w . o t o . u t nclass, and the G i XAML elements map to ytmWnosCnrlBto rd Sse.idw.oto.rd ytmWnosCnrlGi.
App.XAML and App.XAML.CS are the entry point files. If we you look at the code for App.XAML.CS, you will see a reference to the XAML file which needs to be loaded. The first code which runs in the application is the v i m i ( method from App.XAML.CS which in turn loads the Window1.XAML file od an) for rendering.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
7/18
We can now connect the behind code method and functions to the events in the XAML file elements.
You can see from the above code snippet how the B t o element has the C i kevent linked to the utn lc M B t o _ l c function. M B t o _ l c is the method which is in the XAML.CS behind code. So yutnCik yutnCik now if you run the code, you can see the button and if you click on it, you can see the message box.
H i h and W d hare regular properties of the R c a g e But C n a . o and C n a . e tare egt it etnl. avsTp avsLf dependency properties as they belong to the C n a class. It is used by the R c a g eto specify its avs etnl position within C n a . avs
Above is a code snippet which shows a XAML file and the code completely detached from the XAML presentation. In order to associate a class with a XAML file, you need to specify the x C a sattribute. :ls Any event specified on the XAML object can be connected by defining a method with sender and event values. You can see from the above code snippet that we have linked M C i k v n to an event in ylcEet the behind code. Note: You can find a simple sample in the WindowsSimpleXAML folder. Feel free to experiment with the code experimenting will teach you more than reading something theoretical.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
9/18
Note: You can get the source code from the WindowsAccessXAML folder.
What is Silverlight?
Silverlight is a web browser plug-in by which we can enable animations, graphics, and audio/video. You can compare Silverlight with Flash. We can view animations with Flash and its installed as a plug-in in the browser.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
10/18
So we can visualize the Silverlight architecture as a combination of some functionalities from the core .NET framework, AJAX, and some functionalities like animation, media, etc., provided by the core Silverlight framework. We can think of the Silverlight architecture as a combination of four important blocks: Some .NET Framework components: Silverlight uses some components from the .NET Framework. One of the main components is WPF. Many UI components (checkbox, button, textbox, etc.), XAML parsing, etc., are taken from the core WPF system. It also has taken components like WCF to simplify data access. It has CLR for memory management, safety checking, and garbage collection. The base class libraries of .NET are used for string manipulation, algorithms, expressions, collections, and globalization. Presentation core: The core presentation framework has functionalities to display vector 2D animations, images, media, DRM, and handles input like mouse and keyboard. Other technologies: Silverlight interacts with other technologies like AJAX and JavaScript. So it also borrows some functionalities from these technologies. Hosting: Silverlight animations finally run under the browser environment. So it has the hosting functionality which helps to host the application in the browser, expose a DOM by which JavaScript can manipulate the Silverlight components, and it also has an installer functionality which helps install the Silverlight application and plug-in in the browser environment. One of the things which you can notice from the architecture diagram is that the presentation core reads from the XAML file for rendering. XAML is a component which is part of the .NET Framework and the rendering part is done by the presentation core.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
11/18
The application is a typical HTML which runs under the browser. There are markups which instantiate the Silverlight plug-in. Now when the user interacts with the Silverlight application, it sends an event to the JavaScript system or the .NET system. This depends on which programming language you are using. The program code which is either in JavaScript or .NET can make calls to the Silverlight runtime and achieve the necessary functionalities. XAML will be read and parsed by the Silverlight runtime and then rendered in the browser.
Step 3: Once you click OK, you will see a dialog box as shown below, which has three options:
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
12/18
Add an ASP.NET web project to the solution to host Silverlight: This option is the default option, and it will create a new Web Application project that is configured to host and run your Silverlight application. If you are creating a new Silverlight application, then this is the option to go. Automatically generate a test page to host Silverlight at build time: This option will create a new page at runtime every time you try to debug and test your application. If you want to only concentrate on your Silverlight application, then this option is worth looking at. Link this Silverlight control into an existing website: If you have an existing Silverlight application, then this option helps to link the Silverlight application with the existing web application project. You will not see this option enabled in new projects, you need to have an existing web application. For this example, we have selected the first option. Once you click OK, you should see the full IDE environment for Silverlight.
So lets run through some basic points regarding the IDE view that we see. You will see there are two projects: your web application and the Silverlight application. In the Silverlight application, we have two XAML files: App.XAML and Page.XAML. App.XAML has the global level information. Step 4: Now for simplicity's sake, we just use the T x B o ktag to display a text. You can see etlc that as we type in Page.XAML, it is displayed in the viewer.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
13/18
Step 5: Now we need to consume the Silverlight application in an ASPX page. So in the HTML / ASPX page, we need to first refer to the Silverlight namespace using the R g s e attribute. eitr
<@eitrAsml=Sse.e.ivrih" %Rgse seby"ytmWbSlelgt Nmsae"ytmWbU.ivrihCnrl"Tgrfx"s"% aepc=Sse.e.ISlelgtotos aPei=ap >
We also need to refer to the S r p M n g rfrom the Silverlight name space. The citaae S r p M n g rcontrol is a functionality from AJAX. The main purpose of this control is to citaae manage the download and referencing of JavaScript libraries.
C ollapse | C opy C ode
Finally, we need to refer to the Silverlight application. You can see that in the source we have referred to the XAP file. The XAP file is nothing but a compiled Silverlight application which is compressed and zipped. It basically has all the files that are needed for the application in a compressed format. If you rename the file to a ZIP extension, you can open it using WinZIP.
C ollapse | C opy C ode
<s:ivrih I=Xm1 rnt"evr apSlelgt D"al" ua=sre" Suc=~CinBnMFrtivrihApiainxp ore"/leti/yisSleLgtplcto.a" Mnmmeso=203050 Wdh"0% Hih=10"/ iiuVrin"..10." it=10" egt"0% >
So your final ASPX / HTML code consuming the Silverlight application looks something as shown below:
C ollapse | C opy C ode
<@Pg Lnug=C"AtEetiep"re % % ae agae"# uovnWru=tu" > <@Rgse Asml=Sse.e.ivrih"Nmsae"ytmWbU.ivrihCnrl" % eitr seby"ytmWbSlelgt aepc=Sse.e.ISlelgtotos Tgrfx"s"% aPei=ap > <DCYEhm PBI "/WC/T XTL10Tastoa/E" !OTP tl ULC -/3/DD HM . rniinl/N "tp/www.r/Rxtl/T/hm1tastoa.t" ht:/w.3ogT/hm1DDxtl-rniinldd> <tlxls"tp/www.r/99xtl sye"egt10;> hm mn=ht:/w.3og19/hm" tl=hih:0%" <edrnt"evr> ha ua=sre" <il>yisSleLgtplcto<tte tteMFrtivrihApiain/il> <ha> /ed <oysye"egt10;agn0" bd tl=hih:0%mri:;> <omi=fr1 rnt"evr sye"egt10;> fr d"om" ua=sre" tl=hih:0%" <s:citaae I=SrpMngr"rnt"evr>/s:citaae> apSrpMngr D"citaae1 ua=sre"<apSrpMngr <i sye"egt10;> dv tl=hih:0%" <s:ivrih I=Xm1 rnt"evr apSlelgt D"al" ua=sre" Suc=~CinBnMFrtivrihApiainxp ore"/leti/yisSleLgtplcto.a" Mnmmeso=203050 Wdh"0% Hih=10"/ iiuVrin"..10." it=10" egt"0% > <dv /i> <fr> /om <bd> /oy <hm> /tl
Step 6: So finally set the web application as Start up and also set this page as Start up and run it. You should be pleased to see your first Silver light application running.
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
14/18
Source code
You can download the source code here.
License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
Article Top
Sign Up to vote
Poor
Excellent Vote
100/100
Sign In View Thread Permalink
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
15/18
Member 8113189
good article
Sign In View Thread Permalink My vote of 5 Ganeshpandi 11:04 29 Oct '10
koolprasad2003
Good article... i have a problem.. can we use silvelight in windows based application...
thanks in advanced... Rating always..... WELCOME Be a good listener...Because Opprtunity Knock softly... Use http://www.google.com/transliterate/ for translator
Sign In View Thread Permalink Nice article Member 4178170 23:48 26 May '10
Nice article
Sign In View Thread Permalink Great Article but is the example of dependency property right? 2:40 24 Mar '10
akjoshi
Hi, Really good article; Nicely explaind the fundamentals of WPF. I am not sure but the example you showed for dependency property looks a bit sonfusing to me; Isn't that more relevant to Attached proeprties rather then just dependency property?
Sign In View Thread Permalink Simply Superb! Arfan Baig 21:19 18 Mar '10
Cybernate
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
16/18
Well structured article. Thanks for the great work. Regards, Cybernate
Sign In View Thread Permalink Nice format! However... TheArchitectualizer 2:35 30 Jun '09
Hmm, WPF and Silverlight are both sutiable platforms for game design and development. Bill Resse created SilverSprite, a port of XNA to Silverlight; for 2D Sprite based games. WPF can leverage HSLS, DirectX, OpenGL, CUDA, PhysicsX, etc. High level 3D abstractions can be defined in XAML and lower level processing can be routed to lower level API's. Designers can still design in 3D and Developers can abstract the lower level stuff. Silverlight 3 will bring Hardware accelaration: PixelShaders, HLSL, etc. However, it is sandboxed and can not be extended. Silverlight 2 has no hardware acceleration. http://silversprite.codeplex.com/Thread/List.aspx[^] ~TheArch
Sign In View Thread Permalink What is WPF namespace? o3yoon 19:02 10 Apr '09
first I want to thank you for this great article, and last I want to help me to found discription about namespaces used in WPF? and thank you again.
Sign In View Thread Permalink good pictorial representation vikas amin 1.00/5 (1 vote) 9:39 7 Apr '09
Sign In View Thread Permalink Nice Stuff wasimsharp 19:02 30 Mar '09
Coool really good for newbie WANTED wasim khan(Killed 50 Innocent Buggs, Distroyed 200 Exception, make 5 Project Hostage) any Compnay Hire him will pay 30,000. Best place where u can get him is Sorcim Technologies Murre Road RWP
kamii47
Very nicely Explained koirala. Kamran Shahid Sr. Software Engineer (MCP, MCAD.net, MCSD.net, MCTS, MCPD.net[web]) Netprosys Inc. www.netprosys.com
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
17/18
Sign In View Thread Permalink Very Very Nice dishatera 4:32 24 Mar '09
A rtic le C opyright 2 0 0 9 by Shivpras ad koirala E verything els e C opyright C odeP rojec t, 1 9 9 9 - 2 0 1 2 T erms of U s e
www.codeproject.com/Articles/34433/21-Important-FAQ-questions-for-WPF-and-SilverLight
18/18