Come fare per creare un effetto al passaggio del mouse utilizzando eventi

In questo esempio viene illustrato come modificare il colore di un elemento quando il puntatore del mouse entra e lascia l'area occupata dall'elemento .

Questo esempio è costituito da un file XAML (Extensible Application Markup Language) e da un file code-behind.

Annotazioni

In questo esempio viene illustrato come usare gli eventi, ma il modo consigliato per ottenere lo stesso effetto consiste nell'usare un Trigger all'interno di uno stile. Per ulteriori informazioni, vedere Styling e Templating.

Esempio

Il codice XAML seguente crea l'interfaccia utente, costituita da Border intorno a un TextBlock, e associa i gestori eventi MouseEnter e MouseLeave al 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>

Il codice sottostante crea i gestori di eventi MouseEnter e MouseLeave. Quando il puntatore del mouse entra nella Border, lo sfondo del Border viene modificato in rosso. Quando il puntatore del mouse lascia il Border, lo sfondo del Border viene nuovamente impostato su bianco.

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