Toastbrot
27.02.2009, 21:33
Hallo,
in diesem Tutorial geht es um XAML (eXtensible Application Markup Language), einer Erweiterung des .NET Frameworks, um die Oberfläche eurer Programme aufzupimpen. XAML wird wie XML formuliert.
Es gibt zwei Möglichkeiten XAML zu schreiben. Zum einen die WYSIWYG (What you see is what you get) Methode mit Expression Blend aus dem Hause Microsoft. Da sich die Oberfläche dieses Programms aber selbst erklärt und es sich deshalb nicht lohnen würde ein Tutorial dazu zu schreiben wähle ich jetzt mal den steinigen Weg. Alles per Hand!
Um XAML in Visual Studio zu verwenden, startet ein neues "WPF Application" Projekt. WPF (Windows Presentation Foundation), auch bekannt unter dem Codenamen Avalon, ist das Grafik Framework des .NET Frameworks 3.0.
Wenn ihr das getan habt wartet einen Augenblick bis ihr einen Form Designer mit einer leeren Form seht.
Unter diesem Fenster seht ihr nun den ersten XAML Code, der so aussehen sollte:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>
Wer HTML kann, wird sich wohl sehr schnell zurecht finden, denn im Prinzip ist das hier nichts anderes.
Ein Objekt erzeugt man so:
<Objekt Eigenschaft1=a Eigenschaft2=b ... EigenschaftN=...> </Objekt> Als erstes wollen wir mal das Fenster ein bisschen größer machen.
ändert dafür die Eigenschaft Width und Height im Window Objekt ein bisschen. Am besten stellt ihr die Width Eigenschaft auf 640 und die Height Eigenschaft auf 480. Das sollte fürs erste reichen.
Euer Code sollte nun so aussehen:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="480" Width="640">
<Grid>
</Grid>
</Window>Nun fügen wir einen stinknormalen Button hinzu, wie man ihn vom ursprünglichem Form Designer kennt.
Alle Objekte die ihr erzeugt müssen zwischen <grid> und </grid> stehen, ansonsten gibt es Fehler.
Fügt folgenden Code hinzu:
<Button Height="40" Width="100" Margin="0,0,0,0">Text</Button>Margin gibt den Abstand zum Mittelpunkt des Formulars an. Wenn alle 4 Werte gleich sind, befindet sich der Button genau in der Mitte.
1. Wert: bewegt das objekt um die angegebenen Einheiten nach rechts
2. Wert: bewegt das objekt um die angegebenen Einheiten nach unten
3. Wert: bewegt das objekt um die angegebenen Einheiten nach links
4. Wert: bewegt das objekt um die angegebenen Einheiten nach oben
Zwischen <Button...> und </Button> könnt ihr einen Text verfassen,d er auf dem Button angezeigt wird.
Wahlweise könnt ihr auch die Content Eigenschaft verwenden, um Text auf dem Button anzuzeigen.
Das Fenster oben sollte sich sofort verändern. Wenn ihr den Code nicht rauskopiert habt werden ihr sehen, dass man sich auch im XAML Editor alles zusammenklicken kann, wie auch im normalem Code Fenster.
Das war aber nun noch nichts, was man mit dem normalem Editor nicht auch hätte tun können. Damit sich XAML auch lohnt lassen wir unseren Button mal kippen.
Folgenden Code müsst ihr dafür zwischen <Button ...> und </Button> schreiben:
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<RotateTransform Angle="-23"/>
</TransformGroup>
</Button.RenderTransform>
Mit diesem Code werden die RenderTransform Eigenschaften des Buttons eingestellt. ScaleTransform setzt die Größe des Buttons fest. Wenn beide Werte 1 sind, hat der Button die normale Größe. Bei 2 die doppelte, bei 0.5 die halbe Größe.
Die Zeile muss angegeben werden, da der Compiler sonst standardmäßig die X und Y Werte auf 0 setzt. Somit wäre der Button unsichtbar.
Die eigentliche Eigenschaft, die wir verändern wollen befindet sich bei RotateTransform. Angle gibt den Winkel an, in dem das Objekt gedreht werden soll.
Diese Transform Eigenschaften können für so ziemlich jedes Objekt verwendet werden, außer bei dem Fenster selbst (finde ich recht schade)
Bei einer TextBox kann man dann sogar schräg schreiben :D
Nun sieht unser Fenster aber noch weiß aus. Das ist ja langweilig im Gegensatz zu dem ultra Button den wir jetzt auf der Form haben.
Wie wäre es daher mit einem Verlauf von Rot nach Schwarz als Hintergrund? Kein Problem mit XAML!
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1.2" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFC02525" Offset="1"/>
</LinearGradientBrush>
</Window.Background>Wer gut aufgepasst hat, kann sich sicher denken, dass der Code zwischen <Window ...> und </Window> stehen muss.
LinearGradientBrush gibt mit den Eigenschaften EndPoint und StartPoint an, wo der Verlauf starten soll. Die Angaben 0.5,1.2 etc. sind in Prozent angegeben. Wenn wir ein Fenster mit der Breite 640px haben und wir als X-Wert 0.5 angeben, ist die tatsächliche Position also 320px.
GradientStop sorgt für die verschiedenen Farben. Die Color Eigenschaft gibt - wie der Name schon sagt - die Farbe an. Die Offset Eigenschaft gibt an, zu welcher Farbe verlaufen werden soll. In diesem Beispiel hat man einen verlauf von Schwarz nach Rot (wenn man von oben nach unten schaut)
Wenn man die Offsets umdrehen würde, hätte man einen Verlauf von Rot nach Schwarz, also einfach umgedreht.
Das Programm sieht nun zwar recht schön aus, kann aber noch nichts. Also fügen wir nun dem Button eine kleine "Hallo Welt!" Funktion hinzu.
Dazu muss dem Button zunächst einmal eine Methode zugewiesen werden, die aufgerufen werden soll, wenn auf ihn geklickt wurde.
Für den Button gibt es dazu eine Eigenschaft namens Click, der ihr den Wert "hallowelt" zuweißt.
Die Button-Zeile sollte nun so aussehen:
<Button Height="40" Width="100" Margin="0,0,0,0" Content="Text" Click="hallowelt">Nun muss diese Methode noch erstellt werden. Macht einen Doppelklick auf die .vb Datei im Solution Explorer und schreibt folgenden Code hinein:
Public Sub hallowelt()
MsgBox("hallowelt")
End SubWenn nun das Programm mit einen Druck auf F5 gestartet wird und ihr auf den Button klickt, öffnet sich das Hallo Welt Fenster.
Ich hoffe, ich konnte euch einen kleinen Einblick in XAML verschaffen. Es ist natürlich noch viel mehr damit möglich. Wer mehr Eigenschaften will, kann sich diese entweder zusammenklicken oder nach einer Liste suchen.
Zum Schluss noch eine kleiner Tipp: XAML ist im Gegensatz zu VB.NET Case Sensitive. Das heißt soviel wie Unterscheidung zwischen Groß- und Kleinschreibung.
Cheers,
ToastBrot
in diesem Tutorial geht es um XAML (eXtensible Application Markup Language), einer Erweiterung des .NET Frameworks, um die Oberfläche eurer Programme aufzupimpen. XAML wird wie XML formuliert.
Es gibt zwei Möglichkeiten XAML zu schreiben. Zum einen die WYSIWYG (What you see is what you get) Methode mit Expression Blend aus dem Hause Microsoft. Da sich die Oberfläche dieses Programms aber selbst erklärt und es sich deshalb nicht lohnen würde ein Tutorial dazu zu schreiben wähle ich jetzt mal den steinigen Weg. Alles per Hand!
Um XAML in Visual Studio zu verwenden, startet ein neues "WPF Application" Projekt. WPF (Windows Presentation Foundation), auch bekannt unter dem Codenamen Avalon, ist das Grafik Framework des .NET Frameworks 3.0.
Wenn ihr das getan habt wartet einen Augenblick bis ihr einen Form Designer mit einer leeren Form seht.
Unter diesem Fenster seht ihr nun den ersten XAML Code, der so aussehen sollte:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>
Wer HTML kann, wird sich wohl sehr schnell zurecht finden, denn im Prinzip ist das hier nichts anderes.
Ein Objekt erzeugt man so:
<Objekt Eigenschaft1=a Eigenschaft2=b ... EigenschaftN=...> </Objekt> Als erstes wollen wir mal das Fenster ein bisschen größer machen.
ändert dafür die Eigenschaft Width und Height im Window Objekt ein bisschen. Am besten stellt ihr die Width Eigenschaft auf 640 und die Height Eigenschaft auf 480. Das sollte fürs erste reichen.
Euer Code sollte nun so aussehen:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="480" Width="640">
<Grid>
</Grid>
</Window>Nun fügen wir einen stinknormalen Button hinzu, wie man ihn vom ursprünglichem Form Designer kennt.
Alle Objekte die ihr erzeugt müssen zwischen <grid> und </grid> stehen, ansonsten gibt es Fehler.
Fügt folgenden Code hinzu:
<Button Height="40" Width="100" Margin="0,0,0,0">Text</Button>Margin gibt den Abstand zum Mittelpunkt des Formulars an. Wenn alle 4 Werte gleich sind, befindet sich der Button genau in der Mitte.
1. Wert: bewegt das objekt um die angegebenen Einheiten nach rechts
2. Wert: bewegt das objekt um die angegebenen Einheiten nach unten
3. Wert: bewegt das objekt um die angegebenen Einheiten nach links
4. Wert: bewegt das objekt um die angegebenen Einheiten nach oben
Zwischen <Button...> und </Button> könnt ihr einen Text verfassen,d er auf dem Button angezeigt wird.
Wahlweise könnt ihr auch die Content Eigenschaft verwenden, um Text auf dem Button anzuzeigen.
Das Fenster oben sollte sich sofort verändern. Wenn ihr den Code nicht rauskopiert habt werden ihr sehen, dass man sich auch im XAML Editor alles zusammenklicken kann, wie auch im normalem Code Fenster.
Das war aber nun noch nichts, was man mit dem normalem Editor nicht auch hätte tun können. Damit sich XAML auch lohnt lassen wir unseren Button mal kippen.
Folgenden Code müsst ihr dafür zwischen <Button ...> und </Button> schreiben:
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<RotateTransform Angle="-23"/>
</TransformGroup>
</Button.RenderTransform>
Mit diesem Code werden die RenderTransform Eigenschaften des Buttons eingestellt. ScaleTransform setzt die Größe des Buttons fest. Wenn beide Werte 1 sind, hat der Button die normale Größe. Bei 2 die doppelte, bei 0.5 die halbe Größe.
Die Zeile muss angegeben werden, da der Compiler sonst standardmäßig die X und Y Werte auf 0 setzt. Somit wäre der Button unsichtbar.
Die eigentliche Eigenschaft, die wir verändern wollen befindet sich bei RotateTransform. Angle gibt den Winkel an, in dem das Objekt gedreht werden soll.
Diese Transform Eigenschaften können für so ziemlich jedes Objekt verwendet werden, außer bei dem Fenster selbst (finde ich recht schade)
Bei einer TextBox kann man dann sogar schräg schreiben :D
Nun sieht unser Fenster aber noch weiß aus. Das ist ja langweilig im Gegensatz zu dem ultra Button den wir jetzt auf der Form haben.
Wie wäre es daher mit einem Verlauf von Rot nach Schwarz als Hintergrund? Kein Problem mit XAML!
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1.2" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFC02525" Offset="1"/>
</LinearGradientBrush>
</Window.Background>Wer gut aufgepasst hat, kann sich sicher denken, dass der Code zwischen <Window ...> und </Window> stehen muss.
LinearGradientBrush gibt mit den Eigenschaften EndPoint und StartPoint an, wo der Verlauf starten soll. Die Angaben 0.5,1.2 etc. sind in Prozent angegeben. Wenn wir ein Fenster mit der Breite 640px haben und wir als X-Wert 0.5 angeben, ist die tatsächliche Position also 320px.
GradientStop sorgt für die verschiedenen Farben. Die Color Eigenschaft gibt - wie der Name schon sagt - die Farbe an. Die Offset Eigenschaft gibt an, zu welcher Farbe verlaufen werden soll. In diesem Beispiel hat man einen verlauf von Schwarz nach Rot (wenn man von oben nach unten schaut)
Wenn man die Offsets umdrehen würde, hätte man einen Verlauf von Rot nach Schwarz, also einfach umgedreht.
Das Programm sieht nun zwar recht schön aus, kann aber noch nichts. Also fügen wir nun dem Button eine kleine "Hallo Welt!" Funktion hinzu.
Dazu muss dem Button zunächst einmal eine Methode zugewiesen werden, die aufgerufen werden soll, wenn auf ihn geklickt wurde.
Für den Button gibt es dazu eine Eigenschaft namens Click, der ihr den Wert "hallowelt" zuweißt.
Die Button-Zeile sollte nun so aussehen:
<Button Height="40" Width="100" Margin="0,0,0,0" Content="Text" Click="hallowelt">Nun muss diese Methode noch erstellt werden. Macht einen Doppelklick auf die .vb Datei im Solution Explorer und schreibt folgenden Code hinein:
Public Sub hallowelt()
MsgBox("hallowelt")
End SubWenn nun das Programm mit einen Druck auf F5 gestartet wird und ihr auf den Button klickt, öffnet sich das Hallo Welt Fenster.
Ich hoffe, ich konnte euch einen kleinen Einblick in XAML verschaffen. Es ist natürlich noch viel mehr damit möglich. Wer mehr Eigenschaften will, kann sich diese entweder zusammenklicken oder nach einer Liste suchen.
Zum Schluss noch eine kleiner Tipp: XAML ist im Gegensatz zu VB.NET Case Sensitive. Das heißt soviel wie Unterscheidung zwischen Groß- und Kleinschreibung.
Cheers,
ToastBrot