Obtener el template o la plantilla de un Control XAML – WPF


En algunos casos cuando estamos trabajando con XAML, queremos modificar la presentación de un control, como por ejemplo, modificar un Scrollbar, para personalizarlos.

El problema esta en que no podemos iniciar desde cero para crear el template o la plantilla del control, hay una solución muy sencilla, y es extraer el XAML por defecto que tienen los controles, luego ya podemos modificarlos a nuestro gusto.

La forma de hacerlo es:

– Arrastrar el control a la ventana

– Luego guardar el Template del control en un archivo xml

Para hacerlo, creamos un proyecto, agregamos un botón y un ScrollBar, nombramos el ScrollBar como scroll, en el Click del botón agregamos lo siguiente:

private void Button1_Click(object sender, RoutedEventArgs e)
{
 using (System.IO.FileStream aStream = new System.IO.FileStream("C:\\template.xml", System.IO.FileMode.Append))
 {
 System.Windows.Markup.XamlWriter.Save(scroll.Template, aStream);
 }
}

Sigue leyendo

Capturar Video y Tomar Fotos – Silverlight


Hoy voy a mostrar un ejemplo de como Silverlight 4 permite la integración de Cámaras Web y Micrófonos en las aplicaciones.

El espacio de Nombres que permite la captura de video es System.Windows.Media, y la clase CaptureSource que es la encargada de capturar el video y el audio.

Sigue leyendo

Diferencias y Semejanzas entre WPF y Silverlight


Escarbando en mis documentos, me encontré con un Paper donde explican las semejanzas y diferencias entre WPF y Silverlight, el paper se encuentra en Inglés, pero es muy explicito en cuanto a la teoría y la práctica.

Sin más preámbulos, les dejo el Link para que puedan descargar el archivo:

Comparación entre WPF y Silverlight.

 

Panel desplegable WPF – Silverlight


Muchas veces necesitamos en nuestra aplicación un panel que al presionarlo muestre su contenido y luego vuelva a ocultarse.

Lo que vamos a hacer es crear con animaciones un panel donde con un botón podemos mostrar y ocultar su contenido:

Antes:

panel1

Después:

 panel2

Manos a la obra!

Creamos un nuevo proyecto en WPF, (este ejemplo puede ser usado en Silverlight), adicionamos un control Border , la posición del Panel varía según nuestros requerimientos, para empezar crearemos uno que se encuentre arriba y al desplegarse se despliegue hacia abajo.

Las propiedades del Border:

 <Border Height="30" Width="200" CornerRadius="10" Margin="115,0,125,0" Name="border1" VerticalAlignment="Top"

  BorderBrush="Green" BorderThickness="2" Background="LightGreen">

</Border>

Desde el código xaml, agregamos dentro del Control Border un Control Grid, el cuál será nuestro contenedor principal, recordemos que el Control Border no es un contenedor y solo puede tener un control anidado. La grilla tendrá 1 columna y 2 filas, una fila será la que tendrá nuestro botón para activar el panel y la otra fila tendrá lo que queremos mostrar.

Sigue leyendo

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