Hoe creëer je een rollover-effect met behulp van gebeurtenissen

In dit voorbeeld ziet u hoe u de kleur van een element wijzigt terwijl de muisaanwijzer binnenkomt en het gebied verlaat dat door het element wordt bezet.

Dit voorbeeld bestaat uit een XAML-bestand (Extensible Application Markup Language) en een code-behind-bestand.

Notitie

In dit voorbeeld ziet u hoe u gebeurtenissen gebruikt, maar de aanbevolen manier om hetzelfde effect te bereiken, is door een Trigger in een stijl te gebruiken. Zie Styling and Templatingvoor meer informatie.

Voorbeeld

De volgende XAML maakt de gebruikersinterface, die bestaat uit Border rond een TextBlocken koppelt de MouseEnter en MouseLeave gebeurtenis-handlers aan de 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>

Met de volgende code worden de MouseEnter- en MouseLeave-eventhandlers aangemaakt. Wanneer de muis aanwijzer de Borderinvoert, wordt de achtergrond van de Border gewijzigd in rood. Wanneer de muis aanwijzer de Borderverlaat, wordt de achtergrond van de Border weer in wit gewijzigd.

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