Mit Silverlight als Rich Interactive Application (RIA) sollen gerade die Unterschiede zwischen Desktop und Internet vereint werden. Demzufolge kommt des Öfteren der Wunsch bewegliche Controls, zum Beispiel als Windows-Fenster, umzusetzen. Solche Features machten unter anderem AJAX populär. Bei AJAX werden demnach leider die Technologien der Browser soweit ausgereizt, das es des Öfteren zu Browserabstützen führt. Ganz gleich ob es sich hierbei um einen Internet Explorer oder FireFox handelt. Zudem ist das beheben oder erweitern der fertigen AJAX-Controls sehr komplex.

Anders sieht es bei Silverlight-Applikationen aus. Bis auf das benötigte Plug-In, ist die Umsetzung und Realisierung beweglicher Elemente ein Kinderspiel. Ein recht oberflächliches Beispiel soll dies Demonstrieren.

Ein beweglicher TextBlock

Zu Beginn wird ein einfacher TextBlock durch eine Drag and Drop-Funktionalität erweitert. Wichtig dabei ist nur zu beachten, dass auf oberster Ebene ein Canvas-Element den Beweglichen Bereich zur Verfügung stellt.

Abb.1.1. – Einfaches TextBlock-Element in einem Canvas-Element.

Damit die TextBox auf die Maus reagieren kann, müssen auf die drei unterschiedlichen Events: MouseLeftButtonDown, MouseMove und MouseLeftButtonUp eine Logik hinterlegt werden.

Abb.1.2. – Die Logik der einzelnen Events.

Demzufolge werden dem TextBlock im XAML-Code diese drei Events definiert. Dabei hilft Visual Studio auch beim erzeugen der Methoden in der Code-Behind-Datei. Bei einer realen Umsetzung sollte dennoch der Source-Code ausgelagert werden, zum Beispiel behilft hierbei das Architektur-Pattern: Model-View-ViewModel (MVVM).

Abb.1.3. – TextBlock mit Events.

Die Events mit Logik ausrüsten

Bevor die Events ihre Ausrüstung erhalten, müssen zwei Variablen gewisse zustände festhalten. Zum einem eine Bool-Variable die vermerkt ob sich der Bewegte Mauszeiger in einem Drag and Drop-Modus befindet. Der Name für die Variable lautet IsDragging mit dem Standardwert false. Die zweite Variable soll sich die erste Position vor der Bewegung des Mauszeigers, mit dem Point-Objekt merken. Hierbei wird der Name auf BeginPointPosition festgelegt.

Abb.1.4. – Zwei interne Variablen um die Zustände festzuhalten.

Jetzt wird beim ersten Event MouseLeftButtonDown die dazugehörige Logik Programmiert. Zu Beginn muss erst unser Zustand im Drag and Drop Modus IsDragging auf true gesetzt werden. Danach bietet uns jedes XAML-Control das vom Interface UIElements ableitet eine Methode mit CaptureMouse() an. Die Methode erlaubt das Anhängen der Elemente an den Mauszeiger, womit ein späteres Festhalten vom Mauszeiger wahrgenommen wird. Am Ende wird aus dem MouseButtonEventArgs die aktuelle Position auf die Variable BeginPointPosition gemerkt. Der Source-Code dazu sieht folgendermaßen aus:

Abb.1.5. – Der Source-Code von MouseLeftButtonDown-Event.

Beim Programmieren der Logik von MouseMove-Event, muss jetzt nur der zustand auf Drag and Drop überprüft werden. Sonst wird bei jeder Mausbewegung über das Silverlight Element der Source-Code falsch ausgeführt. Anschließend wird die aktuelle Position mit der gemerkten Position abgezogen und das Element mittels SetValue auf das oberliegende Canvas-Element gesetzt. Auch hier der Source-Code dazu:

Abb.1.6. – Der Source-Code von MouseMove-Event.

Der letzte Event MouseLeftButtonUp ist zudem auch sehr einfach, hierbei muss nur der Zustand der Bool-Variable IsDragging wieder auf false gestellt werden. Dann wird vom Element mit der Methode ReleaseMouseCapture(), der Prozess vom Mauszeiger entkoppelt.

Abb.1.7. – Der Source-Code von MouseLeftButtonUp-Event.

Das war auch schon alles, um ein Element mittels Mausklick über die Oberfläche bewegen und abzusetzen.

Abb.1.8. – Drag and Drop von TextBlock.

Ein Silverlight-Window als Beispiel

Noch beliebter sind Windows ähnliche Fenster, die durch ein Grid-Element gezeichnet werden können. Ein Beispiel XAML-Code dafür wäre:

Abb.1.9. – Ein einfaches Windows-Fenster in XAML.

Das obere Schließen-Kreuz wird hierbei von einem TextBlock-Element mit einem normalen Buchstaben „X“ dargestellt. Das TextBlock-Element hat einen Event auf MouseLeftButtonDown und lässt das Window mit folgendem Code verschwinden: Window.Visibility = Visibility.Collapsed;

Wenn diese Funktionalität eingeführt wird, muss allerdings das Event vom Window mit MouseLeftButtonDown um eine IF-Abfrage mit if( Window.Visibility == Visibility.Visible ) erweitert werden, um einer Exception aus dem Weg zu gehen.

Abb.1.10. – Das Silverlight-Window.

Fazit

Mit Silverlight eigene Window-Elemente zu Coden macht um einiges mehr Spaß als fertige AJAX Funktionen in HTML zu definieren. Wenn es dann um Details geht, müssen umfangreiche JavaScript Kenntnisse vorhanden sein. Die Silverlight-Applikationen werden um einiges Attraktiver, zudem kann ein persönliches einrichten der Oberfläche für die Anwender zur Verfügung gestellt werden. Die Positionen können ja anschließend in den Anwendungsspeicher abgelegt werden.

Source-Code Download

SilverlightDragAndDropExample.zip (559,70 kb)

SilverlightWindow.zip (54,93 kb)

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.