Control del foco en un formulario

En esta nueva entrada del blog deseo mostrar un caso sencillo a la vez que útil. Me voy a poner en situación, tenemos un formulario típico, con una serie de datos que rellenar que serán utilizados de el modo que se crea conveniente. Que pasa cada vez que introducimos un dato en cada campo de un formulario y deseamos pasar al siguiente, pues que perdemos tiempo en utilizar el ratón para cambiar al siguiente dato, creando la incomodidad correspondiente al usuario final. Como la finalidad de WPF es crear una experiencia de usuario satisfactoria, vamos a pasar al siguiente campo con la tecla Enter, así evitaremos la citada incomodidad.

Creo el formulario con sus correspondientes elementos:

<Window x:Class="WpfApplication2.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="300" Width="300">

<Window.Resources>

<!–creación de estilos para los–>

<!–diferentes controles del formulario–>

<Style TargetType="{x:Type Button}">

<Setter Property="Width" Value="60"/>

<Setter Property="Margin" Value="4"/>

<Setter Property="Background" Value="Azure"/>

 

</Style>

<Style TargetType="{x:Type TextBox}">

<Setter Property="Width" Value="160"/>

<Setter Property="Margin" Value="4"/>

</Style>

<Style TargetType="{x:Type PasswordBox}">

<Setter Property="Width" Value="160"/>

<Setter Property="Margin" Value="4"/>

</Style>

<Style TargetType="{x:Type Label}">

<Setter Property="Margin" Value="4"/>

</Style>

</Window.Resources>

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="documentRoot">

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

<Label Target="{Binding ElementName=DNI}" Content="_DNI:" Grid.Column="0" Grid.Row="0"/>

<TextBox Name="DNI" Grid.Column="1" Grid.Row="0"/>

<Label Target="{Binding ElementName=NomUs}" Content="_Usuario:" Grid.Column="0" Grid.Row="1"/>

<TextBox Name="NomUs" Grid.Column="1" Grid.Row="1"/>

<Label Target="{Binding ElementName=Password}" Content="_Password:" Grid.Column="0" Grid.Row="2"/>

<PasswordBox Name="Password" Grid.Column="1" Grid.Row="2"/>

<StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">

<Button Content="_Login" Name="logarse" IsDefault="True"/>

<Button Content="_Cancelar" Name="cancelar" IsCancel="True"/>

</StackPanel>

</Grid>

</Window>

Ahora me situaré en Window1.xaml.cs del proyecto que estoy elaborando, dicho código que la parte lógica de nuestra aplicación. Seguidamente introduciré el código que hace posible el cambio de foco en los distintos elementos mediante la tecla Enter:

public partial class Window1 : Window

{

public Window1()

{

InitializeComponent();

this.documentRoot.AddHandler(TextBox.KeyDownEvent, new KeyEventHandler(documentRoot_KeyDown));

//controlamos el evento de la tecla Enter en los textbox

this.logarse.Click += new RoutedEventHandler(loginButton_Click);

this.cancelar.Click += new RoutedEventHandler(cancelButton_Click);

 

}

private void cancelButton_Click(Object sender, RoutedEventArgs e)

{

MessageBox.Show("formulario cancelado");

}

 

private void loginButton_Click(Object sender, RoutedEventArgs e)

{

MessageBox.Show("envio de datos");

}

 

private void documentRoot_KeyDown(Object sender, KeyEventArgs e)

{

if (e.Key == Key.Return)

//compara que la tecla obtenida sea distinta de Enter

{

UIElement focusedElement = Keyboard.FocusedElement as UIElement;

if (focusedElement != null)

{

focusedElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));

//al presionar Enter pasaria al siguiente textbox,para ser rellenado por el usuario

}

e.Handled = true;

}

}

 

}

De este modo hemos conseguido mejorar la eficiencia del usuario final, en cuyo caso si es un grabador de datos lo agradecerá enormemente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *