--- title: "How to: Create a Rollover Effect Using Events" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "colors of elements [WPF], changing" - "rollover effect [WPF]" - "element colors [WPF], changing" ms.assetid: 3b20d028-6f1c-4b25-95d2-fa68cefbdb4c --- # How to: Create a Rollover Effect Using Events This example shows how to change the color of an element as the mouse pointer enters and leaves the area occupied by the element. This example consists of a [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] file and a code-behind file. > [!NOTE] > This example demonstrates how to use events, but the recommended way to achieve this same effect is to use a in a style. For more information, see [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview). ## Example The following XAML creates the user interface, which consists of around a , and attaches the and event handlers to the . [!code-xaml[mouseenterMouseleave#MouseEnterLeaveSampleXAML](~/samples/snippets/csharp/VS_Snippets_Wpf/mouseenterMouseleave/CSharp/Window1.xaml#mouseenterleavesamplexaml)] The following code behind creates the and event handlers. When the mouse pointer enters the , the background of the is changed to red. When the mouse pointer leaves the , the background of the is changed back to white. [!code-csharp[mouseenterMouseleave#MouseEnterLeaveSampleEventHandlers](~/samples/snippets/csharp/VS_Snippets_Wpf/mouseenterMouseleave/CSharp/Window1.xaml.cs#mouseenterleavesampleeventhandlers)] [!code-vb[mouseenterMouseleave#MouseEnterLeaveSampleEventHandlers](~/samples/snippets/visualbasic/VS_Snippets_Wpf/mouseenterMouseleave/VisualBasic/Window1.xaml.vb#mouseenterleavesampleeventhandlers)]