Eruano's Blog

Simple y con foco… como debe ser!

WPF – Efecto enfocar/resaltar elemento

with one comment

Revisando los tutoriales de WPF for dummies me encontre con un efecto sencillo pero que da un toque chevere a los proyectos: El resaltado de elementos cuando el mouse pasa sobre ellos. He aqui un ejemplo sencillo.

<UserControl.Resources>
        <!–  Se define el estilo para el elemento a animar –>
        <Style TargetType=”{x:Type Border}” x:Key=”BorderStyle”>
            <!– Se define el valor por defecto de la opacidad –>
            <Setter Property=”Image.Opacity” Value=”0.5″></Setter>
            <Style.Triggers>
                <!– Se define el evento que desencadela la animacion –>
                <Trigger Property=”IsMouseOver” Value=”True”>
                    <!– Se establece el valor de la opacidad en un valor mayor –>
                    <Setter Property=”Image.Opacity” Value=”1″></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Canvas>
        <!– Se define el elemento que va a utilizar el estilo definido arriba –>
        <Border BorderThickness=”3″ Height=”50″ Width=”100″ CornerRadius=”10″
                     BorderBrush=”#FFF70000″ Style=”{StaticResource BorderStyle}”>
            <TextBlock Margin=”15,5,13,5″ TextWrapping=”Wrap”>
                <Run Foreground=”White” FontWeight=”Bold” FontSize=”16″ Text=”Aceptar”/>
            </TextBlock>
        </Border>
    </Canvas> 

Con este simple codigo cuando pasen el mouse sobre el elemento (incluyendo sus hijos) se vera un efecto de resaltado.

Saludos.

 

Written by eruano

23 febrero 2011 a 11:45 pm

Una respuesta

Subscribe to comments with RSS.

  1. At this time it appears like WordPress is the best blogging
    platform out there right now. (from what I’ve read) Is that what you are using on your blog?

    Discount Coupons

    20 marzo 2013 at 11:59 am


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: