There is a Canvas in our application where an image is loaded. We need to provide buttons such as “Add Placemark” on top right corner of the image such that the button highlights on focus.
There are PNG files for these controls. How can I make these PNG behave as buttons (change visual state on hover, onclick etc). I tried to add <Image> in <Button>, but it shows the opaque button on top of the Canvas.
<Button Height="23" HorizontalAlignment="Right" Name="btnAddPlacemark" Margin="3" VerticalAlignment="Top" Width="23" Click="btnAddPlacemark_Click">
<Image Source="/Map_SL;component/Images/PlaceMark.png" Stretch="Fill" />
</Button>
Sounds like you are going to recreate all the logic of a button, simply to remove the border/background. Remember every control in Silverlight is simply skinned and therefore infinitely configurable.
You do want to use a normal button with an image, then restyle the button to remove the parts you don’t want. I realise this seems daunting at first, but there are simplified basic skins available to simplify that task, or you can use Expression Blend (if you have access to it or can afford it).
Try this link from the master himself:
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx