In my button we will change the color of the canvas in on mouse hover, and allows you to implement the click logic at the TODO.
You can use this code for your own buttons.
The important points are:
MouseEnter - When we hover over the button
MouseLeave - When we stop hovering over the button
MouseLeftButtonDown - When you hold the mouse left button down
MouseLeftButtonUp - When you release the mouse left button.
A click is only considered a click, when you are hovered over the button, and the MouseLeftButtonUp.
On MouseLeftButtonDown you need to capture the mouse input, and release the mouse capture when finished (so mouse input can be capture by other objects at another time, you can only capture mouse input if no other object has captured mouse input).
Finally we do a final cleanup (if necessary) on the canvas to ensure we have released the mouse capture.
One final thing to note, within the XAML for the canvas we use the Cursor attribute to define the mouse cursor to use.
Go Enjoy, and make Buttons (whilst you can), before Microsoft makes it even easier for us :)
Here is the XAML for my Button:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="550"
Height="40"
Background="DarkBlue"
MouseEnter="MenuItem_MouseEnter"
MouseLeave="MenuItem_MouseLeave"
MouseLeftButtonDown="MenuItem_MouseLeftButtonDown"
MouseLeftButtonUp="MenuItem_MouseLeftButtonUp"
Cursor="Hand"
>
<TextBlock x:Name="tbMenuText" Foreground="White" FontWeight="ExtraBold" FontSize="28"></TextBlock>
</Canvas>
Here is the C# for my Button:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MySilverlightProject.SkyEPG
{
public class MenuItem : Control
{
public MenuItem()
{
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("MySilverlightProject.SkyEPG.MenuItem.xaml");
implementationRoot = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
tbMenuText = implementationRoot.FindName("tbMenuText") as TextBlock;
// Set the root leave
implementationRoot.MouseLeave += MenuItem_OnRootLeave;
}
#region properties
// private members
FrameworkElement implementationRoot;
private TextBlock tbMenuText;
/// <summary>
/// Text
/// </summary>
public string Text
{
get
{
return tbMenuText.Text;
}
set
{
tbMenuText.Text = value;
}
}
#endregion
#region Mouse Handling
// By Default mouse over is false and mouse down is false
bool mouseOver = false;
bool mouseDown = false;
/// <summary>
/// On enter set the color to yellow
/// </summary>
/// <param name="o"></param>
/// <param name="e"></param>
protected void MenuItem_MouseEnter(object o, EventArgs e)
{
// Get the menu item
Canvas menuItem = (Canvas)o;
// We have a mouse over
mouseOver = true;
// Set the background color to gold, text color to dark blue
menuItem.Background = new SolidColorBrush(Color.FromArgb(255, 255, 215, 0));
tbMenuText.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 139));
}
/// <summary>
/// On leave, set the color back to Dark Blue
/// </summary>
/// <param name="o"></param>
/// <param name="e"></param>
protected void MenuItem_MouseLeave(object o, EventArgs e)
{
// Get the menu item
Canvas menuItem = (Canvas)o;
// Set the background color to Dark Blue, text color to white
menuItem.Background = new SolidColorBrush(Color.FromArgb(255, 0, 0, 139));
tbMenuText.Foreground = new SolidColorBrush(Colors.White);
// No Mouse Over
mouseOver = false;
}
/// <summary>
/// Mouse Left Button Down
/// </summary>
/// <param name="o"></param>
/// <param name="e"></param>
protected void MenuItem_MouseLeftButtonDown(object o, MouseEventArgs args)
{
// Mouse Down
mouseDown = true;
// Get the menu item
Canvas menuItem = (Canvas)o;
// Capture the Mouse
menuItem.CaptureMouse();
}
/// <summary>
/// Mouse Left Button Up
/// </summary>
/// <param name="o"></param>
/// <param name="e"></param>
protected void MenuItem_MouseLeftButtonUp(object o, MouseEventArgs args)
{
// Get the menu item
Canvas menuItem = (Canvas)o;
// Release the mouse capture
menuItem.ReleaseMouseCapture();
// Check if we have a click (mouse over, and mouse down)
if (mouseOver)
{
// TODO: Implement Click Logic Here
}
// No Mouse Down
mouseDown = false;
}
/// <summary>
/// When the mouse leaves the root visual we lose the capture - reset the state
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
protected virtual void MenuItem_OnRootLeave(object sender, EventArgs args)
{
// Clean Up
if (mouseOver || mouseDown)
{
// Release Mouse Capture
ReleaseMouseCapture();
mouseDown = false;
mouseOver = false;
}
}
#endregion
}
}
