Kalender
<<  Oktober 2014  >>
MoDiMiDoFrSaSo
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
blettner , eingetragen am 17. November 2008, 11:46

Vor ca. einem Monat wurde Silverlight 2.0 released und es hat geheissen, dass es zur oder nach der PDC ein Toolkit geben sollte, dass weitere Controls enthält.

Dieses ist nun erschienen und kann hier downgeloadet werden: http://www.codeplex.com/Silverlight/Release/ProjectReleases.aspx?ReleaseId=18804

Einen Überblick, welche Controls darin enthalten ist bekommt man hier: http://blogs.msdn.com/sburke/archive/2008/10/28/silverlight-toolkit-now-available-for-download.aspx

blettner , eingetragen am 14. Oktober 2008, 20:21

Heute ist die Finale Version von Silverlight erschienen. Alle wichtigen Informationen und Tool (Visual Studio Tool, Expression Blend SP1) findet man unter www.silverlight.net.

blettner , eingetragen am 5. Oktober 2008, 21:44

Silverlight 2 bietet einem das was man sich schon in Version 1 gewünscht hätte. Unterstützung des .net Frameworks ohne mit Javascript “rummurxen” zu müssen. Hat man bereits Erfahrung im Umgang mit Expression Studio, geht es noch schneller einfache Applikationsn in Silverlight zu erstellen.

In meinem ersten Post zum Thema Silverlight, werde ich mich mit einem einfachen – ASP.net GUI aufmöbel – Beispiel zuwenden. Mit Hilfe von Ajax und vorallem dem Ajax Toolkit wird die Funktionalität von ASP.net bezüglich GUI Interaktion und Freundlichkeit erweitert. Einen Schritt weiter (um das Ziel Rich Internet Applications zu erreichen)führt einen nun Silverlight 2. Dabei sollte man meiner Meinung nach nicht die ganze Applikation auf Silverlight aufbauen, es reicht sich auf wesentliche Punkte zu konzentrieren wie z.B.: einer animierten Button Leiste um damit gleich auf den Punkt zu kommen.

Erstellen einer Silverlight Applikation in Expression Blend

Um Silverlight Applikationen erstellen zu können sollte man das Silverlight Toolkit für Visual Studio 2008 und  das Service Pack 1 für Expression Blend 2 installieren. Der Dialog zum Erstellen eines neuen Projektes in Blend sollte folgendermassen aussehen:

SilverlightScreen_newProject

“Silverlight 2 Application” auswählen und wenn möglich gleich einen sprechenden Namen für die Applikation vergeben (ist im Nachhinein  umständlich zu ändern). In meinem Fall wähle ich C#, kann aber auch VB verwendet werden.

Überblick Expression Blend

Nachdem das Projekt erstellt wurde, sollte man den Design Workspace von Blend vor sich haben. Dieser ist wie folgt aufgeteilt:

SilverlightScreen_Blend

Auf der linken Seite findet man neben einer Toolbar das Interactions- und das Objects and Timeline-Panel. In der Mitte befindet sich die Design Area und rechts sind noch das Project-, Properties- und Resourcen-Panel.

  • Interaction dient vorallem (wie der Name schon sagt) zum Erstellen von Zuständen und deren Verknüpfung.
  • Objects and Timelines stellt zum einen den Objektbaum dar und dient zum anderen als Grundlage zur Animation von Elementen.
  • Projects, Properties und Resources erklären sich von selbst.

Wer sich wundert, wo die ganzen Controls versteckt sind, klickt auf den Doppelpfeil am linken unteren Rand. Dieser öffnet die Asset Library, welche sämtliche Controls enthält die Silverlight momentan unterstützt.

SilverlightScreen_AssetLibrary

Microsoft hat angekündigt, zur PDC 2008 weitere Controls zur Verfügung stellen zu wollen. Lassen wir uns überaschen!

Objekte erstellen und Zustände definieren

Für dieses Beispiel erstelle ich zwei Buttons die untereinander angeordnet sind.

SilverlightScreen_2buttons_new 

Das Formular, so wie es jetzt aufgebaut ist, stellt den Basis State dar. States sind eine sehr nette Erweiterung, die mit Silverlight 2 zu Blend hinzugefügt wurden. Damit lassen sich sehr einfach verschiedene Zustände eines Formulars oder eines Objektes / Formulars darstellen. Einfache Animationen oder auch komplexere Übergänge zwischen zwei Zuständen sind somit keine Hexerei mehr.

Um einen neuen Zustand zu defieren, legt man zuerst eine neue Gruppe an. In meinem Falle, eine für Button_1 und eine für Button_2. In dieser Gruppe können nun Zustände (States) erstellt werden (hier eine für MouseHover und ein weiterer für MouseLeave).

SilverlightScreen_button1_state

Markiert man einen Zustand, wechselt die Design Ansicht in den Aufnahmemodus. d.H.: es werden sämtliche Änderungen aufgezeichnet, die man an den vorhandenen Objekten vornimmt. Im Object & Timeline Panel werden Objekte die verändert wurden mit einem roten Pfeil markiert. Ich hab hier die Transparenz des zweiten Buttons auf 40% und Höhe / Breite jeweils auf 90% gestellt. Effekt der rauskommen sollte ist, wenn man mit der Maus über Button 1 fährt, wird dieser grösser als Button 2. Verlässt die Maus den Button, sollte alles wieder so aussehen wie vorher.

Durch die definition eines Zustandes alleine ist das aber noch nicht erledigt. Zunächst muß noch ein Zustand definiert werden, der Abbildet wie das Formular aussehen sollte, wenn man mit der Maus den Button wieder verlässt. Ist das erledigt, fügt man den MouseEnter und MouseLeave Event hinzu.

SilverlightScreen_events

Dabei wird Visual Studio geöffnet, da C# oder VB Code nur dort editiert werden kann.  Hier kommt die Trennung von GUI Design und Logik Programmierung zu tragen (Blend sollte das Tool für den Designer und Visual Studio für den Entwickler sein. Bin aber der Meinung, dass es viele Entwickler gibt, die beides machen und sich ab jetzt mit zwei Tools beschäftigen müssen. Ob das ein Vor- oder Nachteil ist muß jeder für sich entscheiden!).

Damit die States auch wechseln, ist folgender Code notwendig:

     private void grid3_MouseEnter(object sender, MouseEventArgs e)
     {
           VisualStateManager.GoToState(this, "Button1Hover", true);
     }

     private void grid3_MouseLeave(object sender, MouseEventArgs e)
     {
          VisualStateManager.GoToState(this, "Button1Leave", true);
     }

 

 

Mit F5 das Projekt compilieren und starten, bewegt man die Maus über Button 1 sollte sich der Zustand dementsprechend anpassen bzw der Ausgangszustand wieder hergestellt werden wenn man die Maus aus dem Button bewegt.

Das Selbe noch für den zweiten Button machen und fertig ist die “sehr einfache” animierte Button Leiste. Auf diese Art und Weise kann man sehr schnell und einfach Animationen erstellen, die das Aussehen einer Webseite wesentlich beeinflussen können. Wie gesagt, es sollte nicht übertrieben werden, sodass vor lauter Animationen das Wesentliche einer Webseite nicht mehr erkennbar ist. Trotzdem ist es ein guter Weg eine Seite spritziger zu gestalten.

In einem weiteren Post werde ich mich noch genauer mit den Möglichkeiten der Zustandsübergänge (sprich Transitions und Animationen) befassen.

Bis dahin, viel Spaß beim ausprobieren!

blettner , eingetragen am 26. September 2008, 11:39

Seit gestern steht der Release Candidate von Silverlight 2 zur Verfügung. Alle wesentlichen Änderungen und Download Links findet man in ScottGu’s Blog.

Ich werde das neue Release bei Gelegenheit testen und hier von meinen Erfahrungen berichten.