WPF button with imagebrush issues

Question

Basically I would like to have image button.

<Button Command="{Binding Path=DisplayProductCommand}" >
   <Button.Background>
       <ImageBrush ImageSource="test.jpg"/>
   </Button.Background>
</Button>

By using the way above, I am facing an issue where the image doesn't cover whole button.

As shown above, this is the result and there is transparent spaces around. Please find below the original image:

What can I do to cover the whole button?

Answer 1

You need re-write controltemplate of button, replace default layout by removing ButtonChrome or you can set BorderThickness property of button to zero.

<Button Command="{Binding Path=DisplayProductCommand}" BorderThickness="0">
   <Button.Background>
       <ImageBrush ImageSource="test.jpg"/>
   </Button.Background>
</Button>

Answer 2

As @geedub mentioned, you can just define a colour gradient to match that image:

<Button Content="Look at my background" Padding="10,5">
    <Button.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#FFE5E5E5" />
            <GradientStop Offset="1" Color="#FFBABED3" />
        </LinearGradientBrush>
    </Button.Background>
</Button>

If this is not acceptable for your requirements then I would advise that you crop your image to remove the shadow effect that chao wang mentioned.