Cómo: Crear un efecto de rollover usando 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 .

Este ejemplo consta de un archivo de lenguaje de marcado extensible de aplicaciones (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, vea Aplicar estilos y plantillas.

Ejemplo

El siguiente XAML crea la interfaz de usuario, que consta de Border alrededor de un TextBlock, y adjunta los controladores de eventos MouseEnter y MouseLeave a 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 código subyacente siguiente crea los MouseEnter controladores de eventos y MouseLeave . Cuando el puntero del mouse entra en Border, el fondo de Border se cambia a rojo. Cuando el puntero del ratón abandone el Border, el fondo de Border se cambiará nuevamente a 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