Einfache Silverlight-Anwendung: Hallo Welt

Einfache Silverlight-Anwendung: Hallo Welt

Eine kleine Silverlight 4 Anwendung, die einige der Möglichkeiten von Silverlight aufzeigt.

Voraussetzungen: Visual Studio 2010 in beliebiger Version mit installierten Silverlight 4 Tools for Visual Studio 2010. Sollte der Link nicht mehr funktionieren (Microsoft stellt seine wenig aussagekräftigen URLs gerne schonmal um) findet sich ein Hinweis auf diese Datei sowie zahlreiche weitere interessante Informationen zu dem Thema Silverlight unter Silverlight Get Started.

Hier direkt die Applikation zum Ausprobieren:

Install Microsoft Silverlight



Zum Einbinden einer Silverlight-Applikation in WordPress siehe embed Silverlight Applications. Anschließend muß eigentlich nur ein Verzeichnis für die FTP-Uploads der .xap Dateien erstellt werden (WordPress erlaubt es nicht, diese direkt hochzuladen), sowie der Dateipfad in den Plugin-Einstellungen angepasst werden. Anschließend kann die hochgeladene Applikation leicht eingebettet werden, z. B. so:
Install Microsoft Silverlight


Zum Erstellen muß zunächst ein neues Visual Studio Projekt angelegt werden.

Im folgende Dialog können wir auswählen, welche Silverlight Version wir verwenden wollen. Ist hier nur die Version 3 auswählbar, müssen wir noch die Silverlight 4 Tools for Visual Studio 2010 installieren. Nun können wir auch Silverlight 4 auswählen.

Für einfache Anwendungen deaktivieren wir die Option, die Silverlight Anwendung in einer eigenen Webseite zu hosten (dadurch würde ein eigenes ASP.net Projekt erzeugt, diese Option benötigen wir z. B., wenn wir Web Services benutzen wollen, die auf einem ASP.net Server laufen und in einigen anderen Fällen, die für uns jedoch nicht relevant sind). So wird von Visual Studio automatisch eine statische Testseite erzeugt, was die Projektstruktur vereinfacht und für unser Vorhaben gar keine Einschränkung bedeutet.

Nun stehen wir vor einem leeren MainPage.xaml Dokument, wobei wir oben eine Design-Ansicht haben, wie wir es z. B. von MFC oder WindowsForms kennen. Unten sehen wir direkt die äquivalente Beschreibung in XAML, der Oberflächen-Beschreibungssprache von Microsoft, die u. a. für Silverlight, aber auch für WPF verwendet wird.

Wie in der oben eingebetteten Silverlight Applikation gesehen, fangen wir jetzt damit an, die Oberfläche zu konstruieren.

Zunächst ziehen wir eine TextBox als Eingabeelement oben rechts im Fenster auf.
Dazu öffnen wir links die ToolBox, die sämtliche Silverlight Controls, also Oberflächenelemente, enthält. Dort wählen wir die TextBox aus und ziehen damit dann ein Rechteck oben rechts im Designfenster, das dann unserer TextBox entspricht. Die Textbox hat automatisch den Namen textBox1 bekommen, und unter diesem Namen können wir ab jetzt in der Code-behind Datei MainPage.xaml.cs auf diese TextBox zugreifen. Dazu jedoch gleich mehr.

Als nächstes fügen wir unter der TextBox noch einen Button ein, und darunter wieder eine TextBox. Wenn wir nach dem Einfügen eines Elementes bei diesem Element die Größe per Maus verändern, bekommen wir auch automatisch Hilfslinien relativ zu den bereits bestehenden Elementen angezeigt, die die Ausrichtung vereinfachen. Alternativ hätten wir auch die Möglichkeit, Werte wie Größe und Position der einzelnen Elemente direkt unten im XAML zu verändern. Schließen z. B. alle Elemente links gleich ab, so stellen wir fest, dass auch der erste Wert (x-Koordinate, Abstand zum linken Rand) der Margin für alle Elemente gleich ist (wenn HorizontalAlignment ebenfalls für alle Werte auf „left“ steht).

Schließlich machen wir noch die unterste TextBox, textBox2, readonly. Dort soll unsere Ausgabe erscheinen.

Anschließend erzeugen wir noch oben links ein Label, und setzen den Content des Labels auf „Name“. Den Content (zu finden wieder in den „Properties“) des Buttons setzen wir auf „Grüßen“. Sollten wir einmal Probleme haben, eine bestimmte Eigenschaften im Properties Fenster zu finden, so hilft die Suchfunktion weiter. Zumindest dann, wenn wir ungefähr wissen, was wir suchen.

Der dazugehörige XAML-Code sieht dann folgendermaßen aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<userControl x:Class="SilverlightHelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
 
    <grid x:Name="LayoutRoot" Background="White">
        <textBox Height="49" HorizontalAlignment="Left" Margin="124,26,0,0" Name="textBox1" VerticalAlignment="Top" Width="213" />
        <button Content="Grüßen" Height="42" HorizontalAlignment="Left" Margin="124,99,0,0" Name="button1" VerticalAlignment="Top" Width="213" />
        <textBox Height="42" HorizontalAlignment="Left" Margin="124,162,0,0" Name="textBox2" VerticalAlignment="Top" Width="213" IsReadOnly="True" />
        <sdk:Label Height="22" HorizontalAlignment="Left" Margin="79,39,0,0" Name="label1" VerticalAlignment="Top" Width="39" Content="Name" />
    </grid>
</userControl>

Wenn wir jetzt die Applikation mit F5 starten, können wir bereits sehen, dass sie im Browser ziemlich genau so aussieht, wie bei uns im Design (abgesehen evtl. von der Größe).

Nun können wir uns der Logik zuwenden und den Button mit einer Funktion belegen. Dazu wählenwir den Button aus, gehen im Properties-Fenster auf Events und klicken dort doppelt rechts neben dem Click-Event. Damit landen wir automatisch in einer neu erstellten und mit einem Button-Click verbundenen Funktion in der Code-Behind-Datei MainPage.xaml.cs, die genau dafür da ist, solche Logik, die die nette Anzeige des xaml mit Leben füllt, zu beinhalten.

In dieser Datei stehen uns nun eben jene Elemente, die wir soeben erzeugt haben, auch programmatisch zur Verfügung.

Wir erhalten u. a. auch volle Intellisense Unterstützung, was Schreibfehler minimiert und uns nochmal auf die Sprünge hilft, wenn wir nicht mehr genau wissen, welches Element welchen Namen hat.

Hier legen wir nun, was genau passieren soll, wenn Button1 gedrückt wird. Das Ganze wird MFC oder WinForms Entwicklern wieder sehr ähnlich vorkommen. Letzten Endes bietet Silverlight ja auch Möglichkeiten der Oberflächenentwicklung, die diesen Technologien sehr ähnlich sind, und teilweise deutlich darüber hinausgehen (und teilweise auch eingeschränkt sind, der Umgebung und der kleinen Silverlight-Runtime geschuldet).

1
2
3
4
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            textBox2.Text = "Hallo " + textBox1.Text + ", was für ein schöner Tag";
        }

Wenn wir jetzt unsere Applikation wieder mit F5 laufen lassen, sehen wir bereits das Ergebnis unserer Arbeit: wenn wir einen Namen in textBox1 eintragen und auf Button1 drücken, erhalten wir einen Gruß in textBox2. Ganz groß. 🙂

Um die Applikation noch etwas komfortabler zu machen, wenn wir z. B. mehrere Leute grüßen wollen, fügen wir noch die Funktion hinzu, dass der vorhandene Text in textBox1 automatisch ausgewählt wird, wenn wir diese TextBox aktivieren (reinklicken). So können wir schnell einen neuen Namen eingeben.

Dazu fügen wir für das Event GotFocus wieder einen Handler hinzu, wie wir es eben für button1 gemacht haben.

Dazu fügen wir noch unseren Code hinzu:

1
2
3
4
        private void textBox1_GotFocus(object sender, RoutedEventArgs e)
        {
            textBox1.SelectAll();
        }

Ganz zum Schluß, um alles noch ein wenig aufzuhübschen, ändern wir noch die Farbe des Hintergrunden und setzen einen ansprechenden Gradienten. Wir wollen immerhin eine Web 2.0 Anwendung entwickeln. 🙂

Hierzu wählen wir das äußerste Element in der Applikation, das Grid LayoutRoot aus (mit der Maus in einem beliebigen Teil des Fensters klicken, wo wir kein Control sehen, oder direkt im XAML anwählen). Im Properties Fenster sehen wir nun (wieder von Events nach Properties umschalten) die Eigenschaften des Grids. Unter Brushes finden wir den Punkt Background, dieser sollte aktuell auf White stehen. Wenn wir in das Feld reinklicken, wo White steht, bekommen wir die Möglichkeit, einen Gradienten (Farbverlauf) auszuwählen. Das tun wir nun: oben das dritte Icon von links und unten das zweite Icon von links, Gradient Brush sowie Horizontal Gradient. Mit der Farbleiste unten können wir nun die Farben verändern: in das Haus unter der Leiste klicken, um die Farbe an dem Punkt des Farbverlaufes zu ändern. Auf das Haus klicken und zur Seite ziehen, um die Position innerhalb des Farbverlaufes zu ändern. Indem wir auf die Leiste selber klicken, können wir schließlich selber neue Punkte definieren und so den Farbverlauf interessanter gestalten.

Am besten macht so etwas ein Designer.

Jetzt sieht die Applikation (Start mit F5) genau so aus wie die in diese Webseite eingebettete Anwendung.

Der genaue XAML Code sieht so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<userControl x:Class="SilverlightHelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
 
    <grid x:Name="LayoutRoot">
        <textBox Height="49" HorizontalAlignment="Left" Margin="124,26,0,0" Name="textBox1" VerticalAlignment="Top" Width="213" GotFocus="textBox1_GotFocus" />
        <button Content="Grüßen" Height="42" HorizontalAlignment="Left" Margin="124,99,0,0" Name="button1" VerticalAlignment="Top" Width="213" Click="button1_Click" />
        <textBox Height="42" HorizontalAlignment="Left" Margin="124,162,0,0" Name="textBox2" VerticalAlignment="Top" Width="213" IsReadOnly="True" />
        <sdk:Label Height="22" HorizontalAlignment="Left" Margin="79,39,0,0" Name="label1" VerticalAlignment="Top" Width="39" Content="Name" />
        <grid.Background>
            <linearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <gradientStop Color="#FF246724" Offset="0" />
                <gradientStop Color="#FFFC6464" Offset="1" />
                <gradientStop Color="#FF26C61E" Offset="0.123" />
                <gradientStop Color="#FF1B948F" Offset="0.369" />
                <gradientStop Color="#FF2442BC" Offset="0.533" />
                <gradientStop Color="#FF4B00FA" Offset="0.803" />
            </linearGradientBrush>
        </grid.Background>
    </grid>
</userControl>

2 thoughts on “Einfache Silverlight-Anwendung: Hallo Welt

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.