[Telerik] Máscara dinámica con RadMaskedTextInput
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“:
Seleccionamos el origen de las librerías para el proyecto:
Seleccionamos las librerías necesarias para el proyecto:
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:
///El ViewModel quedaría de la siguiente manera:/// 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); } } }
///Y nuestra Vista, que estará en XAML lo veríamos muy similar a:/// 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. } }
<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:
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.
Compartir
