Click here to Skip to main content
15,880,503 members
Articles / Web Development / ASP.NET
Tip/Trick

One Step to Create an Image Button for Silverlight Applications

Rate me:
Please Sign up or sign in to vote.
4.82/5 (8 votes)
20 Apr 2010CPOL 46.9K   2   4
I had to create a trivial image button for my Silverlight web site. I Googled the web and got tons of tips and suggestions. However, most of them involve several editing steps through resources, template or style. Some require additional tools, such as Expression Blend. In my...
I had to create a trivial image button for my Silverlight web site. I Googled the web and got tons of tips and suggestions. However, most of them involve several editing steps through resources, template or style. Some require additional tools, such as Expression Blend.

In my implementation, I was able to create an image button by adding one line to the XAML code. What I post here isn't really a trick, but a tip about a simple way of doing simple things.

Here is the starting-point XAML code for my minimal Silverlight page that contains a button in the centre:

XML
<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
    <Button x:Name="MyButton" Height="32" Width="32">
    </Button>
  </Grid>
</UserControl>


If you add one line of code as follows, you will overlay "someimage.png" on the button immediately:

XML
<Button x:Name="MyButton" Height="32" Width="32">
      <Image Source="someimage.png" Height="32" Width="32"></Image>
</Button>


In fact, the code above is equivalent to:

XML
<Button x:Name="MyButton" Height="32" Width="32">
      <Button.Content>
            <Image Source="someimage.png" Height="32" Width="32"></Image>
      </Button.Content>
</Button>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect GuestLogix Inc.
Canada Canada
Jun is an experienced software architect. He wrote his first computer code on the tape machine for a "super computer". The tape machine reads holes on the black pape tape as source code. When manually fixing code, you need a punch and tranparent tape. To delete code, you block holes or cut off a segment and glue two ends together. To change code, you block old holes and punch new holes. You already know how to add new code, don't you? Anyway, that was his programming story in early 1980's.

Jun completed university with the specialty in oceanography, and graduate study in meteorology. He obtained his Ph.D. in physics. Jun has worked in a number of different areas. Since mid-90's, he has been working as a software professional in both military & commercial industries, including Visual Defence, Atlantis Systems International and Array Systems Computing.

Currently, Jun is an architect at GuestLogix, the global leader in providing onboard retail solutions for airlines and other travel industries. He is also the founder of Intribute Dynamics, a consulting firm specialized in software development. He has a personal blog site, although he is hardly able to keep it up to date.

In his spare time, Jun loves classic music, table tennis, and NBA games. During the summer, he enjoyes camping out to the north and fishing on wild lakes.

Comments and Discussions

 
GeneralPretty simple but i dont know how can we get the button effe... Pin
Al Shameer B21-Aug-11 23:11
Al Shameer B21-Aug-11 23:11 
GeneralIt doesnt work. Its showing at design time but at runtime th... Pin
s.faizaan78-Aug-11 20:33
s.faizaan78-Aug-11 20:33 
GeneralReason for my vote of 5 Thanks for sharing the Code. Silverl... Pin
Kunal Chowdhury «IN»17-Jul-10 23:17
professionalKunal Chowdhury «IN»17-Jul-10 23:17 
GeneralReason for my vote of 5 good Pin
masonbaiyf3-Jul-10 19:57
masonbaiyf3-Jul-10 19:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.