Silverlight transparent und animiert

Man kennt das von Flash Websites. Über eine bestehende Website wandert eine Bild oder ein Objekt und der Hintergrund bleibt sichtbar. Um dies mit Sivlerlight zu ermöglichen müssen ein paar Dinge zutreffen.

Zunächst muss das root Canvas der XAMl Anwendung auf transparent gesetzt werden.

<

UserControl x:Class="transparenz.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300"

Background="Transparent"

Dann muss das DIV das den Silverligth Hoste enthält über den HTML Code gelegt werden. Die geschieht per CSS Style. Das Attribut overflow: hidden verhindert zusätzlich Scrollbars wenn der Platz im Div nicht ausreichen sollte.

<div id="silverlightControlHost" style="position: absolute; left:0px; top:0px;overflow:hidden">

Die Erstellung  des Silverlight Host Objektes geschieht unter Silverlight 2.0 anders als in der Version 1.0. Bisher erstellten die Wizards von Visual Studio und Expression Blend immer eine HTMl Seit mit Jsript Code zur erzeugung (createobjectex). Jetzt wird per Object Element und Param Attributen das SL Objekt instanziert. Persönlich find ich das schöner. Wichtig ist die beiden Attribute background und windowless wie folgt zu setzen

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">

<param name="source" value="ClientBin/transparenz.xap"/>

<param name="onerror" value="onSilverlightError" />

<param name="background" value="Transparent" />

<param name="windowless" value="true" />.

Das Ergebnis könnte dann so aussehen

image

Kommentare sind geschlossen