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