WPF customized image button

Question

I created an image button in WPF with a png file. However, there is always a border outside the button image. Is there a way to get rid of it? I tried to set image'stretch ='fill', borderthickness of the button to 0 but none have worked so far.

Thanks for all the replies. Here is my code. I tried to set things up with a style. What is the difference between my code and your codes down? I am a little bit confused with the contentTemplate and the control template you guys mentioned.

<Style x:Key="TopPositionButtonStyle" TargetType="Button">        

    <Setter Property="Width" Value="50" />
    <Setter Property="Height" Value ="30" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="BorderBrush" Value="SteelBlue" />
    <Setter Property="BorderThickness" Value="0" />

    <Setter Property="ContentTemplate">
        <Setter.Value>

            <DataTemplate>
                <Grid Background="SteelBlue">
                    <Image Source="images/button_up.png"
                           HorizontalAlignment="Center" 
                           Margin="0,0,0,0" Height="30" Width="50" 
                           Stretch="Fill"/>

                    <TextBlock Text="POSITION" 
                               HorizontalAlignment="Center" 
                               Foreground="White" 
                               Margin="5,5,0,0"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>

    </Setter>
</Style>

Answer 1

The spacing is most likely from the default Padding value. The first thing to try should be:

Padding="0"

If that doesn't give you what you want the next step is customizing the template to remove all spacing to something like:

<Button Content="{StaticResource HowEverYourImageIsSet}">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Background="{TemplateBinding Background}" 
                    BorderThickness="0" Padding="0">
                <ContentPresenter/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Answer 2

You need to override the Button.Template to change such details, there is a simple example for a custom button template in the ControlTemplate docmentation.

Answer 3

not sure whether you set it as the background or just an image as the content. You could always rewrite the template as H.B. mentioned.

You could also use the ToolBar.ButtonStyleKey as it does not have a border.

Either:

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Image Source="my.png"/>
</Button>

Or something like:

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
            <!-- Set your properties here -->
        </Style>
     </Button.Style>
</Button>