Silverlight 3 trae como novedad la posibilidad de aplicar efectos a los controles de nuestra aplicación. Por defecto, tenemos solamente 2 efecto disponibles, BlurEffect y DropShadowEffect, pero lo más interesante es la posibilidad de implementar nuestros propios efectos sobre cualquier objeto del tipo UIElement.
La propiedad que nos permite generar estos efectos es Effect.
Vamos a mostrar como podemos aplicar los efectos predefinidos y de que manera podemos integrar una efecto personalizado en nuestra aplicación.
Como siempre tenemos dos posibilidades de modificar el efecto, una es agregándolo vía XAML y la otra es por código.
Esta es la imágen que vamos a modificar.
Ahora vamos a ver como la agregamos en XAML y le aplicamos BlurEffect.
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">Image</span> <span style="color: #ff0000">Source</span><span style="color: #0000ff">="images/pirate.jpg"</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="150"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="194"</span><span style="color: #0000ff">></span> |
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">Image.Effect</span><span style="color: #0000ff">></span> |
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">BlurEffect</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="BlurEffect"</span> <span style="color: #ff0000">Radius</span><span style="color: #0000ff">="7"</span><span style="color: #0000ff">/></span> |
|
1 |
<span style="color: #0000ff"></</span><span style="color: #800000">Image.Effect</span><span style="color: #0000ff">></span> |
|
1 |
<span style="color: #0000ff"></</span><span style="color: #800000">Image</span><span style="color: #0000ff">></span> |
De manera fácil modificamos sin código una imágen, que como vemos queda con el efecto deseado.
Ahora vamos a aplicarle el DropShadowEffect, pero desde el código. Agregamos en el XAML la imágen y un botón que al hacer click modifica la imágen.
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">Image</span> <span style="color: #ff0000">Source</span><span style="color: #0000ff">="images/pirate.jpg"</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="150"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="194"</span> |
|
1 |
<span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="PirateImageDropShadow"</span><span style="color: #0000ff">/></span> |
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">Button</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">="Aplicar Drop Shadow Effect"</span> |
|
1 |
<span style="color: #ff0000">Click</span><span style="color: #0000ff">="ButtonDropShadow_Click"</span><span style="color: #0000ff">></</span><span style="color: #800000">Button</span><span style="color: #0000ff">></span> |
Ahora vamos a lo importante, como agregar el efecto.
|
1 |
<span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> ButtonDropShadow_Click(<span style="color: #0000ff">object</span> sender, RoutedEventArgs e) |
|
1 |
{ |
|
1 |
DropShadowEffect ds = <span style="color: #0000ff">new</span> DropShadowEffect(); |
|
1 |
|
1 |
ds.BlurRadius = 10; |
|
1 |
ds.ShadowDepth = 15; |
|
1 |
  |
|
1 |
PirateImageDropShadow.Effect = ds; |
|
1 |
} |
Sencillo, ya que creamos un objeto DropShadowEffect, cambiamos lo valores por lo que nosotros queremos y luego lo asignamos a la propiedad Effect del control.
Creo que lo que hace más interesante esta propiedad es integrar efectos creados por nosotros. Para mostrar el ejemplo, utilice un efecto creado por Boyan Mihaylov, pueden revisar el post sobre como crearlo aquí.
Cuando generamos nuestro efecto, tenemos un archivo .cs que crea la clase y un archivo .ps que es el efecto. Debemos agregar a nuestro proyecto estos archivos. en nuestro ejemplo son WateryEffect.cs y WateryEffect.ps.
WateryEffect.cs luce de la siguiente manera.
|
1 |
<span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> WateryEffect : ShaderEffect |
|
1 |
{ |
|
1 |
<span style="color: #0000ff">public</span> WateryEffect() |
|
1 |
{ |
|
1 |
PixelShader ps = <span style="color: #0000ff">new</span> PixelShader(); |
|
1 |
ps.UriSource = <span style="color: #0000ff">new</span> Uri(<span style="color: #006080">"/PixelEffects;component/effects/WateryEffect.ps"</span>, UriKind.Relative); |
|
1 |
|
1 |
<span style="color: #0000ff">this</span>.PixelShader = ps; |
|
1 |
} |
|
1 |
} |
WateryEffect.ps es el archivo de efectos que utiliza Silverlight, hay varios compiladores que generan estos archivos a partir de un FX, pueden revisar Shazzam o Web Pixel Shader Compiler.
Como en el caso anterior, agregamos la imágen y un botón.
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">Image</span> <span style="color: #ff0000">Source</span><span style="color: #0000ff">="images/pirate.jpg"</span> <span style="color: #ff0000">Width</span><span style="color: #0000ff">="150"</span> <span style="color: #ff0000">Height</span><span style="color: #0000ff">="194"</span> |
|
1 |
<span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="PirateImageCustom"</span> <span style="color: #0000ff">/></span> |
|
1 |
<span style="color: #0000ff"><</span><span style="color: #800000">Button</span> <span style="color: #ff0000">Content</span><span style="color: #0000ff">="Aplicar Custom Effect"</span> |
|
1 |
<span style="color: #ff0000">Click</span><span style="color: #0000ff">="ButtonCustom_Click"</span><span style="color: #ff0000">Button</span><span style="color: #0000ff">></span> |
Ahora vamos al código.
|
1 |
<span style="color: #0000ff">private</span> <span style="color: #0000ff">void</span> ButtonCustom_Click(<span style="color: #0000ff">object</span> sender, RoutedEventArgs e) |
|
1 |
{ |
|
1 |
WateryEffect we = <span style="color: #0000ff">new</span> WateryEffect(); |
|
1 |
  |
|
1 |
PirateImageCustom.Effect = we; |
|
1 |
} |
Creamos el objeto de nuestro efecto y lo aplicamos como cualquier efecto, generando lo que nosotros queremos que es cambiar alguna propiedad del control.
Pueden descargar el proyecto aquí.