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.

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.

Comments (4)

  1. Donald says:

    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.

  2. Surf4Fun says:

    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.


  3. Juliana says:

    Thank you very much.

  4. Sam Wage says:

    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