Panduan untuk Membuat Efek Rollover Menggunakan Event

Contoh ini menunjukkan cara mengubah warna elemen saat penunjuk mouse memasuki dan meninggalkan area yang ditempati oleh elemen .

Contoh ini terdiri dari file Extensible Application Markup Language (XAML) dan file code-behind.

Nota

Contoh ini menunjukkan cara menggunakan event, tetapi cara yang disarankan untuk mencapai efek yang sama adalah dengan menggunakan Trigger dalam sebuah gaya. Untuk informasi selengkapnya, lihat Penataan dan Pembuatan Template.

Contoh

XAML berikut membuat antarmuka pengguna, yang terdiri dari Border di sekitar TextBlock, dan melampirkan penanganan aktivitas MouseEnter dan MouseLeave ke 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>

Kode berikut di belakang membuat penanganan aktivitas MouseEnter dan MouseLeave. Saat penunjuk mouse memasuki Border, latar belakang Border diubah menjadi merah. Ketika penunjuk mouse meninggalkan Border, latar belakang Border diubah kembali menjadi putih.

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