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
For more details, visit http://bprateek.blogspot.com/2009/08/creating-image-menu-in-silverlight-with.html
|
No responses found. Be the first to respond and make money from revenue sharing program.
|