How to use Image in Button: WPF

Most often a button control is used with the content property and sometimes with an image in our programming fields. We have learnt about the content property of the button, now in this article we will place an image in a button control.

To place an image we have to sure first, that the image is in our project’s directory. Now write the following code in XAML just below the grid node (default placed node in a file).

<Grid>
<Button Width="200" Height="50">
<Button.Background>
<ImageBrush ImageSource="buttonImage.png"></ImageBrush>
</Button.Background>
</Button>
</Grid>

In the above code I have set the image named buttonImage.png as the background of the button. It will place a button with an image as in the following image.

As we can see the image has been stretched in the button. To place the image as is, the following code will help you:

<Button Width="200" Height="50">
<Button.ContentTemplate>
<DataTemplate>
<Image Source="buttonImage.png"></Image>
</DataTemplate>              
</Button.ContentTemplate>          
</Button>

Run the project now and the image is placed as it is, the remaining space will be left blank.