Silverlight 3 – Pixel Effects

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.

<Image Source="images/pirate.jpg" Width="150" Height="194">

    <Image.Effect>

        <BlurEffect x:Name="BlurEffect" Radius="7"/>

    </Image.Effect>

</Image>

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.

<Image Source="images/pirate.jpg" Width="150" Height="194" 

       x:Name="PirateImageDropShadow"/>

<Button Content="Aplicar Drop Shadow Effect" 

        Click="ButtonDropShadow_Click"></Button>

Ahora vamos a lo importante, como agregar el efecto.

private void ButtonDropShadow_Click(object sender, RoutedEventArgs e)

{

    DropShadowEffect ds = new DropShadowEffect(); 

    ds.BlurRadius = 10;

    ds.ShadowDepth = 15;            

    PirateImageDropShadow.Effect = ds;

}

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.

public class WateryEffect : ShaderEffect

{

    public WateryEffect()

    {

        PixelShader ps = new PixelShader();

        ps.UriSource = new Uri("/PixelEffects;component/effects/WateryEffect.ps", UriKind.Relative);

        this.PixelShader = ps;

    }

}

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.

<Image Source="images/pirate.jpg" Width="150" Height="194" 

       x:Name="PirateImageCustom" />

<Button Content="Aplicar Custom Effect" 

        Click="ButtonCustom_Click"Button>

Ahora vamos al código.

private void ButtonCustom_Click(object sender, RoutedEventArgs e)

{

    WateryEffect we = new WateryEffect();

    PirateImageCustom.Effect = we;

}

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í.