XAML, WPF och Silverlight

Robert Folkesson

Microsoft Sverige

http://blogs.msdn.com/robf

Design is Inevitable

2

“Questions about whether design is

necessary or affordable are quite beside

the point: design is inevitable.

The alternative to good design is bad

design, not no design at all.”

Douglas Martin-- designer

Design har betydelse• Exempel på god design?

• Våra senaste tekniker och produkter

DesignernUtseende, uppträdande,

varumärken, känslor

UtvecklarenFunktioner, utrullning, data,

säkerhet, administration

Det är något som har saknats...

C++

C#

VB.NET

Papper

JPG / TIFF

PSD

PPT

MOV / WMV

Inga standarder

“fulkod”

“Mockups”

Integration av design/utvecklingsprocessen

Designer Utvecklare

XHTML

CSS / XSLT

XML

ASP.NET

Javascript

AJAX

XAML

Designer Utvecklare

Integration av design/utvecklingsprocessen

Demo: XAML

<Button Name="btnOk">

<Button.Background>

RadialGradient White Blue

</Button.Background>

OK

</Button>

Button btnOk = new Button();

btnOk.Background = newRadialGradientBrush(

Colors.White,Colors.Blue);

btnOk.Content = "Ok";

Dim btnOk As New Button

btnOk.Background = NewRadialGradientBrush(

Colors.White,Colors.Blue)

btnOk.Content = "Ok"

XAML C# VB

XAML

• Extensible Application Markup Language

• Ett-till-ett förhållande till objektmodellen

• Kan innehålla kod och kompileras

• Enkelt för verktyg att konsumera och generera

• Konsekvent programmeringsmodell

• Separering av presentation och logik

• Gränssnitt, media och dokument

Deklarativt vs Imperativt

XAML

<Button Background="LightBlue“

Height="30" Width="65">

<Image Source="c:\Color_Font.png" />

</Button>

C#

Button btn = new Button();

btn.Background = new

SolidColorBrush(Colors.LightBlue);

btn.Height = 30;

btn.Width = 65;

BitmapImage bmpImage = new BitmapImage();

bmpImage.UriSource = new

Uri(@"c:\Color_Font.png");

Image img = new Image();

img.Source = bmpImage;

img.Stretch = Stretch.Uniform;

btn.Content = img;

Expression Studio / Visual Studio

10

Demo: Expression Studio

Windows Presentation Foundation

Rik 2D-grafik

Text

3D-grafik

Rik media Affärsapplikationer

Demo: WPF

Menyer

Menu

ContextMenu

ToolBar

Knappar

Button

RepeatButton

RadioButton

CheckBox

Hyperlink

Listor

ListBox

ComboBox

ListView

TreeView

Containrar

Frame

ScrollViewer

TabControl

GroupBox

Expander

Frekvenskontroller

Slider

ScrollBar

ProgressBar

Text

TextBox

RichTextBox

PasswordBox

TextBlock

Label

ToolTip

Kontroller i WPF

Flexibel layout med Paneler

Grid

StackPanel

WrapPanel

DockPanel

Canvas

Demo: Paneler

Kontroller har en ‘Content Model’

Kontroll-mallar

• Kontroller har även beteenden och utseende som kan styrasav en kontroll-mall (Control Template)

Kontroll

Button

Template

Click

event

Command

Focus

Automation

Content

Model

Demo: Control Templates

Modifiera kontroller med "Styles"

• Tillåter extern definition av en kontrollsutseende och beteende• Koncept som liknar Stylesheets för HTML

• Medger inkapsling av stil-egenskaper ochmallar för kontroller (control templates)• Mycket kraftfullt och enkelt sätt att förändra kontroller

• Definieras antingen i XAML-filer för gränssnitt (t.ex. Window.xaml) eller i App.xaml• App.xaml ger möjliggör applikationsvid användning

Brushes

Solid color brush Linear gradient brush Radial gradient brush

Image brush

Drawing brush Visual brush

22

Demo: Visual Brush

Databindning

• Ger separering av view/model• Ändra gränssnittet utan att göra förändringar i code-behind

• Bindning går att göra direkt mellan egenskaper på kontroller, mot valfritt CLR-objekt eller XML-data

• Bindningsuttryck kan vara envägs eller tvåvägs

• Notifieringar av förändringar via INotifyPropertyChange stöds

• Mallar för bindningar via Data Templates

Demo: Databindning

Hostingmodeller för WPF

• Desktop• Lokalt installerad via XCOPY, MSI eller ClickOnce

• Körs med ”full trust”

• XBAP (XAML Browser Application)• Publicerad till webbserver – startas med ClickOnce

• Körs ”sandboxad”

Demo: XBAP

Vad är Silverlight?

• Client-side runtime

• Cross-browser & cross-platform• MSIE, Firefox, Safari & Opera på Win & OS X

• Nästa generation ”Rich Internet Applications” (RIA) för webben

Vad karakteriserar en RIA?

• Utrullning via webben• Når brett

• Säker, ”sandboxad” körmiljö

• Rik användarupplevelse – mer än servergenererad HTML• Kapabel modell för användargränssnitt

(vektorgrafik/media)

• Applikationslogik på klienten• Högproduktiv utvecklingsmiljö

Silverlight 1.0

2D Graphics

Animations

Input (mouse, keyboard, ink)

Media (WMV, WMA, MP3)

Imaging (JPEG, PNG)

Text

HTTP Downloader

XAML Parser

JavaScript DOM

.NET + Silverlight

• .NET X-plattform & X-webbläsare• Safari, Firefox och IE på Mac & Windows

• FireFox, Konquerer och Opera på Linux

• 4.3 MB - snabb och enkel installation

• Högproduktiv utveckling• Stöd för VB, C#, JavaScript, Python, Ruby

• Klassbibliotek med rik funktionalitet

• Verktygsstöd i Visual Studio & Expression Studio

Silverlight Security Sandbox

• Silverlight-applikationer körs i en säker ”sandboxad”-miljö

• Aktiveras i HTML-sida• Ingen elevering av rättigheter eller dialog för användaren

• Applikationer hindras från att göra farliga operationer

• Silverlight möjliggör utökade scenarion:• Säker lokal lagring: Isolated storage

• Klientbaserade filuppladdningskontroller

• Stöd för anrop över nätverket ”cross domain”

.NET för Silverlight jämfört med desktop

• .NET för Silverlight är ett subset av .NET-ramverket• Speciellt anpassat för RIA- och Media-scenarios

• Gemensam "core" .NET-utvecklingsmodell• Gemensamma API:er för browser- & desktop-scenarios

• Gemensam modell med WPF för gränssnittsprogrammering

• Gemensamma utvecklings- och designverktyg

• Kompatibelt subset av WPF UI-ramverk

Silverlight 2

XAML

Browser Host

Integrated

Networking

Stack

DOM

IntegrationInstaller

JavaScript

Engine

Presentation Core

.NET for Silverlight

Inputs

Keyboard

Mouse

Ink

Media

WMV / VC1

WMA

MP3

Controls

Layout

Editing

UI Core

2D Vectors

Animation

Text

Images

Transforms

DRM

Media

Dynamic Languages

Ruby Python

BCL

Generics Collections

Web Services

REST

RSS

SOAP

POX

JSON

Data

LINQ LINQ-to-XML

WPF for Silverlight

Extensible Controls

Common Language Runtime

ASP.NET

AJAX Libs

<asp:xaml>

<asp:media>

Server Silverlight 1.0

Silverlight 2.0

Legend

Deep Zoom

Inbyggda Beta1-kontroller

• Formulär:

• TextBox

• Button

• Toggle/Repeat

• CheckBox

• RadioButton

• ListBox

• Layout:

• StackPanel

• Grid / GridSplitter

• Canvas

• ”Core” :

• Border

• Image

• MediaElement

• MultiScaleImage

• Tooltip

• Scrollviewer

• Navigering:

• HyperlinkButton

• Popup

• Hög-nivå:

• Calendar

• DataGrid

• Slider

• DateTimePicker

• Former:

• Ellipse

• Line

• TextBlock

• Path

Silverlight

Deep Zoom

- Preprocessing-verktyg

delar bilder i block om

256 x 256

- Sedan genereras

“pyramider” av block

i lägre upplösning

- Ger möjlighet att

zooma mycket snabbt

i stora mängder bilddata

Deep Zoom

Frågor?