Anvisningar: Skapa en rollover-effekt med hjälp av händelser

Det här exemplet visar hur du ändrar färgen på ett element när muspekaren kommer in och lämnar det område som används av elementet.

Det här exemplet består av en XAML-fil (Extensible Application Markup Language) och en kod bakom-fil.

Anmärkning

Det här exemplet visar hur du använder händelser, men det rekommenderade sättet att uppnå samma effekt är att använda en Trigger i ett format. För mer information, se Styling och mallhantering.

Exempel

Följande XAML skapar användargränssnittet, som består av Border runt en TextBlock, och kopplar MouseEnter- och MouseLeave händelsehanterare till 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>

Följande kod bakom skapar händelsehanterarna MouseEnter och MouseLeave. När muspekaren anger Borderändras bakgrunden för Border till röd. När muspekaren lämnar Borderändras bakgrunden för Border tillbaka till vit.

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