Personalizar un TextBox en WPF con Expresion Blend


Para este ejemplo lo que necesitamos es:

–          Microsoft Expresion Blend 3

–          Visual Studio 2008

–          Mucha paciencia e inspiración

Iniciamos un Nuevo proyecto en Expresion Blend, escogemos una aplicación de WPF.

Para empezar, insertamos un control TextBox en nuestra ventana principal, los controles se encuentran al lado izquierdo de la pantalla y si se mantiene presionado el mouse se muestran más controles:

 BuscarTextBox

Cuando seleccionamos el texto y creemos uno en la ventana principal, damos clic derecho sobre el texto, luego en Edit Template, y Create Empty. Lo que vamos es a crear un Texto desde cero:

 EditarTemplate

 

Aquí vamos a crear nuestro template, la primera opción es para darle un nombre que identifique nuestro template, podemos escoger la opción de Apply to all, para que nuestro template se aplique a todos los textos del proyecto.

Para definir el nivel de nuestro template, abajo podemos escoger que sea solo para la aplicación (Application), únicamente en el archivo (This.document) o un diccionario de recurso para ser usado en cualquier otra aplicación (Resource dictionary).

 CrearTemplate

Para poder tener nuestro texto a la mano, vamos a definirlo como un diccionario de recurso, presionamos el botón New para crear un archivo XAML:

 guardartemplate

Inmediatamente presionemos Ok, se creara un archivo *.xaml en nuestro proyecto:

 mitemplate

Si se fijan, el template creado solo tiene un Contenedor ControlTemplate y una grilla (Grid):

 templatetextbox

Eliminamos la grilla y arrastramos un control Border, y lo modificamos como en la siguiente figura:

 configborder

Ahora vamos a agregarle un color de borde a nuestro borde, un color degradado, para esto seleccionamos en el Tab de Brushes, la opción de BorderBrush y luego en los cuadritos de abajo seleccionamos la opción GradientBrush. Luego abajo se encuentran los colores del gradiente, si seleccionamos uno de los “tarritos” que se encuentran al lado de los colores, podemos modificar su dirección y su color:

 bordercolor

Para cambiar la dirección y profundidad del degradado, también podemos usar la herramienta:degradador

Ahora, adicionamos a nuestro Template un control Scrollviewer, que será el que contendrá el texto y demás cosas:

 adicionScrollViewer

Lo configuramos como la siguiente figura:

 configscrollviewer

Las propiedades Width y Height las dejamos Auto, para que se tengan los valores que el usuario les da.

Hay que nombrar el Scrollviewer, le ponemos el nombre  de PART_ContentHost, el nombre debe ser así, no puede tener otro nombre. Si vemos al ponerle el nombre, se agrega el texto: Text1

 nombrescrollviewer

Ahora seguimos modificando nuestro texto, vamos a dejarlo con un color de Fondo blanco degradado, para que cuadre con el color del borde:

 colorscroll

Bien, ahora podemos probar nuestro texto, nos dirigimos a la ventana de mainWindow.xaml y adicionamos un texto cualquiera, luego le damos clic derecho -> Edit Template -> Apply Resource -> MiTexto o el nombre de nuestro template:

 aplicartemplate

 

Ahora para ver la diferencia, dejamos un texto sin aplicarle el Template, y otro con nuestro Template 😛

 prueba1

Ahora, vamos a agregarle efectos o Triggers(Disparadores), volvemos a nuestro template: MiTexto.xaml y arriba a la izquierda, donde se encuentra el explorador de proyectos, escogemos el tab de Triggers:

 triggers

Presionamos el + Event, esto adiciona un Triggers al ejecutarse un evento, como pasar el mouse por encima del control, tener foco, perder foco, etc.

Al presionarlo se adiciona nuestro primer Trigger, donde dice isLoaded, buscamos el evento de GotFocus:

 triggergotfocus

Presionamos el botón del +, que se encuentra a la derecha de nuestro Trigger creado, se nos presenta un mensaje informándonos que no existe ningún StoryBoard, que si vamos a crear uno, presionamos el botón Ok.

Al presionarlo se crea una línea de tiempo y el borde de la pantalla queda en color rojo, esto significa que todo lo que hagamos quedara guardado para el efecto.

En la línea de tiempo podemos especificar la duración de nuestro efecto en este momento la dejamos como esta, ahora vamos a modificar nuestro texto para que tenga un efecto, escogemos el borde y le cambiamos el color, hacemos lo mismo con el ScrollViewer, al gusto de cada cual, el mío quedo así:

 efectofocus

Ahora podemos guardar y detener la grabación del Trigger: probar nuestro template, para ello presionamos el siguiente botón rojo:

 detenergrabacionwpf

Presionamos F5, para probar nuestra aplicación:

 prueba2

Al tener foco el texto, se dispara el evento y cambia el color 😀

Pero si pierde el foco, sigue con el mismo color, para ello creamos otro evento pero con LostFocus:

 triggerlostfocus

Si presionamos el botón del +, se nos muestran los StoryBoards que han sido creados, por el momento solo nos muestra uno llamado GotFocus1, si queremos crear uno diferente seleccionamos la lista donde dice GotFocus1 y seleccionamos New StoryBoard, en nuestro caso lo que queremos hacer es quitar el StoryBoard aplicado, para ello Seleccionamos la lista donde dice Begin y escogemos Remove:

 removertrigger

Guardamos y ejecutamos:

 prueba3

Listo, tenemos creado nuestro primer Template que podemos agregarlo a cualquier aplicación de WPF o de Silverlight, puesto que es puro código XAML.

Para los que son curiosos pueden abrir el archivo MiTexto.xaml, verán puro código XAML:

xamlejemplo

 

Para Descargar el archivo: aqui

Un pensamiento en “Personalizar un TextBox en WPF con Expresion Blend

  1. Pingback: Aplicación Login de Twitter WPF – Manejando la API de Twitter « Escarbando Código

Deseas comentar o sugerir algo?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s