Kender du det der med at man sidder med alle de der fede idéer oppe i hovedet til hvordan ens nye - og alt for cool'e website - skal se ud...?

Man har de vildeste planer om den topsejge brugergrænseflade man skal lave, og når man så fyrer op under Visual Studio, og kaster et blik i toolbox'en ser man... Akja... f.eks. en DropDownList og en CheckBox - som jo altså ikke er noget der helt giver den der Wauw-oplevelse...?

Næh... Nogle gange kunne man ønske sig lidt mere lir i browseren, hvilket Silverlight er et glimrende værktøj til.


Silverlight - tidligere WPF/E - giver nogle fede muligheder for at vise lækker grafik og video i browsere. Helt grundlæggende er der tale om, at et subset af WPF bringes ud til klienten i form af et plug-in, hvorefter man har mulighed for at vise en brugerflade bekrevet i XAML.

Læs iøvrigt Bo's indlæg som Silverlight.

Lad os tage et hurtigt eksempel (koden kan hentes her):

Hvis vi tager udgangspunkt i følgende XAML-fil, (den slags kan laves i hånden, eller med et værktøj som Expression Blend):

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Loaded="javascript:onCanvasLoaded" >
  <Canvas.Background>
    <LinearGradientBrush>
      <GradientStop x:Name="start" Color="#ffffff" Offset="0.0" />
      <GradientStop x:Name="end" Color="#000000" Offset="1.0" />
    </LinearGradientBrush>
  </Canvas.Background>
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="r1"
              Storyboard.TargetProperty="Angle"
              From="0"
              To="360"
              Duration="0:0:5"
              AutoReverse="True"
              RepeatBehavior="Forever" />
            <DoubleAnimation
              Storyboard.TargetName="r2"
              Storyboard.TargetProperty="Angle"
              From="360"
              To="0"
              Duration="0:0:5"
              AutoReverse="True"
              RepeatBehavior="Forever" />
            <ColorAnimation
              Storyboard.TargetName="start"
              Storyboard.TargetProperty="Color"
              From="#000000"
              To="#ffffff"
              Duration="0:0:3.5"
              AutoReverse="True" 
              RepeatBehavior="Forever" />
            <ColorAnimation
              Storyboard.TargetName="end"
              Storyboard.TargetProperty="Color"
              From="#ffffff"
              To="#000000"
              Duration="0:0:5.5"
              AutoReverse="True" 
              RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <TextBlock
    x:Name="s1"
    Text="Silverlight"
    FontFamily="Arial"
    FontSize="60"
    FontWeight="Bold"
    Foreground="Silver">
    <TextBlock.RenderTransform>
      <RotateTransform
        x:Name="r1" />
    </TextBlock.RenderTransform>
  </TextBlock>
  <TextBlock
    x:Name="s2"
    Text="Silverlight"
    FontFamily="Arial"
    FontSize="60"
    FontWeight="Bold"
    Foreground="Silver">
    <TextBlock.RenderTransform>
      <RotateTransform
        x:Name="r2" />
    </TextBlock.RenderTransform>
  </TextBlock>
</Canvas>


Så kræver der egentlig ikke så meget andet, end at man sørger for at instantiere Silverlight i browseren. Det er vanen tro forskelligt fra browser til browser hvordan den slags foregår. I IE er det et spørgsmål om et object-tag, og i FireFox og Safari et embed-tag.
Det kræver som nævnt et lille plug-in (ca. 2MB), hvilket der så skal henvises til, hvis det ikke er installeret, men alle den slags forhold, kan man heldigvis slippe for at bekymre sig om, da man kan benytte agHost.js som ligger i SDK'et. En lille JavaScript-fil, hvor bemeldte elementer er implementeret.

Benyttes den, skal man blot instantiere et agHost objekt, hvilket kan gøres reletivt let:

Først et panel der kan huse kontrollen:

<asp:Panel ID="agControlHost" runat="server" />

Og et script til at sørge for at man får vist sit Silverlight objekt (baseret på xaml-filen):

<script type="text/javascript">
new agHost(
    "agControlHost", // 
    "agControl",
    "100px",
    "100px",
    "#000000",
    null,
    "SomeXaml.xaml"
);
</script>


Hvilket så blot kræver at man sikrer at agHost.js kommer med ud til browseren: 

<script type="text/javascript" src="aghost.js"></script>

Typisk vil det være interessant også at kunne skrive noget client-side kode mod sit Silverlight-objekt, hvilket selvfølgelig også er muligt.
I eksemplet kunne det f.eks. være hensigtmæssigt, at sikre sig at noget omkring størrelser, og de punkter der roteres om:

function onCanvasLoaded(sender, args) {
    var control = sender.getHost();
    var containerWidth = control.ActualWidth;
    var containerHeight = control.ActualHeight;
    var canvas = sender;
    
    canvas.Width = containerWidth;
    canvas.Height = containerHeight;

    var s1 = control.findName("s1");
    var s2 = control.findName("s2");
    
    s1["FontSize"] = s2["FontSize"] = containerWidth/5;
    s1["Text"] = s2["Text"] = "Silverlight";
    s1["Canvas.Left"] = s2["Canvas.Left"] = (containerWidth/2 - s1.ActualWidth/2)+"px";
    s1["Canvas.Top"] = s2["Canvas.Top"] = (containerHeight/2 - s1.ActualHeight/2)+"px";    
        
    var r1 = control.findName("r1");
    r1["CenterX"] = s1.ActualWidth/2 + "px";
    r1["CenterY"] = s1.ActualHeight/2 + "px";
    
    var r2 = control.findName("r2");
    r2["CenterX"] = s2.ActualWidth/2 + "px";
    r2["CenterY"] = s2.ActualHeight/2 + "px";
}


Bemærk forøvrigt navnet agHost, og i selve filen type="application/ag-plugin"... Silverlight (eller noget i samme stil) har været på tegnebrædtet i en rum tid ;o)

Nu er jeg jo ikke udpræget fortaler for at sylte ens sider ind i diverse JavaScript, og det er klart at det ville være at foretrække, hvis man blot kunne trække en Silverlight kontrol ind fra toolbox'en og angive hvilken xaml-fil der skulle bruges - og det er et supereksempel på en glimrende ajax-extender, baseret på modellen fra Ajax Control Toolkit.

Så kan man strikke en extender sammen, der giver muligheden for at "extende" et eksisterende Panel til en Silverlight container, og lade extenderen sørge for, at agHost.js bliver smidt med ud til klienten.

En rigtig elegant løsning som heldigvis allerede er lavet, og du kan hente et eksempel fra Davids Ansons blogindlæg. Et meget pædagogisk eksempel der viser hvordan det ser ud hhv. med og uden extender - og extenderen ligger der selvfølgelig også.

Mit eget lille eksempel (baseret på samme løsning) kan du hente her.

Men men men.... inden du går igang, er det en god idé at få fat i Silverlight fra produktsiden, hvor der også er en hel del andre ressourcer end lige msi'en.


Mulighederne med Silverlight er temmelig omfattende - tag f.eks. og kig lidt i Da Vinci's værker her...

Mvh
Jeppe