Wie man den SharePoint Silverlight sprechen lernt, habe ich in diesem Post beschrieben. Im heutigen Post geht es darum ein erstes Beispiel zu entwickeln, hierbei wird ein einfaches Silverlight UserControl in einem SharePoint Webpart bereitgestellt.
Das Silverlight Control
Zunächst muss ein Silverlight UserControl erstellt werden, ich habe zur Demonstration ein einfaches Control gewählt welches eine kleine Message anzeigt wenn der Anwender später mit der Maus über das Control hovert.
Hier kurz das XAML des Controls
1: <UserControl x:Class="SilverlightWebPart.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="100">
5: <Canvas Width="400" Height="100" >
6: <Canvas.Resources>
7: <Storyboard x:Name="FadeIn">
8: <DoubleAnimation Storyboard.TargetName="tbSilverlight"
9: Storyboard.TargetProperty="Opacity" From="0.1" To="1.0" Duration="0:0:2"/>
10: </Storyboard>
11: <Storyboard x:Name="FadeOut">
12: <DoubleAnimation Storyboard.TargetName="tbSilverlight"
13: Storyboard.TargetProperty="Opacity" From="1.0" To="0.1" Duration="0:0:2"/>
14: </Storyboard>
15: </Canvas.Resources>
16: <Canvas.Background>
17: <LinearGradientBrush>
18: <GradientStop Color="White" Offset="0"/>
19: <GradientStop Color="LightSteelBlue" Offset="1"/>
20: <GradientStop Color="White" Offset="2"/>
21: </LinearGradientBrush>
22: </Canvas.Background>
23: <TextBlock x:Name="tbSilverlight" Canvas.Top="36" Opacity="0.1"
24: Width="400" Height="100" Text="Hello SharePoint, I am Silverlight"
25: TextAlignment="Center" FontSize="22" MouseEnter="tbSilverlight_MouseEnter"
26: MouseLeave="tbSilverlight_MouseLeave"/>
27: </Canvas>
28: </UserControl>
Wie man sieht ein ganz einfaches XAML, die Animationen werden im MouseEnter und im MouseLeave gestartet, hier die entsprechende Realisierung im CodeBehind.
1: private void tbSilverlight_MouseEnter(object sender, MouseEventArgs e)
2: {
3: Storyboard sb = (Storyboard)FindName("FadeIn");
4: if (sb != null)
5: sb.Begin();
6: }
7:
8: private void tbSilverlight_MouseLeave(object sender, MouseEventArgs e)
9: {
10: Storyboard sb = (Storyboard)FindName("FadeOut");
11: if (sb != null)
12: sb.Begin();
13: }
Die Rahmenbedingungen
Damit das Silverlight Control beim Seitenaufruf auch an den Browser übertragen werden kann, muss ein spezielles Verzeichnis im Rootfolder der SharePoint WebApplicatioin angelegt werden. Hierzu kann man entweder den weg über den Windows Explorer oder über das IIS-Admin-Interface gehen.
Wenn die SharePoint Instanz auf dem Standard Port 80 läuft wäre dass demnach C:\Inetpub\wwwroot\wss\VirtualDirectories\80\. Hier muss das Verzeichnis ClientBin angelegt werden. Grundsätzlich ist es empfehlenswert sich eine gut verständliche Ordnerstruktur unterhalb des Ordners ClientBin anzulegen um den Überblick zu behalten.
Für dieses Beispiel habe ich noch einen Unterordner SharePointSpeeksSilverlight angelegt.
Mein kompiliertes Silverlight Control HelloSharePoint.xap kopiere ich nun in dieses Verzeichnis, also C:\Inetpub\wwwroot\wss\VirtualDirectories\80\ClientBin\SharePointSpeeksSilverlight\HelloSharePoint.xap
Das SharePoint WebPart
Nachdem in Silverlight nun alles erledigt wurde, geht es an das SharePoint WebPart, hierzu wird ein einfaches SharePoint WebPart mit der Hilfe der SharePoint Extensions für Visual Studio erstellt.
Dem neuen WebPart Projekt müssen noch 2 DLL’s bekannt gemacht werden
- System.Web.Silverlight.Dll
- System.Web.Extensions.Dll
Im Codefile des Webparts muss nun lediglich ein ScriptManager hinzugefügt und das Silverlight UserControl geladen werden. Hierzu erstellt man einfach, wie bei allen anderen Controls, eine Klassenvariable.
1: Silverlight mySilverlightUserControl = null;
Das Laden des ScriptManagers erfolgt im OnLoad Event des WebParts
1:protected override void OnLoad(EventArgs e)
2:{
3: base.OnLoad(e);
4: ScriptManager sm = ScriptManager.GetCurrent(this.Page);
5: if (sm == null)
6: {
7: sm = new ScriptManager();
8: this.Controls.AddAt(0, sm);
9: }
10:}
In der Methode CreateChildControls wird nun das Silverlight Control geladen und in die Controls Collection des Webparts hinzugefügt
1:protected override void CreateChildControls()
2:{
3: base.CreateChildControls();
4: mySilverlightUserControl = new Silverlight();
5: mySilverlightUserControl.ID = "HelloSilverlightControl";
6: mySilverlightUserControl.Source = "/ClientBin/SharePointSpeeksSilverlight/HelloSharePoint.xap";
7: mySilverlightUserControl.Width = new Unit(400, UnitType.Pixel);
8: mySilverlightUserControl.Height = new Unit(100, UnitType.Pixel);
9: this.Controls.Add(mySilverlightUserControl);
10:}
Was wird hier gemacht? Nun es wird eine neue Instanz der Silverlight Klasse erstellt und diesem Control eine eindeutige ID zugewiesen. Der wichtigste Teil in diesem Snippet ist das Angeben der Quelle des Silverlight Controls, was in Zeile 6 geschieht. Anschließend wird noch die Größe angegeben und das Silverlight Control in die ControlCollection des WebParts gesteckt.
Das Ergebnis
Nach dem Deployment der Solution kann das WebPart wie gewohnt im SharePoint aktiviert werden. Hier das Ergebnis
Wie man sehen kann, ist es sehr einfach Silverlight in SharePoint zu verwenden. Zudem macht es wirklich Spass zu sehen wie zwei große Technologien zusammenkommen. Leider hatte ich bis heute noch nicht die Gelegenheit viel mit Silverlight zu machen, klar einige kleine Tests und mal grob ausprobieren was so geht.. aber darüber hinaus war ich noch nicht viel in Berührung mit SL.
Doch ich denke durch die Verwendung in SahrePoint werde ich in nächster Zukunft wohl etwas mehr Silverlight machen können und dürfen.. :D
Was meint Ihr zu diesem Thema? Bereits Erfahrungen im Zusammenspiel von SharePoint und Silverlight?