TOC

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

Interfaces de contrôle communes:

Le contrôle WPF StatusBar

De la même façon que le haut des fenêtres est généralement dédié au menu principal et/ou aux barres d'outils comme nous l'avons vu dans les derniers chapitres, la partie basse accueille souvent la barre d'état. La barre d'état est utilisée pour montrer divers informations sur le statut courant de l'application comme la position du curseur, un compteur de mots, l'avancement d'une tâche et ainsi de suite. Heureusement pour nous, WPF est doté d'un très bon contrôle StatusBar, qui rend très simple l'ajout d'une barre d'état à vos applications.

Commençons avec un exemple tout simple.

<Window x:Class="WpfTutorialSamples.Common_interface_controls.StatusBarSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StatusBarSample" Height="150" Width="300">
	<DockPanel>
		<StatusBar DockPanel.Dock="Bottom">
			<StatusBarItem>
				<TextBlock Name="lblCursorPosition" />
			</StatusBarItem>
		</StatusBar>
		<TextBox AcceptsReturn="True" Name="txtEditor" SelectionChanged="txtEditor_SelectionChanged" />
	</DockPanel>
</Window>
using System;
using System.Windows;

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

		private void txtEditor_SelectionChanged(object sender, RoutedEventArgs e)
		{

			int row = txtEditor.GetLineIndexFromCharacterIndex(txtEditor.CaretIndex);
			int col = txtEditor.CaretIndex - txtEditor.GetCharacterIndexFromLineIndex(row);
			lblCursorPosition.Text = "Line " + (row + 1) + ", Char " + (col + 1);
		}
	}
}

C'est très simple : un contrôle TextBlock qui montre la position courante du curseur, comme dans la plupart des applications permettant d'éditer du texte. Pour cet exemple basique, la StatusBar aurait tout aussi bien pu être remplacée par un panneau contenant un lot de contrôles, mais l'intérêt de la StatusBar est de pouvoir se diviser en différentes zones d'information.

Exemple avancé de StatusBar

Essayons un exemple de niveau plus avancé d'utilisation de la StatusBar. La première chose que nous aimerions faire serait de faire utiliser à la StatusBar un autre panel pour gérer l'agencement. Par défaut, elle utilise le DockPanel, mais si nous voulons une disposition plus complexe, avec des colonnes qui ajustent leur largeur d'une certaine façon et alignent le contenu, la Grid est un bien meilleur choix.

Nous allons diviser le Grid en trois zones, celles de gauche et de droite avec une largeur fixe, et la zone centrale prenant automatiquement l'espace restant. Nous allons aussi ajouter des colonnes dans les intervalles entre celles-ci pour des contrôle Separator. Voilà à quoi cela ressemble maintenant :

<Window x:Class="WpfTutorialSamples.Common_interface_controls.StatusBarAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StatusBarAdvancedSample" Height="150" Width="400">
    <DockPanel>
        <StatusBar DockPanel.Dock="Bottom">
            <StatusBar.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </StatusBar.ItemsPanel>
            <StatusBarItem>
                <TextBlock Name="lblCursorPosition" />
            </StatusBarItem>
            <Separator Grid.Column="1" />
            <StatusBarItem Grid.Column="2">
                <TextBlock Text="c:\path\of\current\file.txt" />
            </StatusBarItem>
            <Separator Grid.Column="3" />
            <StatusBarItem Grid.Column="4">
                <ProgressBar Value="50" Width="90" Height="16" />
            </StatusBarItem>
        </StatusBar>
        <TextBox AcceptsReturn="True" Name="txtEditor" SelectionChanged="txtEditor_SelectionChanged" />
    </DockPanel>
</Window>
using System;
using System.Windows;

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

		private void txtEditor_SelectionChanged(object sender, RoutedEventArgs e)
		{
			int row = txtEditor.GetLineIndexFromCharacterIndex(txtEditor.CaretIndex);
			int col = txtEditor.CaretIndex - txtEditor.GetCharacterIndexFromLineIndex(row);
			lblCursorPosition.Text = "Line " + (row + 1) + ", Char " + (col + 1);
		}
	}
}

As you can see, I've added a bit of sample information, like the fake filename in the middle column and the progress bar to the right, showing a static value for now. You could easily make this work for real though, and it gives a pretty good idea on what you can do with the StatusBar control.

Summary

Once again, WPF makes it easy to get standard Windows functionality, in this case the StatusBar, integrated into your applications.

You can even place other controls than the ones used in these examples, like buttons, combo boxes and so on, but please be aware that since the StatusBar doesn't apply any special rendering to these controls when hosting them, it might not look as you would expect it to for controls in a status bar. This can be handled with custom styling if you need it though, a subject discussed elsewhere in this tutorial.

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!