방법: 이벤트를 사용하여 롤오버 효과 만들기

이 예제에서는 마우스 포인터가 요소에서 차지하는 영역에 들어가고 나갈 때 요소의 색을 변경하는 방법을 보여 줍니다.

이 예제는 XAML(Extensible Application Markup Language) 파일 및 코드 숨김 파일로 구성됩니다.

예시

다음 XAML은 TextBlock 주위에서 Border로 구성된 사용자 인터페이스를 만들고 MouseEnter 및 MouseLeave 이벤트 처리기를 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>

다음 코드 숨김은 GotFocus 및 LostFocus 이벤트 처리기를 만듭니다. 마우스 포인터가 Border에 들어가면 Border의 배경이 빨간색으로 변경됩니다. 마우스 포인터가 Border에서 나가면 Border의 배경이 흰색으로 변경됩니다.

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