1. WPF chapter 15 Dr. John Abraham Professor UTPA

2. WPF –an introduction WPF provides a single platform capable of handling graphics, audio and video. WPF generates vector-based graphics that is resolution independent. WPF allows designers to define the appearance and content of a GUI by defining it in XAML. XAML (Extensible Application Markup Language) is implemented with XML

3. XAML - Extensible Application Markup Language is a declarative XML based language created by Microsoft used to initialize structured values and objects

4. XML Developed in 1996 by World Wide Web consortium Standard for describing data Used to exchange data between applications

5. What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to describe data XML tags are not predefined. You must define your own tags XML uses a Document Type Definition (DTD) or an XML Schema to describe the data XML with a DTD or XML Schema is designed to be self-descriptive XML is a W3C Recommendation - 1996

6. XML Portable, Widely supported, Open technology Standard for storing data (as text file) that are exchanged between applications. Not for displaying data No predefined tags – user supplies tags. With XML, financial information can be exchanged over the Internet

7. XML vs. HTML XML was designed to describe data and to focus on what data is. HTML was designed to display data and to focus on how data looks. HTML is about displaying information, while XML is about describing information XML can separate data from HTML

8. ARTICLE.XML file Simple XML December 6, 2001 John Doe XML is pretty easy. In this chapter, we present a wide variety of examples that use XML.

9. EXPLANATION Root element is article Child elements are title, data, author & summary To process this file, an XML parser is required, such as msxml (microsoft), Xerces (appache), etc.

10. XML rules All XML elements must have a closing tag –With XML, it is illegal to omit the closing tag. XML tags are case sensitive All XML elements must be properly nested. Following is wrong: – This text is bold and italic All XML documents must have a single root element

11. XML attributes XML elements can have attributes in the start tag, just like HTML. Attribute values must always be quoted Avoid using attributes if you can. Use child elements instead.

12. DTD A Document Type Definition defines the legal building blocks of an XML document. It defines the document structure with a list of legal elements. A "Valid" XML document also conforms to a DTD. A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a Document Type Definition (DTD) A DTD can be declared inline in your XML document, or as an external reference Your application can use a standard DTD to verify that the data you receive from the outside world is valid. You can also use a DTD to verify your own data.

13. Internal DTD <!DOCTYPE note [ ]> Tove Jani Reminder Don't forget me this weekend

14. This DTD is interpreted like this: !DOCTYPE note (in line 2) defines that this is a document of the type note. !ELEMENT note (in line 3) defines the note element as having four elements: "to,from,heading,body". !ELEMENT to (in line 4) defines the to element to be of the type "#PCDATA". !ELEMENT from (in line 5) defines the from element to be of the type "#PCDATA" and so on.....

15. External DOCTYPE declaration If the DTD is external to your XML source file, it should be wrapped in a DOCTYPE definition with the following syntax: Tove Jani Reminder Don't forget me this weekend! And this is a copy of the file "note.dtd" containing the DTD:

16. XML Schema XML Schema is an XML based alternative to DTD. An XML schema describes the structure of an XML document. The XML Schema language is also referred to as XML Schema Definition (XSD). An XML Schema: –defines elements that can appear in a document –defines attributes that can appear in a document –defines which elements are child elements –defines the order of child elements –defines the number of child elements –defines whether an element is empty or can include text –defines data types for elements and attributes –defines default and fixed values for elements and attributes

17. A Simple XML Schema This is a simple XML Schema file called "note.xsd" that defines the elements of the XML document above ("note.xml"): <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.w3schools.com" xmlns="http://www.w3schools.com" elementFormDefault="qualified">

18. Viewing XML files Raw XML files can be viewed in Mozilla, Firefox, Opera, Internet Explorer, and in Netscape 6+. However, to make XML documents to display like nice web pages, you will have to add some display information With CSS (Cascading Style Sheets) you can add display information to an XML document. Look at this XML file: Look at this XML file: note.xml note.xml

19. Displaying XML files with CSS Take a look at this XML file: The CD catalogThe CD catalog Then look at this style sheet: The CSS fileThe CSS file Finally, view: The CD catalog formatted with the CSS fileThe CD catalog formatted with the CSS file –XSL (the eXtensible Stylesheet Language) is the preferred style sheet language of XML. –View the XML file, the XSL style sheet, and View the result.View the XML filethe XSL style sheetView the result

20. XSLT XSLT (Extensible Stylesheet Language Tranformation) is a language for transforming XML documents into XHTML documents or to other XML documents. XSLT is the most important part of XSL XSLT transforms an XML document into another XML document XSLT uses XPath to navigate in XML documents

21. XML namespaces XML namespace is a collection of element and attribute names. It prevents collisions because of same names: example: – math

22. Declarative GUI programming using XAML <Window x:Class="XAMLIntroduction" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="A Simple Window" Height="150" Width="250"> Welcome to WPF!

24. Starting a simple wpf application Create a wpf application Go to tool box and right click Select Add items Select wpf components Select ink canvas Now you should be able to paint However to change colors and such we need to program. Explained below.

25. Starting a WPF app New project Choose WPF application You will see the window on top and xaml at the bottom

26. Layout Controls Grid - Grid of rows and columns. Elements are placed into cells. Canvas – element positions are defined by their distance from top and left edges of the canvas. stackPanel – elements are arranged in single row or column depending on their orientation.

27. Layout in Action Demo the program Note that margin, horizontal alignment and vertical alignment are used over and over again. redRadioButton is the name for the radiobutton that controls the red. Group box names are used for color and size.

28. StackPanel The stackPanel is the simplest of the layout containers. It arranges its content in either vertically or horizontally depending on the orientation property setting.

29. Grid Control and canvas control Window is made up of a grid of rows and columns. Canvas is the painting area. A canvas allows users to position controls by defining explicit coordinates using canvas.left and canvas.top.

30. Layout in Design mode