TOC

This article is currently in the process of being translated into German (~99% done).

Grundlegende Kontrollobjekte:

The Button control

Kein GUI Framework wäre komplett ohne eine Button Conrol. Also besitzt WPF diese natürlich. Genau wie der Rest der Framework Controls, ist die Button Control sehr flexibel und ermöglicht es, fast alles damit zu erschaffen. Aber fangen wir vorerst mit einigen grundlegenden Beispielen an.

Ein einfacher Button

Genau wie viele andere WPF Contols kann ein Button dargestellt werden, indem man einen Button Tag zu dem Fenster hinzufügt.

<Button>Hello, world!</Button>

Recht simpel oder? Natürlich besitzt dieser Button in dem Zustand noch keine Funktionalität, aber wenn man mit der Maus darüber fährt, merkt man dass der Button bereits einen Hover-Effect besitzt. Geben wir nun dem Button eine Funktionalität, indem wir diesen zu seinem Click event registrieren (Mehr Informationen über diesen Prozess können im Artikel zu Registrierungen zu Events in XAML gefunden werden)

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

Im Code-behind muss nun eine entsprechende Methode zum handlen des clicks erstellt werden.

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

Nun hat man einen sehr einfachen Button mit einer Nachricht, die erscheint, wenn man auf diesen klickt!

Formatierter Inhalt

Im Hintergrund wird der einfache Text im Content des Buttons in eine TextBlock Control umgewandelt. Das heisst auch, dass man dieselben Aspekte des Formatierens wie bei TextBlock Contols steuern kann. Sie werden mehrere Properties des Button Controls für diese Steuerung finden. Diese beinhalten (unter anderen) Foreground, Background, FontWeight und so weiter. In anderen Worten, Es ist sehr einfach die Formatierung des Textes im Button Control zu verändern:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Indem man diese Properties direkt auf den Button setzt, ist man darauf limitiert, dieselbe Formatierung für den ganzen Inhalt anzuwenden. Wenn dies nicht gut genug sein sollte, lesen Sie weiter für noch fortgeschrittenere Formatieren des Inhaltes.

Buttons mit fortgeschrittenerem Inhalt

Wir haben bereits mehrmals über dieses Thema gesprochen, aber eine der sehr coolen dinge in WPF, ist die Möglichkeit, einfachen Text in einem Control mit anderen WPF Controls zu ersetzen. Das heisst auch, dass man den Inhalt der Buttons nicht bei einem gleich formatiertem Text belassen muss - Man kann einfach mehrere Text Controls mit verschiedenen Formatierungen hinzufügen. Der WPF Button unterstützt nur ein direktes Unterelement (child control). Dieses kann jedoch einfach ein Panel sein, welches so viele Unterelemente unterstützt wie nötig. Somit kann man Buttons mit verschiedenen Arten von Formatierung erstellen:

<Button>
    <StackPanel Orientation="Horizontal">
<TextBlock>Formatted </TextBlock>
<TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
<TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

Aber natürlich ist man nicht nur auf Text limitiert - man kann in die Buttons platzieren was man möchte, was uns zu einem Thema führt, welches viele interessieren wird. Buttons mit Bildern!

Buttons mit Bildern (ImageButton)

In vielen UI Frameworks, findet man oft einen einfachen Button und dazu noch weitere verschiedene Varianten, welche zusätzliche Eigenschaften besitzen. Eine der am meisten benutzten Varianten ist der ImageButton, welcher, wie der Name bereits vorschlägt, ein Button mit der Möglichkeit, ein bild vor dem Text einzufügen, ist. Aber in WPF braucht es keine seperate Control um dies zu erreichen - wie wir gesehen haben, können wir mehrere Conrols in dem Button haben. So kann man einfach ein Bild im Button einfügen:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
<Image Source="/WpfTutorialSamples;component/Images/help.png" />  
<TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

Es ist wirklich so einfach, einen ImageButton in WPF zu erstellen. Es ist natürlich auch möglich, die Elemente zu drehen, z.B. wenn man das Bild nach dem Text haben möchte anstatt vor dem Text etc.

Button Padding

Vielleicht haben sie bereits bemerkt, dass Buttons im WPF Framework standartmässig kein Padding haben. Das heisst, dass der Text im Button sehr nahe zu den Rändern ist, was ein bisschen seltsam aussehen könnte, da die meisten Buttons an anderen Orten (Web, andere Anwendungen etc.) einen gewissen Abstand von den Rändern haben. Keine Sorgen da der Button im WPF Framework eine Padding Property besitzt:

<Button Padding="5,2">Hello, World!</Button>

Dies wird ein Padding von 5 Pixeln an den Seiten und 2 Pixel oben und unten hinzufügen. Aber wenn man nun auf alle Buttons einzeln dieses Padding hinzufügen müsste, könnte dies nach einiger Zeit ermüdend werden. Hier ein kleiner Tipp: Man kann das Padding global, entweder in der gesamten Applikation oder nur auf einem spezifischen Fenster mit einem Style (mehr zu Styles kommt später) hinzufügen. Hier ein Beispiel, wo wir das Padding mithilfe der Window.Resources Property in dem Fenster hinzufügen:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

Dieses Padding wird nun für alle der Buttons in diesem Fenster angewendet. Man kann dies aber natürlich auch überschreiben, indem man beim gewünschten Button die Padding Property definiert. Hier sieht man, wie die Buttons in diesem Beispiel mit dem gemeinsamen Padding aussehen würden:

Zusammenfassung

Wie man von diesem Artikel sehen kann, ist es sehr einfach, Buttons im WPF Framework zu benutzen und beinahe endlos zu gestalten.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!