TOC

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

Interfaces de contrôle communes:

Le contrôle ToolBar

La barre d'outils est une rangée de commandes, généralement située juste en dessous du menu principal d'une application Windows standard. Cela pourrait en fait être un simple panneau avec des boutons dessus, mais en utilisant le contrôle WPF ToolBar, vous obtenez des options supplémentaires comme la gestion automatique des débordements et la possibilité pour l'utilisateur final de repositionner vos barres d'outils.

Une ToolBar WPF est habituellement placée dans un contrôle ToolBarTray. Le ToolBarTray assure les tâches telles que le positionnement et la taille. Vou pouvez ajouter plusieurs contrôles ToolBar dans un ToolBarTray. Voici un exemple basique pour voir à quoi cela ressemble:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ToolbarSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolbarSample" Height="200" Width="300">
    <Window.CommandBindings>
        <CommandBinding Command="New" CanExecute="CommonCommandBinding_CanExecute" />
        <CommandBinding Command="Open" CanExecute="CommonCommandBinding_CanExecute" />
        <CommandBinding Command="Save" CanExecute="CommonCommandBinding_CanExecute" />
    </Window.CommandBindings>
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button Command="New" Content="New" />
                <Button Command="Open" Content="Open" />
                <Button Command="Save" Content="Save" />
            </ToolBar>
            <ToolBar>
                <Button Command="Cut" Content="Cut" />
                <Button Command="Copy" Content="Copy" />
                <Button Command="Paste" Content="Paste" />
            </ToolBar>
        </ToolBarTray>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>
using System;
using System.Windows;
using System.Windows.Input;

namespace WpfTutorialSamples.Common_interface_controls
{
	public partial class ToolbarSample : Window
	{
		public ToolbarSample()
		{
			InitializeComponent();
		}

		private void CommonCommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = true;
		}
	}
}

Noter l'utilisation des commandes pour tous les boutons. Comme vu dans le chapitre précédent, l'utilisation des commandes nous donne plus d'avantage. Pour plus d'informations, vous pouvez regarder le chapitre sur les Menu ou bien aller lire l'article sur les commandes.

Dans cette exemple, j'ai ajouté une ToolBarTray contenant deux ToolBar en haut de la fenêtre (DockPanel.Dock="Top" dans le fichier XAML). Chaque ToolBar contient des boutons dont le comportement est régis par des commandes. Dans le Code-Behind, je gère mauellement le comportement de la méthode CanExecute des trois premiers boutons car contrairement aux commandes couper, copier et coller, WPF n'est pas capable de s'en charger automatiquement.

Exécuter le code ci-dessus et placer la souris sur la partie gauche de l'une des ToolBars (la zone avec des petits points verticaux). Si vous cliquez et maintenez le bouton gauche de la souris enfoncé, vous pouvez dorénavant repositionner la ToolBar en dessous de l'autre et même échanger les places.

Images

Maintenant que la gestion du texte est maîtrisée, la prochaine étape est d'ajouter des icônes ou du moins une combinaison d'icône et de texte. Puisque WPF utilise des boutons normaux, il est très facile d'ajouter des icônes à une ToolBar. L'exemple ci-dessous vous montre comment il est possible d'avoir simplement une icône ou bien une icône et du texte.

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ToolbarIconSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolbarIconSample" Height="200" Width="300">
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button Command="Cut" ToolTip="Cut selection to Windows Clipboard.">
                    <Image Source="/WpfTutorialSamples;component/Images/cut.png" />
                </Button>
                <Button Command="Copy" ToolTip="Copy selection to Windows Clipboard.">
                    <Image Source="/WpfTutorialSamples;component/Images/copy.png" />
                </Button>
                <Button Command="Paste" ToolTip="Paste from Windows Clipboard.">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/WpfTutorialSamples;component/Images/paste.png" />
                        <TextBlock Margin="3,0,0,0">Paste</TextBlock>
                    </StackPanel>
                </Button>
            </ToolBar>
        </ToolBarTray>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

Contrairement aux deux premiers boutons dont le contenu n'est qu'une Image, le troisième bouton est la combinaison d'une Image et d'un TextBlock dans un StackPanel. Il s'agit là d'une technique couramment utilisée pour des boutons qui sont très importants ou qui n'ont pas une image très explicite.

Noter l'utilisation d'un ToolTip pour chaque bouton afin d'ajouter des explications supplémentaires. Ceci est d'autant plus important lorsque le bouton ne possède pas de texte (l'icône peut ne pas être suffisamment explicite). L'utilisateur peut faire apparaître le ToolTip en laissant la souris sur le bouton comme vous pouvez le voir sur la capture d'écran.

Overflow

Je l'ai déjà mentionné, mais il est important de noter que la gestion automatique du débordement par la ToolBar est LA raison pour laquelle il ne faut pas utiliser un simple panel avec des boutons. Cela signifie que lorsqu'il n'y a pas suffisamment de place pour afficher tous les boutons, WPF les mets dans un menu secondaire accessible par un clic sur la flèche à droite de la ToolBar. La capture d'écran ci-après reprend le premier exemple mais avec une fenêtre plus petite afin de laisser moins d'espace aux ToolBars.

WPF vous permet également de décider quels items sont à cacher et lesquels doivent être toujours visible. Généralement, certains items sont moins important que d'autres, et c'est pourquoi vous ne voulez les afficher que dans le menu secondaire, qu'il y ait de la place ou non pour tous les boutons de la ToolBar.

C'est dans ce cadre que la propriété ToolBar.OverflowMode intervient. La valeur par défaut est "IfNeeded", ce qui signifie simplement que s'il n'y a pas de place pour un item, celui-ci sera automatiquement mis dans le menu secondaire. Vous pouvez également utiliser Always ou Never dont les actions correspondent à leur nom: Toujours mettre les items dans le menu secondaire ou empêcher l'item d'aller dans le menu secondaire. Juste en dessous vous trouverez un exemple expliquant comment utiliser cette propriété.

<ToolBar>
    <Button Command="Cut" Content="Cut" ToolBar.OverflowMode="Always" />
    <Button Command="Copy" Content="Copy" ToolBar.OverflowMode="AsNeeded" />
    <Button Command="Paste" Content="Paste" ToolBar.OverflowMode="Never" />
</ToolBar>

Position

Bien que la position habituelle pour une ToolBar soit en haut de l'application, il est tout à fait possible de la mettre en bas voir même sur les côtés. La ToolBars WPF support cela. Tandis que la placer en bas de l'application n'est qu'une question d'ancrage, pour la placer sur un des côtés, il faut utiliser la propriété Orientation d'une ToolBarTray. Tout ceci est expliqué dans l'exemple ci-dessous:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ToolbarPositionSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolbarPositionSample" Height="200" Width="300">
	<DockPanel>
		<ToolBarTray DockPanel.Dock="Top">
			<ToolBar>
				<Button Command="Cut" ToolTip="Cut selection to Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/cut.png" />
				</Button>
				<Button Command="Copy" ToolTip="Copy selection to Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/copy.png" />
				</Button>
				<Button Command="Paste" ToolTip="Paste from Windows Clipboard.">
					<StackPanel Orientation="Horizontal">
						<Image Source="/WpfTutorialSamples;component/Images/paste.png" />
						<TextBlock Margin="3,0,0,0">Paste</TextBlock>
					</StackPanel>
				</Button>
			</ToolBar>
		</ToolBarTray>
		<ToolBarTray DockPanel.Dock="Right" Orientation="Vertical">
			<ToolBar>
				<Button Command="Cut" ToolTip="Cut selection to Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/cut.png" />
				</Button>
				<Button Command="Copy" ToolTip="Copy selection to Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/copy.png" />
				</Button>
				<Button Command="Paste" ToolTip="Paste from Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/paste.png" />
				</Button>
			</ToolBar>
		</ToolBarTray>
		<TextBox AcceptsReturn="True" />
	</DockPanel>
</Window>

L'utilisation de la propriété DockPanel.Dock, qui place la ToolBarTray à droite de l'écran, avec la propriété Orientation permet de changer l'orientation d'une ToolBar. De cette manière, il est possible de placer une ToolBar pratiquement n'importe où.

Custom controls on the ToolBar

Comme vous avez pu le constater au cours des exemples précédents, on utilise des boutons WPF de base dans les ToolBars. Cela signifie également que vous pouvez utiliser bien d'autres contrôles WPF. Bien sûr certains contrôles fonctionnent mieux dans une ToolBar que d'autre mais des contrôles tels que la ComboBox et la TextBox sont communément utilisés dans des anciennes versions de Microsoft Office et vous pouvez en faire de même avec vos propres ToolBars WPF.

Le Separator permet également de séparer deux ensembles d'items se trouvant dans une ToolBar. Comme vous pouvez le voir dans l'exemple ci-dessous, il est très simple à utiliser !

<Window x:Class="WpfTutorialSamples.Common_interface_controls.ToolbarCustomControlsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolbarCustomControlsSample" Height="200" Width="300">
	<DockPanel>
		<ToolBarTray DockPanel.Dock="Top">
			<ToolBar>
				<Button Command="Cut" ToolTip="Cut selection to Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/cut.png" />
				</Button>
				<Button Command="Copy" ToolTip="Copy selection to Windows Clipboard.">
					<Image Source="/WpfTutorialSamples;component/Images/copy.png" />
				</Button>
				<Button Command="Paste" ToolTip="Paste from Windows Clipboard.">
					<StackPanel Orientation="Horizontal">
						<Image Source="/WpfTutorialSamples;component/Images/paste.png" />
						<TextBlock Margin="3,0,0,0">Paste</TextBlock>
					</StackPanel>
				</Button>
				<Separator />
				<Label>Font size:</Label>
				<ComboBox>
					<ComboBoxItem>10</ComboBoxItem>
					<ComboBoxItem IsSelected="True">12</ComboBoxItem>
					<ComboBoxItem>14</ComboBoxItem>
					<ComboBoxItem>16</ComboBoxItem>
				</ComboBox>
			</ToolBar>
		</ToolBarTray>
		<TextBox AcceptsReturn="True" />
	</DockPanel>
</Window>

Summary

La création d'interface avec des ToolBars est très facile avec WPF grâce au contrôle ToolBar. Vous pouvez dorénavant effectuer des tâches qui nécessitaient des contrôles de barre d’outils tiers et vous pouvez même le faire sans efforts supplémentaires.

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!