WPF Image Button formatting

Question

If I create a button with an image inside, it gets blown up to much larger size than the image.

If i try to constrain the size of image, and container button, the image gets cut off:

<Button Background="Transparent" Width="18" Height="18" Margin="0,0,0,0" Padding="0,0,0,0" BorderBrush="{x:Null}">
    <Image Width="16" Height="16" />
</Button>

Native image size is 16x16. Here the button is 18x18 with 0 padding, yet the image still gets cut-off on right/bottom.

how can i make the entire button be exactly the size of the image w/out any cut off?

Answer 1

The beauty (and curse?) of WPF is the ability to re-template controls.

You can set the template of the button something like the following (this is free hand, so you will need to tweak it a bit for your tastes):

        <Button x:Name="btn16x16">
            <Button.Template>
                <ControlTemplate>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                        <Image Source="pack://siteoforigin:,,,/Resources/SixteenBySixteen.png" 
                               Width="16" 
                               Height="16"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

Answer 2

Think this might give people the answer they are looking for, buttons with image and no borders at all.