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

Translate This Page

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

  • Comments 4

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.

imageFirst 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>
  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.         {
  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.

Leave a Comment
  • Please add 5 and 7 and type the answer here:
  • Post
  • 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.

  • 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.


  • Thank you very much.

  • 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

Page 1 of 1 (4 items)
Generic Content

Legal Note:

  1. The author, Sam Stokes, is an employee of Microsoft
  2. There is no guarantee that anything I write is correct, I do try to make sure that what I write is correct.
  3. Use anything written in this blog at your own risk
  4. Test what I write about before using the information
  • Sometimes posts will disappear because I realized that they really don't fit with the total chaos of what I write about
  • Links are tested and available on date of publication, what others do with their links are out of my control


  • Whatever I write on this blog is unedited by management or anyone, which should be obvious from the randomness of the blog.  I simply write about things I like.
  • Microsoft does not restrict me in anyway, so I generallyblather about whatever I want to.
  • For personal reasons I will not write about:
    • Company confidential stuff, mainly because Microsoft is more transparent than any company I have ever worked for.
    • Other people unless they give me permission to write about them