How to Change Disabled Button Background, Focused TextBox Border etc in Windows Phone

xster
xster
May 11, 2012 · 2 min read

In the properties tab or attributes of XAML, the level of control you can have over Silverlight controls is rather limited. You can’t change their behaviours in different states. To actually control it, you need to create a ControlTemplate. Sounds innocent enough but it’s basically forcing the user to redefine a user control and recreate the button or the textbox manually from their constituents (border, grid etc) which is extremely labour intensive if all you want to do is just change say the colour of the border when it is selected.

Instead of recreating the control from scratch, you can let Microsoft Expression Blend do some part of that job for you. Style your control to your liking as much as you can in Blend and then right-click to select Edit Template -> Edit a Copy. Then you get to define a key. Think of it like a CSS class and name it as you wish. Define it in the Application (App.xaml) so you can use it everywhere in your application. This will then generate a ControlTemplate for you based on the instance of control you selected Edit Template on.

Image for post

From there, you can look at the code and notice the properties that are storyboard-animated to change on different events and customize them. Once that’s done you can start applying this new template to your controls by adding the

Template="{StaticResource TextBoxCustom}"

attribute to the tags.

xster

Collection of tech tips and learnings

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store