Using Blend to set the colour of the text in a button

Silverlight & Blend try and encourage you to separate styles and structure in much the same way as you should with HTML and CSS. However, Blend can be confusing as it will offer up some properties to be changed but “hide” others. One example of this is the seemingly simple task of changing the colour of the text in a button. You’d be forgiven for thinking you can select the button and directly edit the foreground colour since the background is available. You must ignore this temptation, if you don’t attempt to make style changes directly to the structure (control) then you’ll avoid a lot of confusion. I’ve created a little tutorial to show one way of solving this;

  1. Create a new project in Blend and accept the defaults.
    image
  2. Add a button
    image
  3. Select the button, hint using the control tree is often more reliable, right-click and choose Edit Templatate->Edit a Copy. To promote separation I recommend saving the style to the Application. You should give the style a good name, but I’ll be naughty and leave it at ButtonStyle1
    image
  4. You’ll now find yourself in the Template for the button. Ignore this and return the MainPage.xaml (there is a quicker way but lets keep things simple). Now you want to change the colour of the button, so you need to edit the buttons style. Select the Resources tab and click the button to edit ButtonStyle1
    image
  5. Now switch back to the Properties tab and you can change the Foreground (remember to drag the little colour select from the bottom left of the selector).
    image
  6. All done.

So the “take home” from this is don’t make style changes directly to your controls always look at changing the separate style xaml, not only will you have better separation but you’ll avoid a lot of frustration when trying to find the property you want to change.

Advertisements
This entry was posted in Silverlight. Bookmark the permalink.

2 Responses to Using Blend to set the colour of the text in a button

  1. Eric says:

    Definitely a good practice, even with smaller projects.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s