Optimizing a very simple wpf app - attempt on handling 2 buttons with a common event

I am quite new to event programming in C# specially in WPF. I have made a very simple core app which I am planning on extending.

It's very simple as its purpose is learning curve and doing things the right way that's why I am asking here for a review and not help on building as most of the building is easily researchable.

This is what it looks like

This is my XAML code

and Code behind (removed a few spare lines)

```
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Username.Content = Environment.UserName;
TodaysDate.Content = DateTime.Now.ToShortDateString();
}

private void Canvas_MouseEnter(object sender, MouseEventArgs e)
{
((Canvas)sender).Background = new SolidColorBrush(Colors.Orange);
//Report.Background = new SolidColorBrush(Colors.Orange);
}

private void Report_MouseLeave(object sender, MouseEventArgs e)
{
((Canvas)sender).Background = (SolidColorBrush)(new BrushConverter().ConvertFrom("#FF102E37"));
}

private void ReportCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (((Canvas)sender).Name == "ReportCanvas")
{

((Canvas)sender).Margin = new Thickness(((Canvas)sender).Margin.Left + 2,
((Canvas)sender).Margin.Top + 1,
((Canvas)sender).Margin.Right,
((Canvas)sender).Margin.Bottom);
}
Else
{
((Canvas)sender).Margin = new Thickness(((Canvas)sender).Margin.Left,
((Canvas)sender).Margin.Top + 1,
((Canvas)sender).Margin.Right - 2,
((Canvas)sender).Margin.Bottom);
}
}

private void ReportCanvas

While you are only asking about event i feel like the general review will help you as well. So here it goes.

• You have a lot of junk in your xaml. Don't name an element if you dont use that name, don't set properties if they are no different from the default values.

• You should use Styles for repeated properties (such as button width/height) instead of copy-pasting them. That way when you will decide to change the width of your buttons - you will only have to do it in one place.

-
Avoid using Canvas for real-life UI design. It makes your UI unscalable. Use Grid, DockPanel, etc. instead.

-
When you need to reuse cast - only cast once.

var canvas = (Canvas)sender;
if (canvas.Name == "ReportCanvas")
{
    canvas.Margin = new Thickness(canvas.Margin.Left - 2,

-
As for your actual question: If you place your "buttons" in two-column Grid and use HorizontalAlignment=Left for both of them - your problem should be solved, as you will be able to use the same transformations for both canvases.

But the thing is - your approach is wrong. To achieve such behavior the simpliest solution whould be to use an actual Button. It has IsPressed property which can be hoooked to Trigger, which would change margin depending on if the button is pressed. This will clean up your code-behind. If that sounds too complicated for you at this point - check an example (it changes background, not margin, but the idea whould be the same) http://social.msdn.microsoft.com/Forums/vstudio/en-US/b84afe49-1db0-4472-87f9-7bd8dda8e634/how-to-change-the-background-image-of-a-button-on-click-in-xaml-using-styles-or-triggers?forum=wpf

StackExchange Code Review Q#39286, answer score: 3