View
14
Download
0
Category
Preview:
Citation preview
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?
Recommended