Short Courses on Computer Graphics, Image Processing and Computer Vision
Let me know what you think Mail me...

Course 2D_SL: 2D-Computer Graphics with Silverlight

Copyright © by V. Miszalok, last update: 2011-03-28

Visitors since 01-01-2002
Please notice: Introduction into all courses
deutsch english
Was ist Silverlight ?
Windows und Graphik-Treiber auf neustem Stand ?
Web Developer 2010 Express und Silverlight Tools
Bücher
Tutorials
C1: Intro, eine einleitende Webseite mit einem animierten Polygon
C2: Draw, eine Webseite mit Malprogramm
C3: Controls in a Grid, eine Webseite mit Text, Bildern und Musikvideo
C4: Controls Gallery, eine Übersicht über viele Controls
C5: Path, eine Übersicht über Path Segmente
C6: Bezier, eine animierte Schlange
What is Silverlight ?
Update Windows and its Graphics Driver
Web Developer 2010 Express and the Silverlight Tools
Books
Tutorials
C1: Intro, an introductory web site with an animated polygon
C2: Draw, a web page as scribble canvas
C3: Controls in a Grid, a web page with text, images and music video
C4: Controls Gallery, an overview of a lot of controls
C5: Path, an overview of linear and curved path segments
C6: Bezier, a moving snake

Was ist Silverlight ?

Silverlight ist eine kleine Untermenge der Windows Presentation Foundation in Form eines Plugins, das für fast alle Browser verfügbar ist. Eine Silverlight-Web-Seite besteht aus XAML-Code und C#-Code, der (anders als bei WPF) erst beim Laden in den Browser geparst und übersetzt wird. Dafür laufen die Silverlight-Seiten auf jeder Plattform ohne Installations- und Sicherheitsprobleme.
Siehe: Silverlight 2.0 Poster.
Was Silverlight nicht kann:
1. Es kann HTML nicht ersetzen, sondern existiert nur eingebettet in HTML.
2. Es kann keinen fließenden formatierten Text darstellen.
3. Es besitzt keine Seitenstruktur und keine Navigation.

What is Silverlight ?

Silverlight is a tiny subset of the Windows Presentation Foundation in form of a Plugin, available for most browsers. A Silverlight web page consists of XAML code and C# code, which are parsed and compiled by the browser at any load (whereas WPF-pages are parsed and compiled at design time). By benefit Silverlight pages run everywhere without installation- and security problems.
See: Silverlight 2.0 Poster.
Limitations of Silverlight:
1. It must be embedded in HTML and cannot replace HTML.
2. It cannot present formatted continuous text.
3. It has no page structure and no navigation.

Windows und Graphik-Treiber auf neustem Stand ?

1. Laden und installieren Sie via Windows Internet Explorer → Extras → Windows Update die neuesten Updates für Ihr Betriebssystem.
2. Starten Sie das DirectX-Diagnoseprogramm C:\Windows\System32\dxdiag.exe (oder wo es auch immer sei auf Ihrer Festplatte).
3. Auf der dxdiag-Anzeige-Karteikarte stehen Hersteller und Typ Ihrer Graphikkarte.
4. Suchen Sie im Internet den Hersteller und laden Sie den neuesten Treiber für Ihre Karte und installieren Sie diesen.
5. Testen Sie den Erfolg mit dxdiag.exe.

Update Windows and its Graphics Driver

1. Load and install the most recent updates of Your operating system via Windows Internet Explorer → Extras → Windows Update.
2. Test the DirectX properties of Your graphic board as follows: Start C:\Windows\System32\dxdiag.exe (or wherever it may be on the hard disk).
3. Check the manufacturer and the type of Your graphics card on the dxdiag-Display-tab .
4. Search the manufacturer on the internet and download the newest driver version of the card and install it.
5. Test again whether the update succeeded with dxdiag.exe.

Visual Web Developer 2010 Express und Silverlight Tools

Wenn Sie Visual Studio 2010 Professional nicht in der enlischen Sprachversion installiert haben, müssen Sie zunächst
Visual Web Developer 2010 Express Edition English
installieren um danach
die Silverlight 4 Tools for Visual Studio 2010 installieren zu können.

Ein Video mit Anleitung für Installation und erste Schritte finden Sie unter: http://silverlight.net/learn/.... Die Anleitung ist allerdings für Profis, die Visual Studio 2010 Professional und Expression Blend haben.

Visual Web Developer 2010 Express and the Silverlight Tools

If you have no Visual Studio 2010 Professional you must install
Visual Web Developer 2010 Express Edition English
before you install Silverlight 4 Tools for Visual Studio 2010.

A video clip with guidance for installation and first steps can be found here: http://silverlight.net/learn/.... The clip addresses owners of Visual Studio 2010 Professional and Expression Blend.

Bücher

Biswanger: Silverlight 5 - Crashkurs. ISBN-10: 3-86645-546-1, Microsoft Press, 35 €


Books

L. Moroney: Introducing Microsoft Silverlight 3. ISBN 0-7356-2573-5, Microsoft Press, 380 p., 40 $.
A. Michail: Essential Silverlight 3. ISBN: 0-321-55416-7, Addison-Wesley, 330 pp, £33.
B. Dayley: Silverligth 2 Bible. ISBN: 0-470-37500-0, Wiley, 570 p., 40 $.

Tutorials

Tutorials

1. Microsoft: Silverlight Tutorials
2.
Scott Guthrie: Silverlight Training Kit
3. Microsoft: Silverlight Videos
4. Microsoft: Silverlight Hands On Labs

C1: Intro, eine einleitende Webseite mit einem animierten Polygon

Lernen Sie Button, Slider, RadioButton, Scrollbar und Timer-geteuerte Animation kennen.

     
   

C1: Intro, an introductory web page with an animated polygon

Learn how to use Button, Slider, RadioButton, Scrollbar and a Timer-triggered animation.

EXE Demo.html → Demo Page
Link Guidance
PDF Guidance Print Version
Link Complete Code
PDF Complete Code Print Version

C2: Draw, eine Webseite mit Malprogramm

Zeichnen Sie mit der Maus auf eine Webseite, schließen Sie das Polygon, berechnen Sie Mittelpunkt und Umfang und animieren Sie es.

     
   

C2: Draw, a web page as scribble canvas

Draw with the mouse, close the polygon, compute the midpoint and the perimeter and animate it.

EXE Demo.html → Demo Page
Link Complete Code
PDF Complete Code Print Version

C3: Controls in a Grid, eine Webseite mit Text, Bildern und Musikvideo

Zwecklose Webseite mit formatiertem Text, Schaltfläche, Video, Rechteck, Ellipse, Polygon, Eingabetextfeld, Radiobuttons, Schiebereglern und Scrollbar und diversen Animationen.

     
   

C3: Controls in a Grid, a web page with text, images and music video

A useless web page with formatted text, button, video, rectangle, ellipse, polygon, text input, radio buttons, sliders and scroll bar and animate some of these.

EXE Demo.html → Demo Page
Link Complete Code
PDF Complete Code Print Version

C4: Controls Gallery, eine Übersicht über viele Controls

Eine Galerie der 23 wichtigsten Befehlsschaltflächen, darunter drei aus dem Silverlight Toolkit

     
   

C4: Controls Gallery, an overview of a lot of controls

A gallery of 23 important Controls among them 3 from the Silverlight Toolkit

EXE Demo.html → Demo Page
Link Complete Code
PDF Complete Code Print Version

C5: Path, eine Übersicht über gerade und gebogene Path Segmente

Eine Galerie verschiedener Kurventypen, die 1. kurz mit der Geometrie-MiniSprache und 2. ausführlich und programmierbar mit PathGeometry-Objekten kodiert und animiert sind.

     
   

C5: Path, an overview of linear and curved path segments

A gallery of curves coded 1. shortly with the geometry-mini-language and 2. explicitly with programmable PathGeometry objects that are animated.

EXE Demo.html → Demo Page
Link Complete Code
PDF Complete Code Print Version

C6: Bezier, eine animierte Schlange

Eine Schlange, zusammengesetzt aus 4 kubischen Bezierkurven und 3 Animations-Keyframes ringelt sich durch die Webseite.

     
   

C6: Bezier, a moving snake

A snake composed of 4 cubic Bezier curves and 3 amimation key frames curls around.

EXE Demo.html → Demo Page
Link Complete Code
PDF Complete Code Print Version
top of page: