title: WPF Custom/User Control for button with text and icon. Which one should I choose?
body: <p>I'd like to refactor the following code using a custom control for the button.</p>
  
  <p>Xaml file: <code>LoginWindow.xaml</code></p>
  
  <pre><code>&lt;Button Grid.Column="0" Style="{DynamicResource BlackLoginButton}" Click="btnLogin_Click" IsDefault="True"&gt;
      &lt;DockPanel&gt;
          &lt;TextBlock Text="text1" VerticalAlignment="Center"/&gt;
          &lt;Image Source="../../../Assets/Images/apply.png" Style="{StaticResource ImageButton}" /&gt;
      &lt;/DockPanel&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>Code behind: <code>LoginWindow.xaml.cs</code></p>
  
  <pre><code>private void btnLogin_Click(object sender, EventArgs e)
  {
      Login();
  }
  </code></pre>
  
  <p>I particular I'd like to have a structure like this:</p>
  
  <pre><code>&lt;local:CustomButton&gt;
      Grid.Column="0"
      IsDefault="True"
      Style="{DynamicResource BlackLoginButton}"
      Click="btnLogin_Click"
      Text="ciao" 
      Image="../../../Assets/Images/apply.png"&gt;
  &lt;/local:CustomButton&gt;
  </code></pre>
  
  <p>I try to use both Custom Control and User Control.</p>
  
  <p>Here is my <code>UserControl</code> xaml</p>
  
  <pre><code>&lt;UserControl x:Class="foo.View.CustomUserControl.IconButton"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               DataContext="{Binding RelativeSource={RelativeSource Self}}"&gt;
      &lt;Button Style="{DynamicResource BlackLoginButton}"&gt;
          &lt;DockPanel&gt;
              &lt;TextBlock VerticalAlignment="Center" Text="{Binding ElementName=Button, Path=Text}" /&gt;
              &lt;Image Source="{Binding ElementName=Button, Path=Image}" Style="{StaticResource ImageButton}" /&gt;
          &lt;/DockPanel&gt;
      &lt;/Button&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>And the code behind:</p>
  
  <pre><code>using System.Windows;
  using System.Windows.Media;
  
  namespace Mhira3D.View.CustomUserControl
  {
      public partial class IconButton
      {
          public static DependencyProperty ClickProperty = DependencyProperty.Register("Click", typeof(RoutedEventHandler),
              typeof(IconButton));
  
          public static DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(ImageSource),
              typeof(IconButton));
  
          public static DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(IconButton));
  
          public IconButton()
          {
              InitializeComponent();
          }
  
          public RoutedEventHandler Click
          {
              get { return (RoutedEventHandler) GetValue(ClickProperty); }
              set { SetValue(ClickProperty, value); }
          }
  
          public ImageSource Image
          {
              get { return (ImageSource) GetValue(ImageProperty); }
              set { SetValue(ImageProperty, value); }
          }
  
          public string Text
          {
              get { return this.GetValue(TextProperty) as string; }
              set { this.SetValue(TextProperty, value); }
          }
      }
  }
  </code></pre>
  
  <p>The main problem of this structure is that I cannot use <code>Button</code> property (I did not inherit from button), for example I cannot use <code>IsDefault</code>.</p>
  
  <p>I think it could be an alternative use a <code>CustomControl</code>, to use the button property in a better way, like this (in thi example I put only the <code>Image</code> property):</p>
  
  <pre><code>public class IconButtonCustom : Button
  {
      static IconButtonCustom()
      {
          DefaultStyleKeyProperty.OverrideMetadata(typeof(IconButtonCustom), new FrameworkPropertyMetadata(typeof(IconButtonCustom)));
      }
      public ImageSource Image
      {
          get { return GetValue(SourceProperty) as ImageSource; }
          set { SetValue(SourceProperty, value); }
      }
      public static readonly DependencyProperty SourceProperty =
        DependencyProperty.Register("Image", typeof(ImageSource), typeof(IconButtonCustom));
  }
  </code></pre>
  
  <p>And the style in <code>Generic.xaml</code></p>
  
  <pre><code>&lt;Style TargetType="{x:Type customUserControl:IconButtonCustom}" BasedOn="{StaticResource BlackLoginButton}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type customUserControl:IconButtonCustom}"&gt;
                  &lt;Border Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"&gt;
                      &lt;DockPanel&gt;
                          &lt;TextBlock VerticalAlignment="Center" Text="{Binding ElementName=Button, Path=Text}" /&gt;
                          &lt;Image Source="{Binding ElementName=Button, Path=Image}" Style="{StaticResource ImageButton}" /&gt;
                      &lt;/DockPanel&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Now I have some questions:</p>
  
  <ol>
  <li>Which of these methods is the more suitable to create my custom button?</li>
  <li>Using both methods, I have problem mapping the click function, in fact I got the <code>System.Windows.Markup.XamlParseException</code> because WPF cannot convert the string <code>btnLogin_Click</code> in the function <code>Click</code>.</li>
  <li>I've never used <code>Generic.xaml</code>, is my example correct or should be improved in some way?</li>
  </ol>