WPF: Image Button using Control Template

WPF: Image Button using Control Template

In WPF, for better UI representation we mostly use images in our application.

So most common place where we use images is in place of buttons.

Mostly we represent action buttons such as add,delete etc with some image which represents add or delete functionality.

Here we have taken an example of Add button and we have used Control Template for modifying the button to show as image instead of normal button.

<Button Height="Auto" Width="Auto" Background="Transparent" x:Name="btnAdd" Click="btnAdd_Click" Cursor="Hand" ToolTip="Add Item">

<Button.Template>

<ControlTemplate>

              <Grid> 

<Image Source="Resources/Add.png" Height="16" Width="16"/><ContentPresenter/>

</Grid>

</ControlTemplate>

</Button.Template>

</Button>

This is how the button will look like.

Note: You must add an item "Add.png" in your application under Resources folder.