Windows presentation foundation wpf
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

Windows Presentation Foundation (WPF) PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on
  • Presentation posted in: General

Windows Presentation Foundation (WPF). Chapter 16 Dr. Abraham. WPF. Microsoft’s new framework for GUI, graphics animation and multimedia. WPF generates vector-based graphics and is resolution independent. Building a GUI with WPF

Download Presentation

Windows Presentation Foundation (WPF)

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Windows presentation foundation wpf

Windows Presentation Foundation (WPF)

Chapter 16

Dr. Abraham


Windows presentation foundation wpf

WPF

  • Microsoft’s new framework for GUI, graphics animation and multimedia.

  • WPF generates vector-based graphics and is resolution independent.

  • Building a GUI with WPF

  • WPF uses XAML (Extensible Application Markup Language) to generate the code.


Windows presentation foundation wpf

XAML

  • When you use the designer, the IDE creates code to create and configure the controls

  • In WPF, it generates XAML. You can manually write XAML to define GUI controls.

  • When the application is compiled the XAML compiler generates code to create and configure controls.

  • XAML allows designers and programmers to work together more efficiently.


Now to xml before xaml

Now to XML (before XAML)


Xml tutorial

XML TUTORIAL

Portions from w3 schools

By Dr. John Abraham


What is xml

What is XML?

  • XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to describe dataXML tags are not predefined. You must define your own tagsXML 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-descriptiveXML is a W3C Recommendation - 1996


Windows presentation foundation wpf

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


Xml vs html

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


Article xml file

ARTICLE.XML file

  • <?xml version = "1.0"?>

  • <!-- Article structured with XML -->

  • <article>

  • <title>Simple XML</title>

  • <date>December 6, 2001</date>

  • <author>

  • <firstName>John</firstName>

  • <lastName>Doe</lastName>

  • </author>

  • <summary>XML is pretty easy.</summary>

  • <content>In this chapter, we present a wide variety of examples that use XML.

  • </content>

  • </article>


Explanation

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.


Xml rules

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:

    • <b><i>This text is bold and italic</b></i>

  • All XML documents must have a single root element


Xml attributes

XML attributes

  • XML elements can have attributes in the start tag, just like HTML.

  • Attribute values must always be quoted

  • <note date="12/11/2002">

  • Avoid using attributes if you can. Use child elements instead.


Windows presentation foundation wpf

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.


Internal dtd

Internal DTD

  • <?xml version="1.0"?>

  • <!DOCTYPE note [

  • <!ELEMENT note (to,from,heading,body)>

  • <!ELEMENT to (#PCDATA)>

  • <!ELEMENT from (#PCDATA)>

  • <!ELEMENT heading (#PCDATA)>

  • <!ELEMENT body (#PCDATA)>

  • ]>

  • <note>

  • <to>Tove</to>

  • <from>Jani</from>

  • <heading>Reminder</heading>

  • <body>Don't forget me this weekend</body>

  • </note>


This dtd is interpreted like this

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.....


External doctype declaration

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:

  • <!DOCTYPE root-element SYSTEM "filename">

  • <?xml version="1.0"?>

  • <!DOCTYPE note SYSTEM "note.dtd">

  • <note>

  • <to>Tove</to>

  • <from>Jani</from>

  • <heading>Reminder</heading>

  • <body>Don't forget me this weekend!</body>

  • </note>

  • And this is a copy of the file "note.dtd" containing the DTD:

  • <!ELEMENT note (to,from,heading,body)>

  • <!ELEMENT to (#PCDATA)>

  • <!ELEMENT from (#PCDATA)>

  • <!ELEMENT heading (#PCDATA)>

  • <!ELEMENT body (#PCDATA)>


Xml schema

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


A simple xml schema

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"):

  • <?xml version="1.0"?>

  • <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

  • targetNamespace="http://www.w3schools.com"

  • xmlns="http://www.w3schools.com"

  • elementFormDefault="qualified"><xs:element name="note">

  • <xs:complexType>

  • <xs:sequence>

  • <xs:element name="to" type="xs:string"/>

  • <xs:element name="from" type="xs:string"/>

  • <xs:element name="heading" type="xs:string"/>

  • <xs:element name="body" type="xs:string"/>

  • </xs:sequence>

  • </xs:complexType>

  • </xs:element></xs:schema>


Viewing xml files

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


Displaying xml files with css

Displaying XML files with CSS

  • Take a look at this XML file: The CD catalog

  • Then look at this style sheet: The CSS file

  • Finally, view: The 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.


Windows presentation foundation wpf

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


Xaml programming

XAML PROGRAMMING

  • Here is the hello world program we wrote in class

    <Window x:Class="wpfHello.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Say Hello Program" Height="350" Width="525" Background="Gold">

    <Grid>

    <Label HorizontalAlignment="Center" VerticalAlignment="Center">

    Welcome to My first WPF program!

    </Label>

    <Button Content="say Hello" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnHello" VerticalAlignment="Top" Width="75" Click="btnHello_Click" />

    <TextBox Height="23" HorizontalAlignment="Left" Margin="331,12,0,0" Name="txtHello" VerticalAlignment="Top" Width="120" />

    </Grid>

    </Window>


Future value interface with wpf

Future value interface with WPF

<Window x:Class="WpfFutureValue.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Future Value Program in WPF" Height="458" Width="610" Background="Gray" FontWeight="Bold">

<Grid Height="368" Width="650">

<TextBox Height="23" HorizontalAlignment="Left" Margin="390,0,0,0" Name="txtInitDep" VerticalAlignment="Top" Width="120" />

<Label Content="Initial Deposit" Height="23" HorizontalAlignment="Left" Margin="296,0,0,0" Name="label1" VerticalAlignment="Top" Width="88" />

<TextBox Height="23" HorizontalAlignment="Left" Margin="390,29,0,0" Name="txtPerDep" VerticalAlignment="Top" Width="120" />

<Label Content="Deposit Every 30 days" Height="31" HorizontalAlignment="Left" Margin="249,29,0,0" Name="label2" VerticalAlignment="Top" Width="135" />

<TextBox Height="23" HorizontalAlignment="Right" Margin="0,58,140,0" Name="txtRate" VerticalAlignment="Top" Width="120" />

<Label Content="Rate of Interest Per annum" Height="31" HorizontalAlignment="Left" Margin="186,50,0,0" Name="label3" VerticalAlignment="Top" Width="165" />

<TextBox Height="23" HorizontalAlignment="Right" Margin="0,86,140,0" Name="txtStartAge" VerticalAlignment="Top" Width="120" />

<Label Content="Age When Account Started" Height="31" HorizontalAlignment="Left" Margin="186,86,0,0" Name="label4" VerticalAlignment="Top" Width="165" />

<TextBox Height="23" HorizontalAlignment="Right" Margin="0,111,140,0" Name="txtRetAge" VerticalAlignment="Top" Width="120" />

<Label Content="Retirement Age" Height="31" HorizontalAlignment="Left" Margin="249,111,0,0" Name="label6" VerticalAlignment="Top" Width="102" />

<Button Content="Calculate" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnCalculate" VerticalAlignment="Top" Width="75" Click="btnCalculate_Click" />

<RichTextBox Height="246" HorizontalAlignment="Left" Margin="1,139,0,0" Name="txtOutput" VerticalAlignment="Top" Width="559" TextChanged="txtOutput_TextChanged" VerticalScrollBarVisibility="Visible" Background="gold" FontFamily="Courier New" />

</Grid>

</Window>


  • Login