Complete WPF Overview Tutorial with Example - iFour Technolab

1. WPF Overview iFour Consultancy https://www.ifourtechnolab.com/wpf-software-development

2. What is WPF? • WPF, which stands for Windows Presentation Foundation, is Microsoft's latest approach to a GUI framework, used with the .NET framework. • WPF , previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006 , and then so many other features were added in the subsequent .NET framework versions. • It is a powerful framework for building Windows applications. • WPF offers Separation of Appearance and Behaviour. • WPF contains features that will help you develop rich windows applications. • WPF employs XAML, an XML-based language, to define and link various interface elements. • WPF has a built-in set of data services to enable application developers to bind and manipulate data within applications https://www.ifourtechnolab.com/wpf-software-development

3. Architecture of WPF • The major components of WPF architecture are as shown in the figure. The most important code part of WPF are − • Presentation Framework • Presentation Core • Milcore • The architecture of WPF can be classified into three layers, • Managed Layer • Unmanaged Layer • Core API Layer Managed Layer • The Presentation Framework : This DLL consists of all classes that are required to create the WPF UI. This wraps up the controls, data bindings, styling, shapes, media, documents, annotations, animation and more. • Presentation core : This is a low-level API exposed by WPF providing features for 2D, 3D, geometry and so on.  https://www.ifourtechnolab.com/wpf-software-development

4. Unmanaged layer • Milcore is a part of unmanaged code which allows tight integration with DirectX (responsible for display and rendering). • WindowsCodecs : WindowsCodecs provides Imaging support in WPF. Image display, processing, scaling and transform are all handled by WindowsCodecs • CLR makes the development process more productive by offering many features such as memory management, error handling, etc. • Core API Layer • This layer has OS core components like Kernel, User32, GDI, Device Drivers, Graphic cards etc. These components are used by the application to access low-level APIs. User32 manages memory and process separation. • DirectX : DirectX is the low-level API through which WPF renders all graphics. DirectX talks with drivers and renders the content. • GDI : GDI stands for Graphic Device Interface. GDI provides an expanded set of graphics primitives and a number of improvements in rendering quality. https://www.ifourtechnolab.com/wpf-software-development

5. WPF Advantages • In the earlier GUI frameworks, there was no real separation between how an application looks like and how it behaved. • In WPF, UI elements are designed in XAML while behaviors can be implemented in procedural languages such C# and VB.Net. So it very easy to separate behavior from the designer code. • With XAML, the programmers can work in parallel with the designers. • The separation between a GUI and its behavior can allow us to easily change the look of a control by using styles and templates. • Easier animation and special effects. • Support rich data visualization. • UIs are completely re-sizable without loss of quality. https://www.ifourtechnolab.com/wpf-software-development

6. WPF Features https://www.ifourtechnolab.com/wpf-software-development

7. XAML Overview iFour Consultancy https://www.ifourtechnolab.com/wpf-software-development

8. Index • What is XAML? • Advantages of XAML • Basic Syntax of XAML • Namespaces • Why XAML in WPF https://www.ifourtechnolab.com/wpf-software-development

9. What is XAML? • XAML stands for Extensible Application Markup Language • Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. • Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF (Workflow Foundation) and for electronic paper in the XPS standard. • All classes in WPF have parameterless constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML. https://www.ifourtechnolab.com/wpf-software-development

10. Advantage of XAML • It very easy to create, initialize, and set properties of objects with hierarchical relations. • XAML code is short and clear to read • Separation of designer code and logic • Graphical design tools like Expression Blend require XAML as source. • The goal of XAML is to enable visual designers to create user interface elements directly. • All you can do in XAML can also be done in code. XAML is just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. https://www.ifourtechnolab.com/wpf-software-development

11. Basic Synatx of XAML • When you create your new WPF project, you will encounter some of the XAML code by default in MainWindow.xaml as shown below. https://www.ifourtechnolab.com/wpf-software-development

12. https://www.ifourtechnolab.com/wpf-software-development

13. Syntax • The syntax of an Object element starts with a left angle bracket (<) followed by the name of an object, e.g. Button. • Define some Properties and attributes of that object element. • The Object element must be closed by a forward slash (/) followed immediately by a right angle bracket (>). https://www.ifourtechnolab.com/wpf-software-development

14. Syntax • Example of simple object with no child element <Button/> • Example of object element with some attributes <Button Content = "Click Me" Height = "30" Width = "60" /> </StackPanel> https://www.ifourtechnolab.com/wpf-software-development

15. Syntax • Example of an alternate syntax do define properties (Property element syntax) <Button> <Button.Content>Click Me</Button.Content> <Button.Height>30</Button.Height> <Button.Width>60</Button.Width> </Button> • Example of Object with Child Element: StackPanel contains Textblock as child element <StackPanel Orientation = "Horizontal"> <TextBlock Text = "Hello"/> </StackPanel> https://www.ifourtechnolab.com/wpf-software-development

16. Namespaces • At the beginning of every XAML file you need to include two namespaces. • The first is http://schemas.microsoft.com/winfx/2006/xaml/presentation. It is mapped to all wpf controls in System.Windows.Controls. • The second is http://schemas.microsoft.com/winfx/2006/xaml it is mapped to System.Windows.Markup that defines the XAML keywords. https://www.ifourtechnolab.com/wpf-software-development

17. Why XAML in WPF? • Both XAML & WPF are independent pieces of technology. • For better Understanding, let us create a window with a button in it using XAML as below : https://www.ifourtechnolab.com/wpf-software-development

18. Output : https://www.ifourtechnolab.com/wpf-software-development

19. In case you choose not to use XAML in WPF, then you can achieve the same GUI result with procedural language as well. Let’s have a look at the same example, but this time, we will create a button in C# https://www.ifourtechnolab.com/wpf-software-development

20. From the above example, it is clear that what you can do in XAML to create, initialize, and set properties of objects, the same tasks can also be done using code. • So below are the two less known facts about XAML : • WPF doesn't need XAML • XAML doesn't need WPF https://www.ifourtechnolab.com/wpf-software-development

21. Element Tree iFour Consultancy https://www.ifourtechnolab.com/wpf-software-development

22. Element Tree • Windows Presentation Foundation (WPF) has a comprehensive tree structure in the form of objects. In WPF, there are two ways that a complete object tree is conceptualized − • Logical Tree Structure • Visual Tree Structure • There are many technologies where the elements and components are ordered in a tree structure so that the programmers can easily handle the object and change the behavior of an application. • Mostly, WPF developers and designers either use procedural language to create an application or design the UI part of the application in XAML keeping in mind the object tree structure. https://www.ifourtechnolab.com/wpf-software-development

23. Logical Tree Structure • In WPF applications, the structure of the UI elements in XAML represents the logical tree structure. In XAML, the basic elements of UI are declared by the developer. The logical tree in WPF defines the following − • Dependency properties • Static and dynamic resources • Binding the elements on its name etc. https://www.ifourtechnolab.com/wpf-software-development

24. Let’s have a look at the following example in which a button and a list box are created. https://www.ifourtechnolab.com/wpf-software-development

25. Visual Tree Structure • In WPF, the concept of the visual tree describes the structure of visual objects, as represented by the Visual Base Class. It signifies all the UI elements which are rendered to the output screen. • When a programmer wants to create a template for a particular control, he is actually rendering the visual tree of that control. The visual tree is also very useful for those who want to draw lower level controls for performance and optimization reasons. • In WPF applications, visual tree is used for − • Rendering the visual objects. • Rendering the layouts. • The routed events mostly travel along the visual tree, not the logical tree. https://www.ifourtechnolab.com/wpf-software-development

26. Visual Tree Structure • In WPF, the concept of the visual tree describes the structure of visual objects, as represented by the Visual Base Class. It signifies all the UI elements which are rendered to the output screen. • When a programmer wants to create a template for a particular control, he is actually rendering the visual tree of that control. The visual tree is also very useful for those who want to draw lower level controls for performance and optimization reasons. • In WPF applications, visual tree is used for − • Rendering the visual objects. • Rendering the layouts. • The routed events mostly travel along the visual tree, not the logical tree. https://www.ifourtechnolab.com/wpf-software-development

27. https://www.ifourtechnolab.com/wpf-software-development

28. https://www.ifourtechnolab.com/wpf-software-development

29. The logical tree leaves out a lot of detail enabling you to focus on the core structure of the user interface and to ignore the details of exactly how it has been presented. • The logical tree is what you use to create the basic structure of the user interface. • The visual tree will be of interest if you're focusing on the presentation. For example, if you wish to customize the appearance of any UI element, you will need to use the visual tree. https://www.ifourtechnolab.com/wpf-software-development

30. Layout iFour Consultancy https://www.ifourtechnolab.com/wpf-software-development

31. Layout • The layout of controls is very important and critical for application usability. It is used to arrange a group of GUI elements in your application. There are certain important things to consider while selecting layout panels − • Positions of the child elements • Sizes of the child elements • Layering of overlapping child elements on top of each other • Fixed pixel arrangement of controls doesn’t work when the application is to be sed on different screen resolutions. XAML provides a rich set of built-in layout panels to arrange GUI elements in an appropriate way. Some of the most commonly used and popular layout panels are as follows − https://www.ifourtechnolab.com/wpf-software-development

32. https://www.ifourtechnolab.com/wpf-software-development

33. https://www.ifourtechnolab.com/wpf-software-development

34. Nested Layout iFour Consultancy https://www.ifourtechnolab.com/wpf-software-development

35. Nesting layout • Nesting of layout means the use layout panel inside another layout, e.g. define stack panels inside a grid. This concept is widely used to take the advantages of multiple layouts in an application. https://www.ifourtechnolab.com/wpf-software-development

36. Considering example of real world wherein we used grid layout for outlining and used stackpanel to display controls inside it. https://www.ifourtechnolab.com/wpf-software-development

37. Output – https://www.ifourtechnolab.com/wpf-software-development

38. Controls iFour Consultancy https://www.ifourtechnolab.com/wpf-software-development

39. Controls • Windows Presentation Foundation (WPF) allows developers to easily build and create visually enriched UI based applications. • The classical UI elements or controls in other UI frameworks are also enhanced in WPF applications. • All of the standard WPF controls can be found in the Toolbox which is a part of the System.Windows.Controls. • These controls can also be created in XAML markup language. https://www.ifourtechnolab.com/wpf-software-development

40. Control Library Building Blocks • ToolTip • Thumb • Border • Popup • Document Viewers • Frame • Ranges • Containers • Grid Layout • Label • Buttons • Editors • Lists • Menus and toolbars • Scroll Viewer https://www.ifourtechnolab.com/wpf-software-development

41. Grid Layout • Grid • Column Definition • Row Definition • Grid Lines https://www.ifourtechnolab.com/wpf-software-development

42. Labels • The Label control, in its most simple form, will look very much like the TextBlock which we used in another article. You will quickly notice though that instead of a Text property, the Label has a Content property. The reason for that is that the Label can host any kind of control directly inside of it, instead of just text. <LabelContent="This is a Label control."/> https://www.ifourtechnolab.com/wpf-software-development

43. Buttons https://www.ifourtechnolab.com/wpf-software-development

44. Editors • PasswordBox • TextBox • RichTextBox • InkCanvas https://www.ifourtechnolab.com/wpf-software-development

45. List • Four standard list controls- ListBox, ComboBox, ListView, TreeView. • List controls can be filled from one of the two sources. 1. Items Property 2. ItemsSource Property. https://www.ifourtechnolab.com/wpf-software-development

46. List View • List view derives from listBox • It has ability to separate view properties from control properties. • View property must be changed to grid view ad set properties on that object. https://www.ifourtechnolab.com/wpf-software-development

47. Tree view <TreeView> <TreeViewItem Header='Coders'> <TreeViewItem Header='Don' /> <TreeViewItem Header='Dharma' /> </TreeViewItem> <TreeViewItem Header='Noncoders'> <TreeViewItem Header='Chris' /> </TreeViewItem> </TreeView> https://www.ifourtechnolab.com/wpf-software-development

48. New Lists using Templates https://www.ifourtechnolab.com/wpf-software-development

49. Menus & ToolBars https://www.ifourtechnolab.com/wpf-software-development

50. Expander <Windowx:Class="GroupBoxDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="GroupBox Demo" Width="250" Height="180">     <Grid> <Expander Header=“Description" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" IsExpanded="False" Height="299" Width="497"> <TextBlockTextWrapping="Wrap" Text="This is some text content." Margin="5"/> </Expander>     </Grid> </Window> • Expander is a layout in which we can add control and expand it when we need. When have less space in our application then we can use expander layout. • We can assign the expand direction either down, up, left or right. • At the time of expander creation we can assign IsExpanded property true or false. It has the same drawback as GroupBox that it can contain only one control. https://www.ifourtechnolab.com/wpf-software-development