Creating Image menu in Silverlight with Amazing Mouse over effect

Creating Image menu in Silverlight with Amazing Mouse over effect



XAML Code:



<Canvas>




<Image x:Name="HomeImage" Source="abc/xyz.png" MouseEnter="DoMouseEnter" MouseLeave="DoMouseLeave" Canvas.Left="84" Canvas.Top="101" Cursor="Hand" ToolTipService.ToolTip="Client Manager" Width="88" Height="88" >

<Image.RenderTransform>

<ScaleTransform x:Name="HomeScale" CenterX="64" CenterY="64"/>

</Image.RenderTransform>

</Image>
</Canvas>


XAML.CS:



Then just declare globally this:



private Storyboard _homeTimer;/*Declartion of timer of home Image button*/

private int _homeDir = -1;/*Declartion of Direction of home Image button*/

private bool _homeMouseOver = false;/*Declartion of Mousover of home Image button*/


Now set the timer of home Image button in millisecond and event handler for button timer



Button animation event handler
_homeTimer = new Storyboard();

_homeTimer.Duration = TimeSpan.FromMilliseconds(10);/*set the timer of home image button in millseccond*/

_homeTimer.Completed += new EventHandler(HomeTimer);/*home button timer event handler*/

_homeTimer.Begin();/*Timer begin *



Adjust scale:



In this Image button I can use transforming of image when the mouse come over Image the come up and when the mouse not on the Image the Image is shrink. So, for this we can set the Image DIRECTION, SCALING, MOUSEOVER, TIMER
       
/// Scale Transforming of Omage Button
/// </summary>
/// <param name="direction">Current state of direction of Button</param>
/// <param name="scale">scale of button</param>
/// <param name="mouseOver">mouse over state</param>
/// <param name="timer">Animation Time of button</param>
/// <returns></returns>
private int AdjustScale(int direction, ScaleTransform scale, bool mouseOver, Storyboard timer)
{

if (direction == 1)
{

if (scale.ScaleX < 1.3)
{

scale.ScaleX += 0.05;

scale.ScaleY += 0.05;

}

else if (false == mouseOver)
{

direction = 0;
}

}

else if (scale.ScaleX > 1.0)
{
scale.ScaleX -= 0.05;

scale.ScaleY -= 0.05;
}

timer.Begin();

return direction;
}



On Mouse Leave Image Button:


       /// <summary>
/// On Mouse leave Image Button
/// </summary>
/// <param name="sender">Name of Image</param>
/// <param name="e"></param>
private void DoMouseLeave(object sender, MouseEventArgs e)
{

if (sender == HomeImage)

_homeMouseOver = false;


}





On Mouse Click Image Button:


       /// <summary>
/// On Mouse Click Image Button
/// </summary>
/// <param name="sender">Name of Image</param>
/// <param name="e"></param>
private void DoMouseEnter(object sender, MouseEventArgs e)
{

if (sender == HomeImage)
{

_homeMouseOver = true;

_homeDir = 1;

}
}



Menu Button Event



//Menu Button events

HomeImage.MouseLeftButtonDown += new MouseButtonEventHandler(HomeImage_MouseLeftButtonDown);


On Mouse Event handler



private void HomeImage_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
MessageBox.Show("Hello world!");

}


Regard





Prateek

Reference: http://bprateek.blogspot.com/2009/08/creating-image-menu-in-silverlight-with.html


Comments

Author: Prakash25 Jun 2010 Member Level: Bronze   Points : 2

Hi, i want to create a navigation image links with mouseover and with this mouseover i want to display the subLinks for the menu i moouseover. I want to achieve this in Silverlight 4 using VS2010. I have expression blend as well, but i am little confused how to incorporate xap files in my application.

Please help.

Prakash

Author: Prakash25 Jun 2010 Member Level: Bronze   Points : 2

Hi, i want to create a navigation image links with mouseover and with this mouseover i want to display the subLinks for the menu i moouseover. I want to achieve this in Silverlight 4 using VS2010. I have expression blend as well, but i am little confused how to incorporate xap files in my application.

Please help.

Prakash



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: