ARTICLE

Silverlight Mouse Enter Event

Posted by Raj Kumar in Articles | Silverlight with C# on October 20, 2010

Tags: Enter Event, MouseEnter event., Silverlight, Silverlight Mouse

Tweet
3694
1

Reader Level: Beginner

This article demonstrates the easiest implementation of hovering in Silverlight programmatically using the MouseEnter event. The use of MouseEnter event is when mouse comes over some text of some image something will be changed like this example.

First of all make a new Silverlight application and put name and location to save that application in local directory.

I am using three text boxes with some text when cursor come over to textbox image should be changed.

<UserControl x:Class="AdaptSample.TestHover"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Width="700" Height="300">

    <Grid x:Name="LayoutRoot">
        <Rectangle x:Name="rectangle" Margin="8,8,0,0" Stroke="#FFC2BFBF" HorizontalAlignment="Left" Width="262" Height="51" VerticalAlignment="Top" Fill="#FFE08A0B"/>
        <TextBlock x:Name="Title1TextBox" Margin="11,17,0,0" TextWrapping="Wrap" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9" Height="37" VerticalAlignment="Top"
                     Text="CONSULTING & STAFFING" HorizontalAlignment="Left" Width="255" LineHeight="12" MouseEnter="Title1TextBox_MouseEnter" />
        <Rectangle Margin="7,61,0,0" Stroke="#FFC2BFBF" HorizontalAlignment="Left" Width="262" Height="51" VerticalAlignment="Top">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE0CE0A" Offset="0"/>
                    <GradientStop Color="#FFA39606" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock x:Name="Title2TextBox" Margin="11,69,0,0" TextWrapping="Wrap" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9"
                     Text="SOFTWARE DEVELOPMENT" HorizontalAlignment="Left" Width="261" RenderTransformOrigin="0.426,1.25" Height="38" VerticalAlignment="Top" MouseEnter="Title2TextBox_MouseEnter" />
        <Rectangle Margin="7,114,0,0" Stroke="#FFC2BFBF" HorizontalAlignment="Left" Width="262" Height="51" VerticalAlignment="Top">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF442BC0" Offset="0"/>
                    <GradientStop Color="#FF094CB8" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock x:Name="Title3TextBox" Margin="12,120,0,0" TextWrapping="Wrap" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9" HorizontalAlignment="Left" Width="250" RenderTransformOrigin="0.426,1.25" Text="PROJECT MANAGEMENT" Height="35" VerticalAlignment="Top" MouseEnter="Title3TextBox_MouseEnter" />
        <Rectangle Margin="7,218,0,411" Stroke="#FFC2BFBF" HorizontalAlignment="Left" Width="262" Height="51">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA53CAB" Offset="0"/>
                    <GradientStop Color="#FF590374" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Image Margin="0,8,19,0" Source="../img/1.jpg" x:Name="MainImage" Height="281" VerticalAlignment="Top" HorizontalAlignment="Right" Width="404" />
    </Grid>
</UserControl>

Code Behind:

using System.Windows.Media.Imaging;

public partial class TestHover : UserControl
    {
        public TestHover()
        {
            InitializeComponent();
        }

        private void Title1TextBox_MouseEnter(object sender, MouseEventArgs e)
        {
            this.MainImage.Source = new BitmapImage(new Uri("../img/1.jpg", UriKind.Relative));
        }

        private void Title2TextBox_MouseEnter(object sender, MouseEventArgs e)
        {
            this.MainImage.Source = new BitmapImage(new Uri("../img/2.jpg", UriKind.Relative));
        }

        private void Title3TextBox_MouseEnter(object sender, MouseEventArgs e)
        {
            this.MainImage.Source = new BitmapImage(new Uri("../img/3.jpg", UriKind.Relative));
        }