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

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

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

참고
이 예제에서는 이벤트를 사용하는 방법을 보여 주지만 이와 같은 효과를 얻는 데 권장되는 방법은 스타일에서 Trigger를 사용하는 것입니다.자세한 내용은 스타일 지정 및 템플릿를 참조하십시오.

예제

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

다음 코드 숨김은 MouseEnter 및 MouseLeave 이벤트 처리기를 만듭니다. 마우스 포인터가 Border로 들어가면 Border의 배경색이 빨강으로 변경되고, 마우스 포인터가 Border를 나가면 Border의 배경색이 다시 흰색으로 변경됩니다.

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

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