Make an Image Button using XAML, it’s easy and FUN!

You can easily make an Image Button with a few lines of XAML.  What a blast right?  When your parents get home, you can show them this and they might think you actually did something other than play Halo 3 or Kinect all day.  Or if you are working, well get back to work.

First open Visual Studio, you can use Visual Studio C# Express, choose the WPF Project.  Add an image, I used an image from my favorite TV show Stargate.

(NOTE CHANGE TO ATTACHED FILE: I added code to it, it was an empty file, so it should work for the image, but you will still need to add the codebehind code.) 

Code Snippet

1.     <Grid>
2.         <Button Height="100" Width="100">
3.             <Button.Template>
4.                 <ControlTemplate>
5.                     <Image Source="alienthor.png"/>
6.                 </ControlTemplate>
7.             </Button.Template>
8.         </Button>
9.  
10.     </Grid>
11. </Window>

You can replace “alienthor.png” with the image that you put in the code.

Run it and now have a button that you can use to add code to do something when you click the button. 

Pretty simple.  Now I should show you want to add to the button.  Ok, double-click the image button, you will get a click event added to the Button and the code behind picks up a click event method:

Code Snippet

1. private void Button_Click(object sender, RoutedEventArgs e)
2.         {
3.            
4.         }

Add the following: MessageBox.Show(“Hello my name is Thor”);  //that is a semi-colon after the close parathesis

Code Snippet

1. private void Button_Click(object sender, RoutedEventArgs e)
2.         {
3.             MessageBox.Show("Hello my name is Thor");
4.         }

There is code attached, but it doesn’t include the code behind.

ButtonImage.zip

• Anonymous
  June 27, 2011
  You posted an empty solution.  When I use the template way, I lose the hover, click effects. So I use nest the image without doing the template.

• Anonymous
  June 28, 2011
  Fixed Donald.  Let me know if you want to have one of your projects posted here on this wonderful and well read blog!  As you know I have ones of users. :)

• Anonymous
  July 28, 2013
  Thank you very much.

• Anonymous
  September 20, 2014
  Hello I am designing a Application for my institute's exam. I am developing a Tic-Tac-toe in windows 8 application i have already designed the basic structure for the application. But the game is supposed to have 9 grids and when whenever we click on any of the button among the 9 buttons the image of 'X' or '0' should get print how am i supposed to accomplish this task can any-one help me with this. As i am amateur with windows 8 app code