About XAML & HTML+CSS

Preview:

Citation preview

XAML & HTML+CSSAhmad Awsaf-uz-zamanApr 21, 2016

www.a2z-soft.com

What Is XAML? Stands for Extensible Application Markup Language

XAML (pronounced "zammel") It is an XML-based markup language

developed by Microsoft. XAML is the language behind the visual

presentation of an application just as HTML is the language behind the visual presentation of a Web page.

www.a2z-soft.com

2

What Is XAML?

www.a2z-soft.com

3

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ExampleNamespace.ExamplePage">

<Button Click="Button_Click" >Click Me!</Button>

</Page>

XAML Used WPF (Windows Presentation Foundation) WP7/8 (Windows Phone 7/8) UWP (Universal Windows Platform) Silverlight

www.a2z-soft.com

4

Supported Platforms WPF applications are supported Windows 7 or higher

Desktop based software Windows Tablets

WP apps are supported Windows Phone 7/8 Windows Mobile

UWP applications are supported Windows 8 or higher Windows store apps

Windows 8/10 apps, Windows Tablets Windows Mobile

Silverlight Web browsers

www.a2z-soft.com

5

Why Is XAML Important? XAML is a richer language, offering the ability to create

user interfaces in Windows. XAML is very easy to use and ties up tightly with the

underlying .NET Framework and classes. Each and every XAML element corresponds to a .NET

Framework class and comes with a collection of methods, properties, and events.

Adding a new tag to the XAML file will instantiate the corresponding object at runtime.

www.a2z-soft.com

6

What Is HTML? Stands for Hyper Text Markup Language HTML is a computer language devised to

allow website creation. HTML tags describe webpage structure &

look. Each HTML tag describes different document

content

www.a2z-soft.com

7

What Is HTML? <!DOCTYPE html><html>

<head><title>Page Title</title>

</head><body>

<h1>My First Heading</h1><p>My first paragraph.</p>

</body></html>

www.a2z-soft.com

8

Why Is HTML Important? HTML is highly flexible HTML is user friendly HTML is easily understandable HTML is an open technology HTML is consistent and efficient HTML provides search engine compatible pages HTML is easier to maintain and update any site HTML does not involve strain on the servers HTML takes less time to load the web pages HTML is supported on almost every browser

www.a2z-soft.com

9

Difference between XAML and HTMLXAML HTMLIt is a newer, exciting technology It is mature and well understood

It can be handle with C#, VB.NE (Microsoft Languages)

It can be handle with C#, PHP (Any Languages and Scripts)

Relatively heavy weighted Light weighted

Target are both web based and desktop based systems Main target is web based systems

Usually it is used using C#/VB.NET Usually it is used using CSS and JavaScript

Recommended for big applications i.e. ERP software

Recommended for website or medium weighted applications

Not supported cross-platform except Silverlight applications Supported Cross-platform

www.a2z-soft.com

10

Similarities between XAML and HTMLFeatures XAML HTML+CSSType Markup language Markup language

Element Design using tags of XAML Design using tags of HTML

Platforms Depends Cross-platform

Layout

<StackPanel><DockPanel><WrapPanel><Canvas><Viewbox>

<div>With CSS

<Grid> <table>

www.a2z-soft.com

11

Similarities between XAML and HTMLFeatures XAML HTML+CSS

Label<TextBlock ><Label >

<span><i><div>

Input control <TextBox> <input type=“input”>

Password Input Control <PasswordBox> <input> type=“password”

Display Table<DataGrid><ListView>

<table>

Menu <Menu> <ul> + CSS

www.a2z-soft.com

12

Similarities between XAML and HTMLFeatures XAML HTML+CSSButton <Button> <button type="button">

Radio Button <RadioButton> <input type="radio“>

Check Box <CheckBox> <input type="checkbox“>

List Box <ListBox><ul><ol>

www.a2z-soft.com

13

An example of XAML & HTML

www.a2z-soft.com

14

XAML:<TextBox Text="Hello, world!" />

HTML:<input type="text" value="Hello, world!">

ConclusionThere are lots of things to love about XAML. And lots of UI technologies (like HTML5) have benefits (especially in Metro). However I choose XAML especially for Windows Platforms. If you would like to develop cross-platform mobile apps, it would better use HTML. Your choice may be different. If it is, just be sure that you have reasons for your choice. Not all choices are equal. Not at all.

www.a2z-soft.com

15

Recommended