none
Button with background image, text and mouse over

    Question

  • Hello,

     I have made a few hours of research on the web to solve a particular design problem but unfortunately only found parts of the solution I want to achieve and combining those solutions in one control does not seem possible to me.

     Requested features:

    1. A Silverlight button with a background image (local resource?)
    2. Button's text can vary and must be visible over the background image
    3. When the mouse moves over the button, the background image must change and the text color as well
    4. The button will be in a Silverlight user control and I would like the button text and background images to be exposed as properties

    I have already made some trials with visual states and/or button template inside the button's XAML but I could never have my button's text displayed. I've also found solutions with a stack panel inside the button's content but then I had of course the backgroup next to the text instead of being over each other. I couldn't make it work with a canvas either.

     So, please Silverlight Gurus! PIMP my button Big Smile

     Thanks a lot,

    Spirou

    Wednesday, February 25, 2009 5:52 AM

Answers

  • Did you have a look at this article by Scott Guthrie? http://weblogs.asp.net/scottgu/archive/2008/06/06/silverlight-2-beta2-released.aspx

    Thank you MarkMonster! It partially did the trick.

    For the others it could help, here is how I did to design my button:

    - read ScottGu's article! 

    - edit visual states template for my button

    - while in template mode, make so you have two images on top of each other inside the template: one with the normal background picture and one with the hover picture. Make sure the two image controls are of the same size and at the same position --> the best for this is to remove any size, margin or position for both images

    - add also a textblock inside the template without any size, margin or position neither and with text vertical and horizontal alignements set to be centered

    - follow ScottGu's instructions to change controls properties for each state (Blend must be recording the state changes and will discover them automatically). In button's normal state, the background image for normal state must be "Visible" and the hover background image must be "Collapsed". Invert also the visibility states of the background images for the button's mouse over state

    - you can also have Blend recording state changes for the Textblock, therefore allowing you to change the font color when the mouse moves over the button

     That's all!

     Please contact me if you want the full XAML code

    Wednesday, February 25, 2009 8:14 AM

All replies

  • Did you have a look at this article by Scott Guthrie? http://weblogs.asp.net/scottgu/archive/2008/06/06/silverlight-2-beta2-released.aspx
    Wednesday, February 25, 2009 6:25 AM
  • Did you have a look at this article by Scott Guthrie? http://weblogs.asp.net/scottgu/archive/2008/06/06/silverlight-2-beta2-released.aspx

    Thank you MarkMonster! It partially did the trick.

    For the others it could help, here is how I did to design my button:

    - read ScottGu's article! 

    - edit visual states template for my button

    - while in template mode, make so you have two images on top of each other inside the template: one with the normal background picture and one with the hover picture. Make sure the two image controls are of the same size and at the same position --> the best for this is to remove any size, margin or position for both images

    - add also a textblock inside the template without any size, margin or position neither and with text vertical and horizontal alignements set to be centered

    - follow ScottGu's instructions to change controls properties for each state (Blend must be recording the state changes and will discover them automatically). In button's normal state, the background image for normal state must be "Visible" and the hover background image must be "Collapsed". Invert also the visibility states of the background images for the button's mouse over state

    - you can also have Blend recording state changes for the Textblock, therefore allowing you to change the font color when the mouse moves over the button

     That's all!

     Please contact me if you want the full XAML code

    Wednesday, February 25, 2009 8:14 AM
  • When creating a button template (new blank) how do we go about implementing a template colorscheme for button text? I've created a button, created a new blank template, added a Rectangle to the default Grid object added (in Objects and Timelines), and then my intial thinking was add a TextBlock. However, this provides a means for applying a static template (text and background etc).

    I'd like to apply a base button background, and then define button text font/color/alignment, but leave button text up to each individual implementation of the the button applying the template.

    My apologies, it pays to carefully read first - I've added the Textblock without dimensions and only Horizontal/VerticalAlignment set to center. I assume Blend automatically detects a blank textblock and implements it as the button instance's textblock. Can you confirm this is the expected behavior? 

    Wednesday, March 11, 2009 1:14 PM