Come gestire gli access key con WPF (usability, Label, TextBox e dintorni)

27 Agosto 2007 Igor Damiani

Chi di voi ha lavorato con Visual Basic 6.0, o comunque con altri linguaggi di programmazione, sa che è possibile impostare – su una Label per esempio – un access key, ovvero impostare una lettera che premuta insieme al tasto ALT della tastiera dia il focus ad un controllo sulla stessa Windows Forms. Supponiamo di avere una Label la cui caption sia “Nome : ” e supponiamo di voler fare in modo che, premendo ALT+N sulla tastiera, il focus finisca su una TextBox lì a fianco, cosicchè l’utente possa inputare il valore. In Visual Basic 6.0, questo si otteneva facendo precedere alla lettera interessata il carattere di ampersand (&) e facendo in modo che la TextBox fosse il controllo successivo all’ordine determinato dalla proprietà TabIndex dei controlli stessi.

In Windows Presentation Foundation, questa cosa la si risolve ancora una volta grazie all’utilizzo del data-binding. Vediamo come.

Innanzitutto, prendiamo una normalissima Windows di WPF, aggiungiamo una Label ed una TextBox, nel modo seguente:

<Window x:Class="VivendoByte.CastingManager.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Casting Manager, ricerca avanzata" Height="300" Width="400">

  <Window.Resources>
    <Style TargetType="{x:Type Label}">
      <Setter Property="Height" Value="20" />
      <Setter Property="Margin" Value="4" />
      <Setter Property="Width" Value="80" />
      <Setter Property="Padding" Value="2" />
    </Style>
    <Style TargetType="{x:Type TextBox}">
      <Setter Property="Height" Value="20" />
      <Setter Property="Margin" Value="4" />
      <Setter Property="Width" Value="200" />
    </Style>
  </Window.Resources>
  
  <StackPanel Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
      <Label Content="Nome : " />
      <TextBox Name="txtRicercaNome" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
      <Label Content="Cognome : " />
      <TextBox Name="txtRicercaCognome" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
      <Label Content="Data Nascita : " />
      <TextBox Name="txtRicercaDataNascita" />
    </StackPanel>
  </StackPanel>
  
</Window>

Ho usato gli stili per uniformare l’aspetto delle Label e delle TextBox, settando margini, larghezze, altezze e così via. L’aspetto più importante è l’elenco dei controlli, che è una sorta di accoppiata di Label + TextBox affiancate le une con le altre.
Ecco uno screenshot:

Noi vogliamo che:

Premendo ALT + N il focus finisca sulla prima TextBox dall’alto
Premendo ALT + C il focus finisca sulla seconda TextBox dall’alto
Premendo ALT + D il focus finisca sulla terza TextBox dall’alto

La risoluzione è semplice, rapida ed indolore. Occorre usare il carattere underscore (_) prima del carattere che vogliamo rendere sottolineato e che agisca con il tasto ALT per formare l’access key. Occorre poi impostare la proprietà Target della Label, facendola bindare al controllo su cui vogliamo trasferire il focus. Per brevità, riporto solo lo XAML relativo alle Label:

<Label Content="_Nome : " Target="{Binding ElementName=txtRicercaNome}" />
<Label Content="_Cognome : " Target="{Binding ElementName=txtRicercaCognome}" />
<Label Content="_Data Nascita : " Target="{Binding ElementName=txtRicercaDataNascita}" />

Quando lanciamo l’applicazione, le Label appaiono esattamente come prima, ovvero senza alcun carattere sottolineato. Se premiamo il tasto ALT, l’engine di WPF evidenzia il carattere sottolineandolo. Se insieme ad ALT premiamo anche la lettera (N, C o D), il focus viene trasferito sul controllo specificato tramite il binding stabilito sulla proprietà Target. Et voilà!

Maggiori informazioni a partire da http://msdn2.microsoft.com/en-us/library/ms752101.aspx

Technorati Tags: programming .NET WPF usability

Send to Kindle

Igor Damiani

Lascia un commento Annulla risposta