Silverlight angepasst
Kommentare

Wie kann man die Silverlight Install Experience ans eigene Design anpassen und ein Steuerelement selbst schreiben? Gregor Biswanger erklärt das in folgendem Artikel.

Für Einsteiger: Silverlight Install Experience ans eigene Design anpassen

Wenn man als Anwender eine Website mit deren Silverlight-Anwendung aufruft, kann es passieren, dass man ein Bild erhält, wie in Abbildung 1 zu sehen. Dies liegt daran, dass der Anwender noch kein Silverlight-Plug-in installiert hat.

Standardanzeige, wenn Silverlight nicht installiert wurde
Standardanzeige, wenn Silverlight nicht installiert wurde

Das Problem: dieses Bild zeigt einem Anwender nicht auf den ersten Blick, dass zum Anzeigen eines weiteren Inhalts die Installation von Silverlight vonnöten ist. Als Best Practice wird empfohlen, einen eigenen Inhalt zu hinterlegen, anstatt das Standardbild anzuzeigen. Als Beispiel empfiehlt sich ein Screenshot der fertigen Anwendung, dass leicht transparent zum Webhintergrund angepasst wird, gefolgt mit einem erklärenden Text. Das neu erstellte Bild wird dann bei der Webanwendung, die serverseitig liegt, abgelegt. Anschließend muss nur noch in der jeweiligen HTML- oder ASPX-Seite das Standardbild ausgewechselt werden (Listing 1).

  

Das war es bereits! Denn sobald das Plug-in nicht aktiv oder installiert ist, wird der im Object-Element verschachtelte Inhalt als Alternative angezeigt. Um das Ganze jetzt austesten zu können, muss Silverlight nicht deinstalliert und wieder installiert werden. Man muss nur im Internet Explorer unter EXTRAS | INTERNETOPTIONEN | PROGRAMME | ADDONS VERWALTEN das Silverlight Plug-in aktivieren oder deaktivieren (Abb. 2).

Silverlight aktivieren/deaktivieren unter Addons-verwalten im IE8
Silverlight aktivieren/deaktivieren unter Addons-verwalten im IE8

Nach dem Deaktivieren von Silverlight kann nun ohne Weiteres der Test starten. Abbildung 3 zeigt, wie die Information als Alternative angezeigt werden kann. Für weitere Informationen zum Thema stellt Microsoft ein 37-seitiges White Paper zur Verfügung.

Alternative Anzeige, wenn Silverlight nicht installiert wurde.
Alternative Anzeige, wenn Silverlight nicht installiert wurde.

Menü 2 für Experten: WebBrowser-Steuerelement ab Silverlight 2 selbst geschrieben Am 18. November 2009 veröffentlichte Microsoft auf der PDC 2009 (Professional Developer Conference) in Los Angeles die erste Betaversion von Silverlight 4. Mit dieser Version wird ein neues Feature, ein WebBrowser-Steuerelement, hinzugefügt, das die Darstellung von HTML innerhalb von Silverlight ermöglicht. Besonders interessant ist hierbei, dass alles unterstützt wird, was auch der Internet Explorer unter Windows kann. Dennoch gibt es derzeit einige Einschränkungen: Zum einen kann das WebBrowser-Steuerelement nur OOB „Out of Browser“ verwendet werden, und zum anderen muss Full Trust aktiviert sein.

Schritt für Schritt zum eigenen WebBrowser-Steuerelement Zunächst wird in Visual Studio ein neues Silverlight-Projekt mit dem Namen SilverlightWebExample angelegt. Für das Control wird dann eine Klasse im Silverlight-Projekt benötigt, die denselben Namen WebBrowser bekommt, der auch unter Silverlight 4 verwendet wird. Damit die WebBrowser-Klasse sauber als Steuerelement fungieren kann, muss die ContentControl-Klasse als Basisklasse deklariert werden. Im nächsten Schritt werden alle bekannten Methoden und Properties, die laut MSDN-Dokumentation unter Silverlight 4 zu System.Windows.Controls.WebBrowser gehören, hinzugefügt. Das wäre zum einen das allgemeine Property Source vom Typ String. Hier wird später im XAML der erwünschte URL deklariert. Anschließend kommen die zwei Methoden void Navigate(Uri uri) und void NavigateToString(string text) an die Reihe, die für das Aufrufen von Webseiten oder explizitem HTML-Code dienen. Wenn die öffentliche Struktur wie in der MSDN-Dokumentation aufgestellt ist, folgt die Implementierung in der Methode Navigate. Die einkommende URI-Adresse wird der Source Property direkt zugewiesen. Für das Anzeigen von Webinhalten oder HTML wird ein eigenes HTML-Dokument mittels DOM-Zugriff benötigt. DOM steht für „Document Object Model“ und ist eine Spezifikation zu einer Schnittstelle von HTML- oder XML-Dokumenten. Ein Zugriff mittels DOM wird von der Klasse System.Windows.Browser.HtmlDocument zur Verfügung gestellt. Dank dieser Klasse ist ein Aufruf von HTML innerhalb der Silverlight-Oberfläche bereits ab Silverlight 2 möglich. Die HtmlDocument-Klasse verfügt außerdem über Methoden wie Submit, AttachEvent, DetachEvent, GetElementById und CreateElement. Außerdem können Sie mithilfe einiger geerbter Methoden (GetProperty und SetProperty) Attribute der HTML-Elemente aus dem verwalteten Code abrufen.

Damit auf die aktuelle Instanz der Website mit der aktuellen Silverlight-Anwendung zugegriffen werden kann, wird aus der statischen Klasse HtmlPage mittels Document-Methode die Instanz entnommen. Dem Document-Objekt können nun einzelne Html-Elemente, die von der Klasse HtmlElement erzeugt wurden, hinzugefügt werden. Als Erstes wird ein DIV-Element benötigt, das dann ein IFrame-Element beinhaltet. Diese sollen von zwei privaten Methoden GetDivElement und GetIframeElement erzeugt werden. Beide geben ihren Elementen als Standardattribut eine ID, die hier mittels GUID definiert wird. Danach folgt nur noch ein CSS-Style mittels SetStyleAttribute, das bestimmte Eigenschaften für das Design wie Höhe height und Breite width deklariert. Für das IFrame-Element wird außerdem die Position des XAML-Controls ermittelt, ansonsten würde das DIV mit dem IFrame-Element automatisch links oben im Browser angezeigt werden. Da es aber erwünscht ist, dass der neue HTML-Content genau dort liegt, wo es im XAML deklariert wurde, wird die zusätzliche Methode GetCurrentPosition geschrieben.

Für die Verschachtelung der beiden HTML-Elemente wird vom divElement-Objekt die Methode AppendChild verwendet. Beim Document-Objekt selbst wird im Body-Bereich die gleiche Methode AppendChild eingesetzt. Nun wäre auch schon das Grundlegende fertig entwickelt (Listing 2).

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -