En términos fotográficos el ojo de pez es un ángulo de visión extremadamente grande a partir de 180⁰.Voy asemejar este efecto en términos Informáticos. Utilizaré la herramienta de Microsoft con la que en los últimos meses he escrito diversas entradas en este blog, Windows Presentation Foundation, para ello utilizaré una serie de botones que al situarnos sobre ellos realicen el citado efecto.
Una vez abierto Visual Studio 2008 y creado un nuevo proyecto en WPF, dentro de la etiqueta <Grid> que por defecto nos presenta WPF, introduciré la etiqueta <StackPanel> que actuará como contenedor de los botones, recursos, animaciones, etc.
El primer paso es introducir un estilo dentro de los recursos del contenedor citado con anterioridad. El estilo aplicará dos eventos uno cuando nos situemos dentro del control y otro al desplazar el puntero del ratón fuera del control. Los eventos cambiarán la propiedad FontSize de los botones durante un periodo de tiempo, creciendo o decreciendo según me sitúe dentro o fuera del botón con el puntero del ratón como veremos en el siguiente código:
<StackPanel>
<StackPanel.Resources>
<!–recursos que podemos aplicar a Stack Panel–>
<Style TargetType="{x:Type Button}">
<!–estilo que aplicamos a los botones,indicando que el control
al que se va aplicar el estilo es de tipo botón–>
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontSize" Value="12" />
<!–valores iniciales que toman los botones–>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<!–se aplica un evento enrutado de entrada del
puntero en el control para cambiarle la
propiedad FontSize–>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="36" Duration="0:0:1" />
<!–se le aplica el nuevo valor de FontSize durante 1 sg–>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<!–al salir el puntero del boton vuelve al tamaño original–>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="12" Duration="0:0:0.25" />
<!–el cambio del tamaño del botón se realizará durante 25 sg–>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button>Botón No. 1</Button>
<Button>Botón No. 2</Button>
<Button>Botón No. 3</Button>
<Button>Botón No. 4</Button>
<Button>Botón No. 5</Button>
<Button>Botón No. 6</Button>
<Button>Botón No. 7</Button>
<Button>Botón No. 8</Button>
<Button>Botón No. 9</Button>
<!–controles a los que se les aplica el efecto ojo de pez–>
</StackPanel>
De este modo he conseguido un efecto llamativo que puedo aplicar en un listado de artículos, referenciados por su correspondiente imagen, destacando el que vamos a seleccionar con el efecto ojo de pez.