Gehe in die MainWindowView und öffne die Toolbox, indem du im Menü View - Toolbox auswählst. Wenn du oben in der Leiste der Toolbox auf die Stecknadel klickst, wird jene angeheftet.
Such nun nach dem Button und dragge ihn in den Designer. Das Ergebnis sollte in etwa wie folgt aussehen:
Wenn du nun einen Blick in den XAML Code auf der rechten Seite, bzw. unter dem Designer wirfst, wirst du festellen, dass ein Button-Element erstellt wurde.Selbstverständlich kannst du einen neuen Button auch direkt im XAML-Code anlegen.
Ich würde dir raten, den Designer und den XAML-Code nebeneinander anzuzeigen, du kannst dies mit den Buttons zwischen den beiden Ansichten umschalten, du findest sie ganz rechts bzw. unten.
Über Tools(Menüleiste) - Options(ganz unten) - XAML Designer(auch ganz unten) kannst du bei dem Punkt Split Orientation auch einen default Wert angeben, sodass du dies nicht immer manuell umschalten musst.
Der Übersichtlichkeits halber ordne ich die Attribute eines XAML-Elements immer untereinander an.
Aufgabe 1
Modifiziere den Button so, dass folgende Punkte erfüllt sind:
In dem Button steht "Klick mich :)"
Der Button hat die Maße 120 * 25
Der Button ist genau in der Mitte
Das Attribut x:Name sorgt übrigens dafür, dass ein Element einen eindeutigen Namen bekommt, mit welchem wir dieses im Code-behind ansprechen können.
Anordnung von Elementen
Das oberste Element in dieser View ist ein Window; dieses kann nur ein Kind haben, welches idR. ein Grid ist. Es gibt auch noch andere Elemente, die nur ein Kind haben können, ein Grid hingegen kann beliebig viele Kinder haben.
Aufgabe 2
Lösche den Button
Erstelle in deinem Grid ein weiteres Grid
Platziere in diesem Grid einige Buttons, sodass es wie der Nummernblock rechts auf der Tastatur aussieht
(Bonus) gib dem Grid einen hellgrauen Hintergrund und mach es schön.
Tipps:
Du kannst in einem Grid Reihen und Spalten definieren:
Diese beiden Elemente musst du ins Grid packen. Eine Spalte mit Auto nimmt sich so wenig Platz wie nötig, eine Spalte mit * hingegen soviel wie möglich. 2* und 3* sorgen für ein Verhältnis von zwei zu drei. In den Elementen im Grid musst du dann noch angeben, in welche Reihe und Spalte sie gehören, das tust du mit den Attributen Grid.Row="2" und Grid.Column="3". Bedenke, dass man in der Informatik bei 0 anfängt zu zählen. Soll ein Element mehr als eine Reihe bzw. Spalte umfassen, z.B. zwei, so kannst du zusätzlich das Attribut Grid.RowSpan="2" bzw. Grid.ColumnSpan="2" angeben.
Mit dem Attibut Margin lassen sich Abstände nach außen, mit Padding nach innen definieren. Gib eine Zahl für einen gleichmäßigen Abstand oder zwei, mit Kommas getrennnte, Zahlen für den horizontalen und vertikalen Abstand an. Wenn du vier Zahlen angibst, so stehen diese für individuelle Abstände (links, oben, rechts, unten).
Es gibt selbstverständlich verschiedene Möglichkeiten dies umzusetzen. Wenn du z.B. nur mit Margin und ohne Column- und Row-Definitions gearbeitet hast, dann wäre es umständlicher, den Abstand auf z.B. 15 zu erhöhen.
Bei XAML wird bei Größenangaben übrigens nicht in Pixeln gerechnet, damit das Ergebnis auf verschiedenen Bildschirmen mit unterschiedlicher Pixeldichte (dpi) möglichst gleich aussieht, die Größenordnung ist aber in etwa die Selbe. Du könntest dem Window z.B. auch die Höhe 10cm verpassen.
