Da ich mich in den letzten Wochen und Monaten immer häufiger mit Silverlight beschäftigt habe, möchte ich in nächster Zeit einige kleine Beiträge zu meinen Erfahrungen veröffentlichen. Beginnen werde ich mit einem kleinen Beispiel, dass das MultiScaleImage-Control dazu verwendet, große Bilder in einer Slideshow anzuzeigen und fließend zu zoomen.

Bevor Silverlight-Anwendungen geschrieben werden können müssen neben einem Visual Studio (vorzugsweise 2008) die Silverlight-Tools installiert sein (kann hier herunter geladen werden). Dieser sogenannte Silverlight-Chainer beinhaltet das SDK und alle nötigen Tools.

Da im Visual Studio die Silverlight-Anwendungen nicht grafisch designt werden können ist es außerdem empfehlenswert sich die aktuelle Version des Expression Blend Previews herunterzuladen (hier). Wenn man sich erst einmal in XAML (Sprache zur Beschreibung und Erstellung von Oberflächen) eingearbeitet hat, ist es auch ganz einfach Anpassungen direkt im Code vorzunehmen.

Desweiteren wird zum Anlegen der frei zoombaren Bilder der Deep Zoom Composer benötigt (kann hier herunter geladen werden).

Nachdem alle benötigten Komponenten installiert sind, kann im Visual Studio ein neues Silverlight Projekt angelegt werden. Zunächst habe ich in der Page.xaml das Design der Anwendung vorgenommen. Der Haupt-Container „LayoutRoot“ bekommt eine Hintergrundfarbe, ein MultiScaleImage-Control mit den Namen „MSI1“ sowie vier Button; zwei zum Durchblättern und zwei zum Zoomen. Die Buttons werden jeweils mit einem Click-Event und das Haupt-Control mit einem Load-Event versehen. Das Bearbeiten der Oberfläche kann entweder grafisch im Expression Blend oder per XAML-Code im Visual Studio vorgenommen werden, was dann wie folgt aussieht:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.Page" Width="800″ Height="600″ Loaded="UserControl_Loaded">
	<Grid x:Name="LayoutRoot" Background="#FF030044″ >
		<MultiScaleImage x:Name="MSI1″>
		</MultiScaleImage>
		<Button Height="20″ HorizontalAlignment="Right" Margin="0,8,8,0″ x:Name="ButtonNext" VerticalAlignment="Top" Width="20″ Content=">" Click="ButtonNext_Click"/>
		<Button Height="20″ HorizontalAlignment="Right" Margin="0,8,32,0″ x:Name="ButtonPrev" VerticalAlignment="Top" Width="20″ Content="<" Click="ButtonPrev_Click"/>
		<Button Height="20″ HorizontalAlignment="Right" Margin="0,570,8,0″ x:Name="ButtonPlus" VerticalAlignment="Top" Width="20″ Content="+" Click="ButtonPlus_Click"/>
		<Button Height="20″ HorizontalAlignment="Right" Margin="0,570,32,0″ x:Name="ButtonMinus" VerticalAlignment="Top" Width="20″ Content="-" Click="ButtonMinus_Click"/>
	</Grid>
</UserControl>

Die zu verwendenden Bilder müssen mit dem Deep Zoom Composer geladen und im „Silverlight Export“ mit den Einstellungen „Export as Composition“ und „Export Images“ exportiert werden. Um das Beispiel möglichst einfach zu halten codiere ich die Pfade zu den Bildern direkt im Quellcode. Die Datei „dzc_output.xml“ und das Verzeichnis „dzc_output_files“ der Bilder werden jeweils in ein Unterverzeichnis des Outputverzeichnis der Silverlight-Applikation kopiert. In einem Dictionay (Silverlight unterstützt nur generische Containerklassen) speichere ich als Key eine ID und als Wert die Uri der Bilddatei. In der Methode des Load-Event gebe ich mit Hilfe der DeepZoomImageTileSource-Klasse das Bild für das MultiScaleImage an:

MSI1.Source = new DeepZoomImageTileSource(new System.Uri(sources[0], UriKind.Relative));

In den Events für das weiter- und zurückschalten verändere ich jeweils den Index der Quelle. Das Zoomen wird mit der ZoomAboutLogicalPoint-Methode realisiert, die als Parameter den Zoom-Faktor und einen Punkt erwartet. Um beispielsweise mit den Faktor 1,2 zentral in das Bild zu zoomen sind folgende Anweisungen nötig:

Point logicalPoint = MSI1.ElementToLogicalPoint(new Point(Width / 2, Height / 2));
MSI1.ZoomAboutLogicalPoint(1.2, logicalPoint.X, logicalPoint.Y);

Die fertige, um einige Mausfunktionalitäten erweiterte, Anwendung, ist unter folgender Adresse zu erreichen:

http://blog.sternico.de/wp-content/uploads/WebDemos/DeepZoom/Default.html

Dieser Artikel wurde am Donnerstag, 04. September 2008 um 13:24 veröffentlicht und ist abgelegt unter Silverlight 2.0, Software Entwicklung. Du kannst die Antworten zu diesem Artikel mit Hilfe des RSS 2.0 Feeds verfolgen. Du kannst eine Antwort hinterlassen oder einen Trackback von deiner Seite aus senden.