Nasıl Yapılır: Etkinlikleri Kullanarak Rollover Efekti Oluşturma

Bu örnekte, fare işaretçisi öğe tarafından işgal edilen alana girip çıkarken öğenin renginin nasıl değiştirilip bırakıldığı gösterilmektedir.

Bu örnek, Genişletilebilir Uygulama biçimlendirme dili (XAML) dosyasından ve arka planda kod dosyasından oluşur.

Uyarı

Bu örnekte olayların nasıl kullanılacağı gösterilmektedir, ancak aynı etkiyi elde etmenin önerilen yolu bir stilde Trigger kullanmaktır. Daha fazla bilgi için bkz. Stil oluşturma ve Şablon Oluşturma.

Örnek

Aşağıdaki XAML, bir Borderetrafında TextBlock'dan oluşan ve MouseEnter ve MouseLeave olay işleyicilerinin Border'e eklendiği kullanıcı arabirimini oluşturur.

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

Aşağıdaki kod, MouseEnter ve MouseLeave olay işleyicilerini oluşturur. Fare işaretçisi Bordergirdiğinde, Border arka planı kırmızıya dönüşür. Fare işaretçisi Borderbıraktığında, Border arka planı beyaza döner.

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