Featured Posts

Anunciando: Taller de Silverlight 4Anunciando: Taller de Silverlight 4 Antes que otra cosa, quiero agradecer a todos y todas quienes me ayudaron a contestar la encuesta que preparé en días pasados.  Recibí más de 250 respuestas de personas...

Readmore

Silverlight Tour–Guadalajara (08 al 10 de Septiembre... El interés y difusión de Silverlight como plataforma de desarrollo está siendo cada vez más grande y muchas empresas están optando por esta tecnología para construir...

Readmore

Curso gratuito de Introducción a Silverlight 4 – 2da. ParteCurso gratuito de Introducción a Silverlight... Tengo el gusto de informarles que ya está disponible la segunda parte del Curso gratuito de Introducción a Silverlight 4 en Español, el cual ahora consta de un total...

Readmore

Silverlight Tour en Español – Ahora con controles de Telerik!Silverlight Tour en Español – Ahora con... Tengo el gusto de informar que tal como sucede con el Silverlight Tour en USA y Canadá, ahora también el Silverlight Tour en Español en asociación con Telerik incluye...

Readmore

Rodrigo Díaz Concha Rss

Silverlight 4 Beta – Brocha HTML

Posted on : 10-12-2009 | By : Rodrigo | In : Silverlight 4

Tags: , ,

1

En un artículo anterior dimos a conocer el nuevo control WebBrowser, incluído como parte de Silverlight 4 Beta, el cual nos permite mostrar contenido HTML en nuestras aplicaciones Fuera del Navegador, siendo ese contenido un HTML creado de manera dinámica o incluso alguna página Web externa.  En este artículo detallaremos el elemento HtmlBrush que nos brinda la oportunidad de ‘pintar’ nuestros elementos con el contenido cargado en el control WebBrowser.

El proyecto

Iniciaremos creando un nuevo proyecto de Silverlight 4 en Visual Studio 2010 Beta 2 y aceptaremos la opción predeterminada de crear una aplicación Web para probar la aplicación.

Clase HtmlBrush

La clase HtmlBrush es una clase derivada de TileBrush y nos permite usar un control WebBrowser con contenido HTML como fuente para poder pintar cualquier propiedad de tipo Brush en los elementos de Xaml.  La clase tiene la propiedad SourceName la  cual indica el nombre del control WebBrowser que deseamos utilizar como fuente.  Asimismo, expone el método SetSource() para que programáticamente podamos establecer la fuente sobre este tipo de brocha.  El siguiente fragmento de código muestra la utilización más básica de esta brocha en Xaml:


<Ellipse.Fill>
    <HtmlBrush x:Name="htmlbrush"
               SourceName="wb" />
</Ellipse.Fill>

El código anterior establece la propiedad SourceName al WebBrowser deseado, en este caso identificado con la variable wb.

HtmlBrush.Redraw()

La clase expone el método públic Redraw() el cual obliga a la brocha a dibujarse asimisma ya que no lo hace de manera automática.  Por este motivo, si tenemos como contenido del WebBrowser alguna página Web que incluya alguna animación o video necesitaremos ejecutar este método de manera recurrente, tal vez a través de un DispatcherTimer.  El siguiente fragmento de código muestra dicha técnica:

//Crea un timer para redibujar la brocha cada medio segundo
DispatcherTimer timer = new DispatcherTimer() { Interval = TimeSpan.FromMilliseconds(500) };
timer.Tick += (s, a) => htmlbrush.Redraw();  //Obliga a la brocha a dibujarse asimisma
timer.Start();

Cabe mencionar que esta brocha está disponible únicamente en Aplicaciones Fuera del Navegador, ya que ese es uno de los requisitos para el control WebBrowser.

Resultado

La siguiente figura muestra la aplicación aquí descrita finalizada, en donde podemos observar que la elipse del lado derecho es ‘pintado’ por medio de la brocha de tipo HtmlBrush.  Asimismo, la aplicación incluye un control de tipo Slider enlazado a una Proyección en Perspectiva, para poder corroborar que el comportamiento de esta clase es similar al resto de brochas ya conocidas en la plataforma.

image

Puedes descargar el código aquí

Puedes ver el demo en vivo aquí (requiere Silverlight 4 y tener la aplicación Fuera del Navegador)

  • Share/Bookmark

Comments (1)

[...] Ver el artículo completo aquí [...]

Write a comment

Spam Protection by WP-SpamFree