Custom Button WPF don't bind property

Question

I did a custom button in WPF and I added some properties to use to in style. But some stuff doesn't work correctly

Control.

public class CustomButton : Button
{
    public static readonly DependencyProperty TextProperty;
    public static readonly DependencyProperty ImageProperty;
    public static readonly DependencyProperty ImageRollvoerProperty;
    public static readonly DependencyProperty TextMarginProperty;

    static CustomButton()
    {
        TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(CustomButton), new UIPropertyMetadata(null));
        ImageProperty = DependencyProperty.Register("Image", typeof(ImageSource), typeof(CustomButton), new UIPropertyMetadata(null));
        ImageProperty = DependencyProperty.Register("ImageRollvoer", typeof(ImageSource), typeof(CustomButton), new UIPropertyMetadata(null));
        TextMarginProperty = DependencyProperty.Register("TextMargin", typeof(string), typeof(CustomButton), new UIPropertyMetadata(null));
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public ImageSource Image
    {
        get { return (ImageSource)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public ImageSource ImageImageRollvoer
    {
        get { return (ImageSource)GetValue(ImageRollvoerProperty); }
        set { SetValue(ImageRollvoerProperty, value); }
    }

    public string TextMargin
    {
        get { return (string)GetValue(TextMarginProperty); }
        set { SetValue(TextMarginProperty, value); }
    }
}

Style

<Setter.Value>
    <ControlTemplate TargetType="{x:Type local:XposButton}">
        <Grid ClipToBounds="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="{TemplateBinding Height}" />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{TemplateBinding Width}" />
            </Grid.ColumnDefinitions>
            <local:ClippingBorder Grid.Row="0" Grid.Column="0" BorderThickness="0" CornerRadius="10" Background="{StaticResource OxxoMetroBackground}" BorderBrush="{StaticResource OxxoMetroBorder}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                <local:ClippingBorder  Background="{StaticResource OxxoMetroBackground}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="2" CornerRadius="9">
                    <local:ClippingBorder x:Name="Overlay" ClipToBounds="True" Background="Transparent"  BorderBrush="{StaticResource OxxoMetroBorder}" BorderThickness="0">
                        <Image  Name="btnImage" Source="{TemplateBinding Image}" Style="{StaticResource ImageUninhabitable}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                    </local:ClippingBorder>
                </local:ClippingBorder>
            </local:ClippingBorder>
            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" Margin="{TemplateBinding TextMargin}" Text="{TemplateBinding Text}" Style="{DynamicResource TextBlockMenuImg}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"/>
        </Grid>
    </ControlTemplate>
</Setter.Value>

View

<ctrl:CustomButton FontFamily="Roboto" Margin="17" TextMargin="0,20,0,0" Width="150" Image="{Binding Path=ImageUrl}" Text="{Binding ShowName}" x:Name="btnMenu" Style="{StaticResource CustomButtonStyle}" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}, Path= DataContext.SelectMenuCommand}" CommandParameter="{Binding}" />

The Image, and text are correctly displayed, the FontFamily, and TextMargin doesn't work correctly.

Answer 1

The binding on Margin probably isn't working because the property should be defined as a Thickness type rather than String.

public Thickness TextMargin