Personalizar un TextBox

  • Nivel: Sencillo.

  • Herramientas: Expression Blend.

Primero lo primero:

El textbox es control bastate sencillo de usar, permite ingresar texto y punto, no hay vueltas que darle, pero se puede ganar bastante modificando su aspecto visual. En WPF se usa XAML para definir los elementos de la IU, lo que haremos crear nuestro propio XAML (una plantilla o template) que de el estilo que deseemos al control TextBox, este control TextBox está formado de varias partes, una en patícular es la mas importante: el ContentPresenter, que no es otro cosa que el elemento que habilita el ingreso de texto, todo lo que está alrededor del ContentPresenter lo podemos modificar usando XAML.  

El XAML que generemos debe ser guardado en algún archivo, puede estar junto al XAML de la ventana donde está el control, o lo podemos colocar en un archivo especial separado que se conoce como ResourceDictionary, en este ejemplo usaremos el ResourceDictionary, esto no ayudará a mantener el XAML mejor ordenado. 

Ahora sí:

1. Creamos un nuevo proyecto Windows en Blend y nos muestra una ventana que se crea automáticamente, llamada "Window1.xaml".2. Ahora creamos el ResourceDictionary: En la Ventana Project damos clic-derecho sobre el nombre de nuestro proyecto y seleccionado Add new item… , seleccionamos ResourceDictionary , y le damos el nombre de EstilosTextBox.xaml, este archivo estará vacío por ahora, mas adelante le dirmos Blend que guarde aquí la plantilla.3.  Creamos un textbox que no sirva de punto de partida: sobre la ventana Window1 colocamos un control TextBox como se ven en la figura:

txt_template_01.png

4. Damos clic derecho sobre el TextBox y seleccionamos Edit Controls Parts (Template) > Create Empty

5. Nombramos a nuestro estilo TextBoxSombra e indicamos que se cree en nuestro archivo de recursos, presionamos OK:

txt_template_02.png

6. Blend nos mostrará el área para diseñar nuestro estilo, si se fijan en el árbol de controles verán que solo contamos con el nodo ControlTemplate.

7. Arrastramos un elemento tipo Border sobre el área de diseño, y ajustamos las propiedades: Borderthickness, CornerRadius, Width, Height, HorizontalAlignment, VerticalAlignment y Margin, como en la siguiente figura:

txt_template_03.png

8. Luego, vamos a las propiedades de los pinceles y le vamos a dar un gradiente de gris claro a blanco, para dar un efecto de sombre y profundidad al Border.

txt_template_04.png

9. Usamos la herramienta Brush Transform para cambiar la la dirección del gradiente, y nuestro diseño debería verse así:

txt_template_05.png

10. Tenemos practicamente diseñado nuestro TextBox, ahora tenemos que agregar el componente que permita ingresar el texto, es decir el ContentPresenter, para este PRIMERO damos doble-clic sobre el nodo Border en el arbol de controles para asegurarnos que esté activo.

11. El ContentPresenter en el caso del TextBox es un control tipo ScrollViewer que CON EL SIGUIENTE NOMBRE: PART_ContentHost. Tiene que llamarse así el control, dibujamos el ScrollViewer sobre el área de diseño y hacemos que ocupe toda la superfice de nuestra plantilla:

txt_template_06.png

12. Recuerden asignar el valor de la propiedad Name del ScrollViewer a PART_ContentHost

13. Eso es todo!. Hah creado su plantilla, pueden experimentar agregando mas cosas a la misma, o dar otros efectos como bordes mas redondos, o cambiar el color del Border, etc…

14. Una vez creada la plantilla, Blend la reconoce y la pueden aplicar a otros TextBox, así:

txt_template_07.png

Y así se crean las plantillas para muchos controles usando Blend, la verdad no es complicado, requerie creatividad y algo de paciencia al principio Del sitio de MSDN pueden buscar los Templates de ejemplo para WPF en el que encontraran ejemplos completos para casi todos los controles, es un excelente punto de referencia para personalizar el resto de controles.

Si tienen alguna opinión sobre el formato de esta guía me cuentan, que se puede mejorar o cómo hacerla más útil.

Acá otro ejemplo:

txt_template_08.png

5 comentarios to “Personalizar un TextBox”

  1. pabloacastillo Says:

    Me gusto mucho tu tutor pues no se nada de blend y me interesa mucho aprender.

    Gracias.

  2. Excelente! Muchas Gracias

  3. Estimado tengo problemas con textbox, si amplio textbox texto se va corriendo de su margen izquierdo

  4. Wow, this piece of writing is good, my sister is analyzing these kinds of things, thus I
    am going to tell her.

  5. Cynthia Rodriguez Says:

    Hice exacto lo que comentas, pero cuando ejecuto la aplicación, no me permite capturar nada sobre el TextBox ¿?
    Tengo Microsoft Visual Studio Professional 2012
    Versión 11.0.50727.1 RTMREL y el Blend que viene con este VS2012
    ¿¿cual será el problema??

Responder

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

A %d blogueros les gusta esto: