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

Question

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

enter image description here

This is my XAML code

<Window x:Class="LearningApp.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Shop Floor Data Collection" Height="130" Width="320" Loaded="Window_Loaded" >
 <Grid Background="#FF2BBBD8" VerticalAlignment="Top">
 <Grid.RowDefinitions>
 <RowDefinition Height="25"/>
 <RowDefinition Height="75"/>
 </Grid.RowDefinitions>
 <Canvas Background="#FF102E37" Height="25" HorizontalAlignment="Stretch" Grid.Row="0" VerticalAlignment="Top">
 <Label x:Name="Welcome" Content="User:" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White"/>
 <Label x:Name="Username" Content="" Canvas.Left="32" Width="120" Foreground="White"/>
 <Label x:Name="TodaysDate" Content="" Canvas.Right="10" Width="70" Foreground="White"/>
 </Canvas>
 <Canvas x:Name="ReportCanvas" HorizontalAlignment="Left" Height="46" Margin="10,15,0,0" Grid.Row="1" VerticalAlignment="Top" Width="132" Background="#FF102E37" MouseEnter="Canvas_MouseEnter" MouseLeave="Report_MouseLeave" MouseLeftButtonDown="ReportCanvas_MouseLeftButtonDown" MouseLeftButtonUp="ReportCanvas_MouseLeftButtonUp">
 <Label x:Name="ReportLabel" Content="Report Production" Foreground="White" Canvas.Left="12" Canvas.Top="10" />
 </Canvas>
 <Canvas x:Name="AnalyseCanvas" HorizontalAlignment="Right" Height="46" Margin="0,15,10,0" Grid.Row="1" VerticalAlignment="Top" Width="132" Background="#FF102E37" MouseEnter="Canvas_MouseEnter" MouseLeave="Report_MouseLeave" MouseLeftButtonDown="ReportCanvas_MouseLeftButtonDown" MouseLeftButtonUp="ReportCanvas_MouseLeftButtonUp">
 <Label x:Name="AnalyseLabel" Content="Analyse" Foreground="White" Canvas.Left="41" Canvas.Top="10" />
 </Canvas>
 </Grid>

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_MouseLeftButtonUp(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);
 }
}

Im on windows 7 and was just trying to kind of simulate windows 8 buttons style. I've heard there is the metro look library etc but I am not interested in it. Again, this is part of learning how to create UI.

On the MouseLeftButtonDown and up I am trying to use the same events but slightly modified to achieve the same transformation look for both buttons. When canvas is Clicked a I just want it to move 1px down and 2px right/left depending on the alignment.

I have achieved it and I have got a working code but I have got a feeling there might be a better way of doing the exact same thing. It does not look pretty as it stands and me, coming from VBA background I simply do not like the way I am doing it. Not too advanced in C# yet so I'd like some pointers with some explanation (would be great!)

Please skip naming of the events as they were autogenerated and I haven't changed that for an easier recognition of what belongs where.

So, is there a better way of handling those 2 events? (MouseLeftButtonDown/Up)

• Default Writer: Do you know somethig about behaviors and attachable properties? Anythig about MVP, MVC, or MVVM design patterns?
• user28366: @ArturMustafin I am a bit familiar with MVC but i'd say I am a complete beginner I get the idea of MVC but I haven't implemented it yet. I am not familiar yet with behaviours or attachable properties. Eh it does sound like I'm a complete noob in this content but forgive me I am just starting.

Answer 1

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

1. 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.
2. 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.

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

4. 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,
   

5. 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

• user28366: Thanks Nik for your tips, I appreciate it. I do realize that there are many ways of building UIs. I have used what I have learned up til now but your tips seem logical and I will be researching what you have mentioned. I am just now reading about Styles and I will try to implement that into my core sample. Thanks a lot for your answer.