How to insert an image to button in the silverlight 5?

Sliverlight5 is latest version which helps developer to make GUI more attractive. You can improve look and feel of your application by using sliverlight5. I hope this article is helpful for all sliverlight beginners.

How to insert an image to button in the silverlight 5?
Description: If you are using sliverlight 5 then you have to write code in App.xaml to set image source.
You need to place following code under tag "Application.Resources".

<Style x:Key="SaveButtonStyle" TargetType="Button" >
< Setter Property="Width" Value="150" / >
< Setter Property="Margin" Value="0,0,0,10" / >
< Setter Property="ContentTemplate" >
< Setter.Value >
< DataTemplate >
< StackPanel Orientation="Horizontal" >
< Image Source="/YourAssemblyname;component/Images/btnSaveLogo.png" Width="25" Height="25" / >
< ContentPresenter Content="{Binding}" Margin="10,0,0,0" / >

< /StackPanel >
< /DataTemplate >
< /Setter.Value >
< /Setter >
< /Style >

You have to set this SaveButtonStyle to button control on which you are going to apply the image.
After this, run the application and check in the browser whether applied image is getting displayed on the button.
You can apply style as many number as you want. In above example , stackpanel orientation is horizontal, it can be vertical also as per your requirement.
Also setter properties are used for setting width , margin , content template etc.


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: