Le contrôle Button

Aucun Framework d'affichage ne pourrait être complet sans un bouton. Bien sûr, WPF en possède un nativement, et comme le reste des contrôles du framework, il est très flexible et vous permet d'accomplir quasiment n'importe quoi. Mais commençons par des exemples basiques.

Un simple bouton

Comme les autres contrôles WPF, un Button peut être affiché simplement en ajoutant une balise Button à votre Window. Si vous mettez du texte entre les tags (ou un autre contrôle), cela définira le contenu du Button

<Button>Hello, world!</Button>

Simple, non ? Bien entendu, le Button ne fait rien pour le moment, mais si vous passez la souris dessus, vous verrez un joli effet de survol. Mais faisons faire quelque chose au Button, en s'abonnant à son événement Click (plus d'informations à propos de ce processus peuvent être trouvées dans l'article décrivant l'abonnement à des événements en XAML) :

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

Dans le Code-Behind, vous aurez besoin d'une méthode correspondante pour gérer le clic :

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

Maintenant vous avez un bouton très simple qui affichera un message lorsque vous cliquez dessus !

Contenu formatté

En interne, un texte simple dans le Content du Button est transformé en contrôle TextBlock, ce qui signifie également que vous pouvez contrôler le formattage du texte de la même façon. Vous trouverez plusieurs propriétés sur le Button ce faisant, par exemple (non exhaustivement) : Foreground, Background, FontWeight, etc. Autrement dit, il est très simple de changer le format du texte dans un contrôle Button:

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

En définissant ces options directement dans le Button, vous êtes limités à appliquer le même formattage à tous les éléments. Mais si ce n'est pas suffisant, continuez votre lecture pour découvrir des options de formattage avancées.

Boutons avec du contenu avancé

Nous en avons déjà parlé plusieurs fois, mais une des choses les plus sympathiques à propos de WPF est la possibilité de remplacer un simple texte à l'intérieur d'un contrôle par un autre contrôle WPF. Ce qui signifie que vous n'avez pas forcément à limiter vos boutons à du simple texte, formatté d'une certaine façon - vous pouvez simplement ajouter plusieurs contrôles textuels avec différents formattages. Le Button WPF supporte uniquement un seul contrôle enfant, mais vous pouvez regrouper ces contrôles dans un Panel, afin d'héberger autant de contrôles que vous le désirez. Vous pouvez utiliser ceci pour créer des boutons avec différents types de formattage :

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

Bien entendu, vous n'êtes pas limités au texte - Vous pouvez mettre ce que vous voulez dans vos boutons, ce qui nous amène à un sujet plébiscité par beaucoup de monde : Des boutons avec des images !

Boutons avec des images (ImageButton)

Dans beaucoup de frameworks d'UI, vous trouverez toujours un bouton et plusieurs variantes, qui vous offriront des fonctionnalités supplémentaires. Mais l'une des variantes les plus utilisées est l'ImageButton, qui, comme son nom l'indique, est un Button qui autorise l'ajout d'une image avant le texte. Mais en WPF, il n'y a pas besoin d'un contrôle séparé pour accomplir ceci - Comme on vient de le voir, il est simple de mettre plusieurs contrôles dans un Button, donc vous pouvez aussi simplement ajouter un contrôle Image à l'intérieur, comme ceci :

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

Il est très simple de créer un ImageButton en WPF, et vous êtes bien entendu libre de l'adapter, par exemple, si vous désirez que l'image soit après le texte au lieu d'avant, etc.

Espacement du Button

Vous avez sans doute remarqué que les boutons dans les contrôles WPF ne s'insèrent pas avec un espacement par défaut. Ceci signifie que le texte est extrêmement près des bordures, ce qui peut sembler assez étrange visuellement, car la plupart des autres boutons (sur Internet, dans les autres applications, etc.) possèdent un espacement sur les côtés. Ne vous en faites pas, car le Button possède une propriété Padding :

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

Ceci appliquera un espacement de 5 pixels horizontalement et 2 pixels verticalement. Mais avoir à appliquer un padding à tous les boutons peut devenir un peu fatiguant au bout d'un moment, donc voici un petit conseil : vous pouvez appliquer un espacement de façon globale, soit au niveau de l'application, soit dans une Window spécifique, en utilisant un "Style" (nous verrons les styles plus tard). Voici un exemple de la façon d'appliquer un Style à une Window, en utilisant la propriété Window.Resources :

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

L'espacement sera désormais appliqué à tous vos boutons, mais vous pouvez bien entendu le surcharger en définissant la propriété Padding sur un Button. Voici à quoi ressemblent tous les boutons de cet exemple avec un espacement commun :

Résumé

Comme vous pouvez le voir dans cet article, utiliser des boutons avec le framework WPF est très facile et vous pouvez personnaliser ce contrôle presque à l'infini.