Compartir vía


Cómo: Crear un efecto de activación mediante eventos

En este ejemplo se muestra cómo cambiar el color de un elemento a medida que el puntero del mouse entra y sale del área ocupada por el elemento.

En este ejemplo se usa un archivo de lenguaje de marcado de aplicación extensible (XAML) y un archivo de código subyacente.

Nota

En este ejemplo se muestra cómo usar eventos, pero la manera recomendada de lograr este mismo efecto es usar un Trigger en un estilo. Para obtener más información, consulte Aplicar estilos y plantillas.

Ejemplo

El siguiente XAML crea la interfaz de usuario, que consiste en Border alrededor de un TextBlock, y adjunta los controladores de eventos MouseEnter y MouseLeave al Border.

<StackPanel>
  <Border MouseEnter="OnMouseEnterHandler"
          MouseLeave="OnMouseLeaveHandler"
          Name="border1" Margin="10"
          BorderThickness="1"
          BorderBrush="Black"
          VerticalAlignment="Center"
          Width="300" Height="100">
    <Label Margin="10" FontSize="14"
           HorizontalAlignment="Center">Move Cursor Over Me</Label>
  </Border>
</StackPanel>

El siguiente código subyacente crea los controladores de eventos MouseEnter y MouseLeave. Cuando el puntero del mouse entra en el Border, el fondo del Border cambia a rojo. Cuando el puntero del mouse abandona el Border, el fondo del Border vuelve a ser blanco.

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }

    // raised when mouse cursor enters the area occupied by the element
    void OnMouseEnterHandler(object sender, MouseEventArgs e)
    {
        border1.Background = Brushes.Red;
    }

    // raised when mouse cursor leaves the area occupied by the element
    void OnMouseLeaveHandler(object sender, MouseEventArgs e)
    {
        border1.Background = Brushes.White;
    }
}
Partial Public Class Window1
    Inherits Window

    Public Sub New()
        InitializeComponent()
    End Sub
    ' raised when mouse cursor enters the are occupied by the element
    Private Sub OnMouseEnterHandler(ByVal sender As Object, ByVal e As MouseEventArgs)
        border1.Background = Brushes.Red
    End Sub
    ' raised when mouse cursor leaves the are occupied by the element
    Private Sub OnMouseLeaveHandler(ByVal sender As Object, ByVal e As MouseEventArgs)
        border1.Background = Brushes.White
    End Sub
End Class