The Button control

Kein GUI Framework wäre komplett ohne eine Button Control. 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. Es gibt mehrere Properties des Button Controls für diese Steuerung. Diese beinhalten (unter anderen) Foreground, Background, FontWeight und so weiter. Mit 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>

Wenn man diese Eigenschaften direkt auf die Button Control anwendet, gelten sie für den gesamten Inhalt. Für eine differenziertere Formatierung des Inhaltes lesen Sie bitte weiter.

Buttons mit differenzierten Inhalten

Wir haben es bereits mehrfach erwähnt aber eines der sehr coolen Dinge in WPF ist die Möglichkeit, einfachen Text in einem Control mit anderen WPF Controls zu ersetzen. Das heißt auch, dass man den Inhalt der Buttons nicht gleichförmig formatiert 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 ein Panel sein, welches so viele Unterelemente unterstützt wie nötig. Somit kann man Buttons mit verschiedenen Arten von Formatierungen 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äßig kein Padding haben. Das heißt, dass der Text im Button sehr nahe an den Rändern ist. Das könnte ein bisschen seltsam aussehen, da die meisten Buttons an anderen Orten (Web, andere Anwendungen etc.) einen gewissen Abstand von den Rändern haben. Der Button im WPF Framework besitzt jedoch eine Padding Property:

<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.