Gewusst wie: Erstellen eines Rollovereffekts mit Ereignissen

Dieses Beispiel zeigt, wie Sie die Farbe eines Elements ändern können, wenn der Mauszeiger in den durch das Element belegten Bereich kommt bzw. diesen verlässt.

Dieses Beispiel besteht aus einer Extensible Application Markup Language (XAML)-Datei und einer Code-Behind-Datei.

Hinweis
In diesem Beispiel wird die Verwendung von Ereignissen veranschaulicht. Es wird jedoch empfohlen, diesen Effekt über einen Trigger in einem Stil zu erzielen.Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

Beispiel

Der folgende XAML-Code erstellt die Benutzeroberfläche, die aus einem Border rund um einen TextBlock besteht und den MouseEnter-Ereignishandler und den MouseLeave-Ereignishandler an den Border anfügt.

<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>

Der folgende Code-Behind erstellt die Ereignishandler MouseEnter und MouseLeave. Wenn der Mauszeiger in den Border gelangt, wird der Hintergrund des Border rot . Wenn der Mauszeiger den Border verlässt, wird der Hintergrund des Border wieder weiß.

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

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;
    }
}