WPF Custom/User Control for button with text and icon. Which one should I choose?
<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>