[email protected]

Asunción, PARAGUAY

Ingeniería y desarrollo de software, emprendimiento, cursos

24 de julio de 2015

[Telerik] Máscara dinámica con RadMaskedTextInput

Telerik

Introducción

Los controles RadMaskedInput permiten controlar el ingreso de datos en aplicaciones WPF. Estos controles mejoran la funcionalidad de un TextBox agregando validación de entrada y máscaras, como ser, fechas, direcciones IP, números telefónicos, dígitos, moneda y decimales. - sitio de Telerik.
Básicamente este control nos permite controlar el ingreso de datos y la manera de mostrarlos al usuario.

Contexto

La documentación de Telerik es bien completa con referencia a este control, pero cabe destacar otras funcionalidades que se pueden lograr con este control.
Por ejemplo, aquí queremos aplicar una máscara dinámica al control para tareas más complejas. En una base de datos tenemos configurada la máscara a utilizar y lo queremos aplicar en nuestro formulario.
Como siempre, utilizaremos la clase Binding para realizar nuestro enlace con la máscara. Esto es muy simple y lo indico en los siguientes pasos.

Manos a la obra

Creamos un nuevo proyecto en Visual Studio (2013 en este caso) y seleccionamos la plantilla “Telerik WPF Application“:
Nuevo proyecto Telerik WPF

Seleccionamos el origen de las librerías para el proyecto:
Origen de librerías Telerik

Seleccionamos las librerías necesarias para el proyecto:
Librerías Telerik

En el código de nuestra interfaz (MainWindow.xaml.cs) creamos nuestro modelo y nuestro ViewModel, para que sea más sencillo el enlace a datos (los datos serán cargados manualmente en el constructor del ViewModel).

Para el caso del modelo, nuestro código sería:
/// 
/// Clase Cliente que hereda de Telerik.Windows.Control.ViewModelBase 
/// (permite notificar a la vista cambios en las propiedades)
/// 
public class Cliente : ViewModelBase
{
 //atributo número de documento
 private int documento_;
 //atributo nombre de cliente
 private string nombre_;
 //atributo número de teléfono
 private string phone_;

 /// 
 /// Obtiene o establece el número de documento
 /// 
 public int NumeroDocumento
 {
  get
  {
   return this.documento_;
  }
  set
  {
   this.documento_ = value;
   //Notificamos a la vista, que hubo un cambio en la propiedad
   OnPropertyChanged(()=>NumeroDocumento);
  }
 }

 /// 
 /// Obtiene o establece el nombre del cliente
 /// 
 public string Nombre
 {
  get
  {
   return this.nombre_;
  }
  set
  {
   this.nombre_ = value;
   //Notificamos a la vista, que hubo un cambio en la propiedad
   OnPropertyChanged(() => Nombre);
  }
 }

 /// 
 /// Obtiene o establece el número de teléfono
 /// 
 public string Telefono
 {
  get
  {
   return this.phone_;
  }
  set
  {
   this.phone_ = value;
   //Notificamos a la vista, que hubo un cambio en la propiedad
   OnPropertyChanged(() => Telefono);
  }
 }
}
El ViewModel quedaría de la siguiente manera:
/// 
/// Clase que correspnde al ViewModel, también hereda de ViewModelBase 
/// para notificar cambios a la propiedad
/// 
public class MainViewModel : ViewModelBase
{
 //Comando Delegado
 public DelegateCommand AplicarMascara
 {
  get;
  set;
 }

 //atributo cliente
 private Cliente cliente_;
 /// 
 /// Obtiene o establece el objeto cliente
 /// 
 public Cliente Cliente
 {
  get
  {
   return cliente_;
  }
  set
  {
   this.cliente_ = value;
   //Notifica a la vista, de cambios realizados
   OnPropertyChanged(()=>Cliente);
  }
 }

 public MainViewModel()
 {
  //Asignamos el método al comando delegado
  this.AplicarMascara = new DelegateCommand(OnAplicarMascara);

  //Creamos un objeto cliente con sus datos
  var cliente = new Cliente();
  cliente.NumeroDocumento = 123456;
  cliente.Nombre = "Juan Pérez";
  cliente.Telefono = "456987";

  //Asignar las propiedades
  this.Cliente = cliente;
 }

 private void OnAplicarMascara(object obj)
 {
  //Al ejecutarse el comando, debe aplicar la máscara al control específico.

 }
}
Y nuestra Vista, que estará en XAML lo veríamos muy similar a:
<Window x:Class="TelerikMaskedInput.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:main="clr-namespace:TelerikMaskedInput"
  Title="Máscara dinámica" Height="350" Width="525">
 
 <Window.DataContext>
  <main:MainViewModel />
 </Window.DataContext>
 
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto" />
   <RowDefinition Height="*" />
  </Grid.RowDefinitions>          
  
  <StackPanel Orientation="Horizontal" Margin="5">
   <TextBlock Margin="2" Text="Máscara: " />
   <!--Asumimos que serán 6 dígitos obligatorios-->
   <TextBox Name="txtMascara" Margin="2" MinWidth="50" Text="d6" /> 
   <telerik:RadButton Margin="2" Content="Aplicar" 
          Command="{Binding AplicarMascara}" />
  </StackPanel>
  
  <StackPanel Orientation="Vertical" Margin="5" Grid.Row="1">
   <StackPanel Orientation="Horizontal">
    <TextBlock Margin="2" Text="Documento: " />
    <TextBox Margin="2" MinWidth="50" 
       Text="{Binding Cliente.NumeroDocumento}" />
   </StackPanel>
   <StackPanel Orientation="Horizontal">
    <TextBlock Margin="2" Text="Nombre: " />
    <TextBox Margin="2" MinWidth="50" 
       Text="{Binding Cliente.Nombre}" />
   </StackPanel>
   <StackPanel Orientation="Horizontal">
    <TextBlock Margin="2" Text="Teléfono sin máscara: " />
    <TextBox Margin="2" MinWidth="50" 
       Text="{Binding Cliente.Telefono}" />
   </StackPanel>
   <StackPanel Orientation="Horizontal">
    <TextBlock Margin="2" Text="Teléfono con máscara: " />
    <telerik:RadMaskedTextInput Margin="2" MinWidth="50" 
           Mask="{Binding ElementName=txtMascara, Path=Text}" 
           Value="{Binding Cliente.Telefono}" />
   </StackPanel>
  </StackPanel>
 </Grid>
</Window>

Resultados

Como resultado obtenemos lo que estábamos buscando desde el principio, que nuestra máscara sea dinámica, permitiendo los valores que vamos asignando al control correspondiente, he aquí algunos pantallazos:
Resultado 1

Resultado 2

Resultado 3

Conclusión

Los controles Telerik presentan muchos beneficios, pues aceleran el proceso de desarrollo y hacen que los desarrolladores se vuelvan más productivos. En este caso particular, vimos que un control de máscara puede modificar su propiedad Mask haciéndolo dinámico, para un escenario en particular, realizando la mayor cantidad de tareas posibles en nuestro ViewModel y separándonos un poco de la Vista, que cumple otra tarea y no la de incluir código :)
Esta solución se encuentra disponible en GitHub.

Hey, we've just launched a new custom color Blogger template. You'll like it - https://t.co/quGl87I2PZ
Suscribíte al boletín