Erstellen eines Rollovereffekts mit Ereignissen

In diesem Beispiel wird gezeigt, wie Sie die Farbe eines Elements ändern, indem der Mauszeiger in den Bereich gelangt und ihn wieder verlässt.

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

Hinweis

In diesem Beispiel wird veranschaulicht, wie Ereignisse verwendet werden. Die empfohlene Vorgehensweise besteht jedoch darin, einen Trigger in einem Stil zu verwenden. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

Beispiel

Im folgenden XAML-Code wird die Benutzeroberfläche erstellt, die aus einer Border um einen TextBlock besteht, anschließend werden die Ereignishandler MouseEnter und MouseLeave an die Border angefü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 CodeBehind erstellt die Ereignishandler MouseEnter und MouseLeave. Wenn der Mauszeiger den Mauszeiger auf die Border bewegt wird, ändert sich der Hintergrund des Border in Rot. Wenn der Mauszeiger wieder auf der Border heraus bewegt wird, ändert sich der Hintergrund des Border zurück in Weiß.

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