Rasca y gana con InkCanvas

A través del control InkCanvas de Windows Presentation Foundation. Deseo mostrar una aplicación que pretende imitar a un décimo del rasca y gana o por podernos imaginar un cristal lleno de vaho que pretendemos limpiar para vernos reflejados. ¿Cómo vamos a lograrlo?, la solución es la utilización de uno de los controles del XAML de WPF (InkCanvas). Este se situará detrás de la imagen, así será invisible para el usuario pero nosotros podemos aprovechar todas las posibilidades que este control nos ofrece. Para asegurarnos que los clic del usuario se realicen sobre InkCanvas y nos sobre la propia imagen, tenemos que establecer la propiedad IsHitTestVisible como False.

El siguiente paso que debemos seguir es la inclusión el control VisualBrush dentro de la propiedad OpacityMask de la imagen. Para que la imagen sea visible a medida que se pinta, tenemos que pintar sobre el InkCanvas directamente. Esta funcionalidad la conseguiremos enlazando la propiedad Visual del control VisualBrush con InkCanvas (<VisualBrush Visual="{Binding ElementName=inkCanvas}"/>).

Por defecto el fondo de Inkcanvas es blanco y esta es una de las razones por las que imagen se muestra. Para evitar que se vea la imagen deberemos establecer la propiedad Background a transparente otorgándole el valor x:Null (Background="{x:Null}). También debemos otorgarle el mismo valor al Background en el Grid que contiene los controles citados con anterioridad.

Como inicialmente el grosor del pincel es demasiado pequeño, debemos aumentar el tamaño de este para que no se haga tan pesado quitar la capa que tapa la imagen, para ello utilizaremos los atributos de dibujo del InkCanvas (<DrawingAttributes Height="25" Width="25"/>).

Por último añadimos un borde para dar aspecto de un marco en un espejo o el borde del rasca y gana.

El código completo del proyecto es el siguiente:

<Window x:Class="Brush.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="300" Width="300">

<Border Background="#FF909090" BorderBrush="#FF000000"

BorderThickness="2,2,2,2">

<Grid Width="Auto" Height="Auto" Background="{x:Null}">

<InkCanvas x:Name="inkCanvas"

Background="{x:Null}">

<InkCanvas.DefaultDrawingAttributes>

<DrawingAttributes Height="25" Width="25"/>

</InkCanvas.DefaultDrawingAttributes>

</InkCanvas>

<Image IsHitTestVisible="False"

Source="Cein.JPG" Stretch="Fill">

<Image.OpacityMask>

<VisualBrush

Visual="{Binding ElementName=inkCanvas}"/>

</Image.OpacityMask>

</Image>

</Grid>

</Border>

 

 

</Window>

 

El resultado visual de nuestro proyecto es el siguiente:

 

 1

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *