title: Create a custom click event handler for a WPF usercontrol which contains a button?
body: <p>have you ever found a problem when assigning a click event handler for your custom WPF usercontrol with a nested button control? I do.</p>
  
  <p>When you put such user control in a main window, let's say Main.xaml, the MouseLeftButtonDown doesn't work, but the PreviewMouseLeftButtonDown works like a charm.</p>
  
  <p>But imagine yourself telling each developer in your team to use this event when using your usercontrol... Some usercontrols in you library has MouseLeftButtonDown, others PreviewMouseLeftButtonDown.... It's a mess don't you agree?</p>
  
  <p>So I've got a solution but I want someone to see if there's some elegant way to create your custom event handler called "Click".</p>
  
  <p>In my usercontrol called CustomButton.xaml.cs, I have so far:</p>
  
  <pre><code>public partial class CustomButton: UserControl
  {
  
      public CustomButton()
          : base()
      {
          this.InitializeComponent();
  
      }
  
      public delegate void ClickHandler(object sender, EventArgs e);
      public event EventHandler Click;
  
      public void Button_Click(object sender, RoutedEventArgs e) {//execute daddy's button click
              (((sender as Button).Parent as Grid).Parent as CustomButton).Click(sender, e);
  
              e.Handled = false;
  
      }
  </code></pre>
  
  <p>In my CustomButton.xaml</p>
  
  <pre><code>&lt;UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  x:Class="YourCompany.UI.Controls.CustomButton" d:DesignHeight="72.5" d:DesignWidth="200"&gt;
  &lt;UserControl.Resources&gt;
  blablabla
  &lt;/UserControl.Resources&gt;
  
  &lt;Grid x:Name="LayoutRoot"&gt;
      &lt;Button Style="{DynamicResource CustomButton}" 
              Width="{Binding ElementName=CustomButton, Path=ActualWidth}" 
              Cursor="Hand" Foreground="#ffffff" FontSize="28" Margin="8,8,0,12" 
              HorizontalAlignment="Left" 
              Content="Custom Button" Click="Button_Click" /&gt;
  
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now in my Main.xaml, the caller, I have:</p>
  
  <pre><code>&lt;Window x:Class="YourCompany.MyProject.Main"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MyProject!" Height="600" Width="800" 
  MinWidth="800" MinHeight="600" WindowState="Maximized" WindowStartupLocation="CenterScreen"
  xmlns:bigbola="clr-namespace:YourCompany.UI.Controls;assembly=YourCompany.UI.Controls"&gt;
  
  &lt;mycontrols:CustomButton Name="test" MyImage=".\Images\btnOptions.png" Cursor="Hand" 
              Texto="See options" Click="test_Click"
              Margin="168.367,176.702,253.609,0" ToolTip="See all options" Height="76.682" 
              VerticalAlignment="Top"&gt;&lt;/mycontrols:CustomButton&gt;
  </code></pre>
  
  <p>Explanation:</p>
  
  <p>in the usercontrol, when you click the nested button, it executes its parent custom "Click" handler.</p>
  
  <p>Is there a elegant way to accomplish the same effect?</p>