24
Sebastian Schmitt & André Wussow, SnipClip 1 Silverlight Tipp & Tricks für Fortgeschrittene

Silverlight - Tipps & Tricks für Fortgeschrittene

Embed Size (px)

DESCRIPTION

Slides zum gleichnamigen Vortrag auf der WebTech Conference 2009 (16.11.2009 - 17h15)

Citation preview

Page 1: Silverlight - Tipps & Tricks für Fortgeschrittene

Sebastian Schmitt & André Wussow, SnipClip

1

Silverlight Tipp & Tricksfür Fortgeschrittene

Page 2: Silverlight - Tipps & Tricks für Fortgeschrittene

Sebastian Schmitt & André Wussow, SnipClip

2

Agenda (1)

• Kurze Vorstellung von SnipClip

• Stolpersteine:

• Namespace-Änderung

• Web-Service-Aufrufe

• TextBox-Bug

• Überlappende HTML-Elemente

• Skalierung im Fullscreen-Modus

• Button-Fokus im Fullscreen-Modus

Page 3: Silverlight - Tipps & Tricks für Fortgeschrittene

Sebastian Schmitt & André Wussow, SnipClip

3

Agenda (2)

• Tipps & Tricks:

• Zentrale Style-Vorgaben

• Dynamisches Nachladen

• Screenshots mit Crossdomain-Bildern

• JavaScript Interaktion

• Navigation Framework

• Perspective 3D & PixelShader

• Out-of-Browser

Page 4: Silverlight - Tipps & Tricks für Fortgeschrittene

Sebastian Schmitt & André Wussow, SnipClip

4

Kurze Vorstellung von SnipClip

Page 5: Silverlight - Tipps & Tricks für Fortgeschrittene

Stolpersteine

Page 6: Silverlight - Tipps & Tricks für Fortgeschrittene

Namespace-Änderung

• Problem:Bei Namespace-Änderung in VS 2008 erhält man eine irreführende Ausnahme:„Ungültige oder nicht wohlgeformte Anwendung. Überprüfen Sie das Manifest.“

Sebastian Schmitt & André Wussow, SnipClip

6

• Lösung:Eigenschaften des Projekts Silverlight-Tab Drop-Down-Menü Startup object öffnen und den (einzigen) Eintrag neu auswählen

Page 7: Silverlight - Tipps & Tricks für Fortgeschrittene

Web-Service-Aufrufe

• Problem:Bei Aufruf eines Web Services (bzw. generell bei Crossdomain-Aufrufen) erhält man eine CommunicationException

Sebastian Schmitt & André Wussow, SnipClip

7

• Lösung:Die clientaccesspolicy.xml oder die crossdomain.xml müssen im Root-Verzeichnis des Web Services liegen und für den Client sichtbar sein

(Infos: http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx)

Page 8: Silverlight - Tipps & Tricks für Fortgeschrittene

TextBox-Bug

• Problem:MouseLeftButtonDown-Event funktioniert seit dem Release von Silverlight 2.0 nicht mehr

• Lösung:Stattdessen GotFocus-Event verwenden

Sebastian Schmitt & André Wussow, SnipClip

8

Page 9: Silverlight - Tipps & Tricks für Fortgeschrittene

HTML-Überlappung

Sebastian Schmitt & André Wussow, SnipClip

9

Page 10: Silverlight - Tipps & Tricks für Fortgeschrittene

HTML-Überlappung

• Lösung:Bei den Parametern des Silverlight-Controls hinzufügen:<param name="windowless" value="true" /> Silverlight läuft nicht mehr in eigenem Fenster

Sebastian Schmitt & André Wussow, SnipClip

10

• Problem: Wenn ein Silverlight-Control in eine HTML-Seite eingebettet wird, kann es nicht von anderen HTML-Elementen überlagert werden (z.B. Facebook-Menüs)

Page 11: Silverlight - Tipps & Tricks für Fortgeschrittene

HTML-Überlappung

Sebastian Schmitt & André Wussow, SnipClip

11

Page 12: Silverlight - Tipps & Tricks für Fortgeschrittene

Fullscreen-Skalierung

• Problem:UserControls werden im Fullscreen-Modus verschoben

• Lösung:

• Höhe und Breite im UserControl undefiniert lassen

• DasVerticalAlignment und das HorizontalAlignment des obersten LayoutRoots auf Center und den RenderTransformOrigin auf Point(0.5,0.5) setzen

• Den obersten LayoutRoot über eine ScaleTransform skalieren

Sebastian Schmitt & André Wussow, SnipClip

12

Page 13: Silverlight - Tipps & Tricks für Fortgeschrittene

Button-Fokus im Fullscreen

• Problem:Beim Wechsel in den Fullscreen-Modus bleibt der Fokus auf dem Fullscreen-Button wenn der Fullscreen-Modus wieder verlassen wird, liegt der Fokus fälschlicherweise immer noch auf dem Button

Sebastian Schmitt & André Wussow, SnipClip

13

• Lösung:VisualStateManager.GoToState(EnterFullscreenButton, „Normal“, false); funktioniert allerdings nur dann, wenn der Mauszeiger sich nach Verlassen des Fullscreen-Modus innerhalb der Silverlight-Anwendung befindet

Page 14: Silverlight - Tipps & Tricks für Fortgeschrittene

Tipps & Tricks

Page 15: Silverlight - Tipps & Tricks für Fortgeschrittene

Zentrale Style-Vorgaben

• Problem:In UserControls (z.B. Dialogen) sollen optische Vorgaben wiederverwendet werden, weil ansonsten der XAML-Code schwer zu warten ist und unnötig aufgebläht wird

• Lösung:Optische Vorgaben werden zentral in den Ressourcen der App.xaml gespeichert und können über {StaticResource RedGradient} erreicht werden

Sebastian Schmitt & André Wussow, SnipClip

15

Page 16: Silverlight - Tipps & Tricks für Fortgeschrittene

Dynamisches Nachladen (1)

• Problem:Wenn eine komplexe Anwendung aus vielen UserControls besteht, benötigt sie bei erstmaligem Laden sehr lange

Sebastian Schmitt & André Wussow, SnipClip

16

• Lösung:

• UserControls dynamisch nachladen

• Dabei besser SilverlightApplication Template zur Auslagerung verwenden (anstatt SilverlightLibrary)

• Vorteile: zentrale App.xaml für Style-Vorgaben und XAP-Komprimierung der DLLs

Page 17: Silverlight - Tipps & Tricks für Fortgeschrittene

Dynamisches Nachladen (2)

• Vorgehensweise:

• UserControls in neue SilverlightApplication auslagern (z.B. Dialogs.xap)

• Zentrale Style-Informationen aus der alten App.xaml in die neue App.xaml kopieren

• Zur Laufzeit die Dialogs.xap nachladen und aus deren ApplicationManifest.xaml die enthaltenen DLLs per LINQ ermitteln

• Über Referenzen Eigenschaften Copy Local = True kann man die DLLs festlegen, welche in der Dialogs.xap abgelegt werden

Sebastian Schmitt & André Wussow, SnipClip

17

Page 18: Silverlight - Tipps & Tricks für Fortgeschrittene

Crossdomain-Screenshots

Sebastian Schmitt & André Wussow, SnipClip

18

• Problem:Wenn man in Silverlight 3 einen Screenshot der Anwendung via WriteableBitmap-Klasse macht, werden Bilder, welche von einer anderen Domain geladen wurden, aus Sicherheitsgründen ignoriert

• Lösung:

• Bilder im IsolatedStorage zwischenspeichern und erneut daraus laden

• Erst danach den Screenshot anfertigen

Page 19: Silverlight - Tipps & Tricks für Fortgeschrittene

JavaScript Interaktion

• Benötigt bei Integration div. API‘s

• z.B.: SocialNetworks (Facebook JS, OpenSocial, …)

• Silverlight -> JavaScript via ScriptObject

• JavaScript –> Silverlight via ScriptableType & ScriptableMember

Sebastian Schmitt & André Wussow, SnipClip

Page 20: Silverlight - Tipps & Tricks für Fortgeschrittene

Navigation Framework

• Ermöglicht das komfortable Navigieren zwischen einzelnen Seiten

• Vollständige Integration in die Browser-Navigation (vor, zurück)

• „MVC“-Prinzip:

• Frame übernimmt Validierung und stellt Container dar

• Page ist die eigentliche Seite als UserControl

• DeepLinking übernimmt eindeutige Identifikation der einzelnen Ressourcen (Pages)

• UriMapper erledigt „Url Rewriting“ und sorgt für friendly UrlsSebastian Schmitt & André Wussow, SnipClip

Page 21: Silverlight - Tipps & Tricks für Fortgeschrittene

Navigation Framework

• Projekt-Vorlage „Silverlight Navigation Application

Sebastian Schmitt & André Wussow, SnipClip

Page 22: Silverlight - Tipps & Tricks für Fortgeschrittene

Perspective 3D & Pixel Shader

• Shader Effekte (bzw. PixelShader) erlauben pixelgenaue Manipulation gerenderter UI-Elemente

• Vorgefertigte Effekte (Blur, DropShadow)

• Eigene Effekte möglich via HLS (High Level Shader Language)

• Normal auf GPU ausgeführt, in Silverlight via Software Algorithmus

• WPF PixelShader Effects Library (http://www.codeplex.com/wpffx)

• Bietet u.a. BandedSwirl, ColorKeyAlpha, ColorTone, ContrastAdjust uvm.

• Perspective 3D unterstützt das Anordnen von Elementen auf 3D-Ebene

Sebastian Schmitt & André Wussow, SnipClip

Page 23: Silverlight - Tipps & Tricks für Fortgeschrittene

Out-of-Browser

• Silverlight 3 bietet nun die Installation auf den Desktop an

• Silverlight Applikationen laufen eigenständig ohne Browser

• Web Service Kommunikation z.B. nach wie vor möglich.

• Automatische Aktualisierung

Sebastian Schmitt & André Wussow, SnipClip

Page 24: Silverlight - Tipps & Tricks für Fortgeschrittene

Kontaktdaten

E-Mail:

[email protected]

[email protected]

Blog: www.paidcontentisback.com

Homepage: www.snipclip.com

Quellcode: www.snipclip.com/webtech09-tipps.zip