TOC

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

Controlli comuni di iterfaccia:

Il controllo ToolBar di WPF

La ToolBar (o barra degli strumenti) è una riga di componenti, in genere posizionata proprio sotto il menu principale di un'applicazione Windows standard. Questa potrebbe essere, in effetti, un semplice pannello con dei pulsanti sopra, ma utilizzando il controllo WPF ToolBar, si ottengono alcuni extra extra come la gestione automatica della sovrapposizione e la possibilità per l'utente finale di riposizionare le barre degli strumenti.

La barra degli strumenti WPF viene generalmente posizionata all'interno di un controllo ToolBarTray. ToolBarTray gestirà cose come il posizionamento e il dimensionamento e se ne possono avere di multiple. Controlli toolbar dentro un elemento ToolbarTray. Proviamo con un esempio piuttosto semplice, per vedere come appare:

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

Nota come utilizzo i comandi per tutti i pulsanti. Ne abbiamo discusso nel capitolo precedente e l'uso dei comandi ci offre sicuramente alcuni vantaggi. Per maggiori informazioni, dai un'occhiata al capitolo Menu, o gli articoli sui comandi.

In questo esempio, aggiungo una ToolBarTray nella parte superiore dello schermo e al suo interno due controlli ToolBar. Ognuno contiene alcuni pulsanti e usiamo i commands per stabilire il loro comportamento. In Code-behind, mi assicuro di gestire l'evento CanExecute dei primi tre pulsanti, poiché ciò non avviene automaticamente da WPF, contrariamente ai comandi Taglia, Copia e Incolla, che WPF è in grado di gestire automaticamente.

Prova a eseguire l'esempio e posiziona il cursore sulla parte sinistra di una delle barre degli strumenti (l'area punteggiata). Se fai clic e tieni premuto il pulsante sinistro del mouse, puoi riposizionare la barra degli strumenti, ad es. sotto l'altro o addirittura fargli cambiare posto.

Immagini

Mentre il testo sui pulsanti della barra degli strumenti è perfettamente a posto, l'approccio normale è quello di avere icone o almeno una combinazione di un'icona e un testo. Perché     WPF utilizza i normali controlli Button, l'aggiunta di icone agli elementi della barra degli strumenti è molto semplice. Dai un'occhiata al prossimo esempio, in cui facciamo entrambi:

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

Specificando un controllo Image come Content dei primi due pulsanti essi saranno basati su icona invece che basati su testo. Sul terzo pulsante sono stati combinati un controllo Image e un controllo TextBlock all'interno di uno StackPanel in modo da raggruppare icona e testo sul pulsante, una tecnica comunemente usata per quei pulsanti che rivestono un' importanza particolare o per quelli con un'icona poco ovvia.

Notare com'è stata usata la proprietà ToolTip su ogni pulsante, per aggiungere un testo esplicativo. Ciò si rivela molto importante per quei pulsanti con solo un'icona, dove lo scopo potrebbe non apparire chiaro osservando solo l'icona. Con la proprietà ToolTip, l'utente, passando sul pulsante, ottiene la descrizione di cosa esso fa, come mostrato nell'immagine precedente.

Overflow

Come già detto, una buona ragione per usare il controllo ToolBar invece di un pannello di pulsanti, è la gestione automatica degli spazi. Il che vuol dire che se non c'è abbastanza spazio per mostrare tutti i pulsanti nella toolbar, WPF li dispone tutti in un menu accessibile con un click sulla freccia alla destra della toolbar stessa. E' possibile vederla al lavoro nella seguente foto, dove viene mostrato il primo esempio, una piccola finestra che lascia poco spazio per le toolbar.

WPF even allows you to decide which items are suitable for overflow hiding and which should always be visible. Usually, when designing a toolbar, some items are less important than the others and some of them you might even want to have in the overflow menu all the time, no matter if there's space enough or not.

This is where the attached property ToolBar.OverflowMode comes into play. The default value is IfNeeded, which simply means that a toolbar item is put in the overflow menu if there's not enough room for it. You may use Always or Never instead, which does exactly what the names imply: Puts the item in the overflow menu all the time or prevents the item from ever being moved to the overflow menu. Here's an example on how to assign this property:

<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

While the most common position for the toolbar is indeed in the top of the screen, toolbars can also be found in the bottom of the application window or even on the sides. The WPF ToolBar of course supports all of this, and while the bottom placed toolbar is merely a matter of docking to the bottom of the panel instead of the top, a vertical toolbar requires the use of the Orientation property of the ToolBar tray. Allow me to demonstrate with an example:

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

The trick here lies in the combination of the DockPanel.Dock property, that puts the ToolBarTray to the right of the application, and the Orientation property, that changes the orientation from horizontal to vertical. This makes it possible to place toolbars in pretty much any location that you might think of.

Custom controls on the ToolBar

As you have seen on all of the previous examples, we use regular WPF Button controls on the toolbars. This also means that you can place pretty much any other WPF control on the toolbars, with no extra effort. Of course, some controls works better on a toolbar than others, but controls like the ComboBox and TextBox are commonly used on the toolbars in e.g. older versions of Microsoft Office, and you can do the same on your own WPF toolbars.

Another thing introduced in this example is the Separator element, which simply creates a separator between two sets of toolbar items. As you can see from the example, it's very easy to use!

<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

Creating interfaces with toolbars is very easy in WPF, with the flexible ToolBar control. You can do things that previously required 3rd party toolbar controls and you can even do it without much extra effort.

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!