Custom Styles and Templates in Windows Phone: Button
This is the second article from the «Custom Styles and Templates in Windows Phone» series of tips focused on how to customize the default Templates and Styles of different Windows Phone UI controls. Here is what is included:
- Custom Styles and Templates in Windows Phone: Intro
- Custom Styles and Templates in Windows Phone: Button
- Custom Styles and Templates in Windows Phone: HyperlinkButton
- Custom Styles and Templates in Windows Phone: CheckBox
- Custom Styles and Templates in Windows Phone: ListBox
- Custom Styles and Templates in Windows Phone: TextBlock
- Custom Styles and Templates in Windows Phone: TextBox
- Custom Styles and Templates in Windows Phone: PasswordBox
- Custom Styles and Templates in Windows Phone: ProgressBar
- Custom Styles and Templates in Windows Phone: RadioButton
- Custom Styles and Templates in Windows Phone: ScrollViewer
- Custom Styles and Templates in Windows Phone: Slider
Analyzing the Button default Style Elements
The first thing we need to do before customizing the Style of the button is to understand its structure and the most important elements. To get the Default Style of the Windows Phone Button just follow this tutorial: Windows Phone Button Default Style
Setters are used to set basic properties such as Color, Font, Size, Margins, etc.
The most important part in every Style is the Template setter.
- ControlTemplate
The ControlTemplate element specifies the visual structure and behavior of the control and is set via the Template property. You can completely customize the look and feel of a control by giving it a new Template. Usually you create a custom ControlTemplate when you want to customize the control’s appearance beyond what setting the other properties of the control will do. Here is how the default Style of the button should look like (note: the VisualState section is given in the next point).
NOTE: The ContentControl element is very important, since it represents the content container of the button. I.e. everything that you set via the button Content property or via ContentTemplate goes there.
NOTE: «TemplateBinding» is used in order to bind properties of the Visual Elements to properties of the control class (i.e.use TemplateBinding in a template to bind to a value of the control the template is applied to).
Visual States specify the visual behavior of the control. Generally a VisualState contains a Storyboard that changes the appearance of the elements that are in the ControlTemplate. I.e. in the case of the Button control the VisualStates determine what will happen when the button is pressed or disabled.
Button Custom Style and Template
Why would you need to change the Style of the button? Well, the first example that I can think of is a scenario hen you want to create a theme friendly Image button which looks consistent in both light and dark themes.
A nice and easy way of achieving that is to use create a custom button control template with OpacityMask. In short opacity masks enable you to make portions of an element either transparent or partially transparent. For more info about the Opacity Mask take a look at our previous post: Creating theme friendly UI in WP7 using OpacityMask
**Step1.**The first thing that you will need to change in the Style is to replace the ContentControl element with a Grid and TemplateBind the OpacityMask to the Content Property:
Step2. The second thing is to change the «Pressed» VisualState in such way that it changes the Background of the ContentContainer:
**Step3.**Here is how the complete custom Style should look like:
Example: To see the result just follow the steps:
**Step1.**Add a new icon to your project, for example an edit icon in the light theme:
**Step2.**Use the newly created custom Style and ad an ImageBrush as well:
Step3. Run the application. As you can see the Image button automatically looks consistent in both dark and light themes, although you are using just the dark icon image:
In this article I talked about customizing the Button control. Here is the full source code:
Stay tuned with the rest of the posts.
Hope the tip was helpful.
You can also follow us on Twitter: @winphonegeek for Windows Phone; @winrtgeek for Windows 8 / WinRT
Creating Custom Windows Phone Button
I have created a custom button in my WP app. i want to make it look like a standard windows phone 8 button. XAML Code
The code for event handlers
My problem is that when i click the button, there is a slight delay before the button acts as the notmal button.( The backgrounc changes to the PhoneAccentColor and back). The background color won’t change as soon as i touch it. but after one or 2 attempts it behaves normally. Im writing the code to perform the action for that button in the Tap event handler. but i need to make it behave like a normal button as soon as the user touches it. What am i doing wrong and what can i do to fix it? Please help.. Thanks in advance..
1 Answer 1
Try using the to change the controltemplate/style of a button. This will allow you change the appearance of the button but keeps all the behaviour a user would expect from a button. one of the great upsides from XAML to be able to do this.
So add a button to your phone page, then on the right of the designer select Document Outline go to your button you want to restyle, right click on the button, under Template choose Edit a Copy. . You now can name the style and ad it to the page resource. Now just bellow the VisualStateManager.Groups you will find the source to draw the button and you could replace it with your code:
Here is what the button should look like after this, notice the style gets set to the control template you just created.
How to handle the back button on Windows Phone 7
On the windows phone 7 emulator, when the hardware back button is pressed, the default behaviour is for it to close your current application. I want to override this default behaviour so that it navigates to the previous page in my application.
After some research, it seems it should be possible to do this by overriding the OnBackKeyPress method, like so:
However, clicking the back button still closes my application. Putting a breakpoint on the above method reveals that it is never called. I have another breakpoint on my application exit code, and this breakpoint is hit.
Is there something else I need to do to intercept the back button?
3 Answers 3
It would appear that it’s not possible to override the OnBackKeyPress method to intercept the back key unless you use the Navigate method to move between pages in your application.
My previous method of navigation was to change the root visual, like:
This meant I could keep all my pages in memory so I didn’t need to cache the data stored on them (some of the data is collected over the net).
Now it seems I need to actually use the Navigate method on the page frame, which creates a new instance of the page I’m navigating to.
Once I started navigating using this method, I could then override the back button handling in the way described in my question.
If you don’t want the default back key behavior, set Cancel = true in the CancelEventArgs parameter in OnBackKeyPress. In my page, I’ve overridden the back button to close a web browser control instead of navigating back.
I was able to use this technique to do what I wanted, which is to prevent back navigation while hiding a control that slides in and out of the window. By default, the control’s visibility is collapsed. Storyboards are used to control when it becomes visible or collapsed. In XAML, inside the Storyboard:
Then in the page’s code:
Note: In the Storyboard that hides the ContentScroller (which is a grid), the KeyTime is set to «00:00:01» because I want it to remain visible while it is sliding (and fading) out of view.
Custom Styles and Templates in Windows Phone: Button
This is the second article from the «Custom Styles and Templates in Windows Phone» series of tips focused on how to customize the default Templates and Styles of different Windows Phone UI controls. Here is what is included:
- Custom Styles and Templates in Windows Phone: Intro
- Custom Styles and Templates in Windows Phone: Button
- Custom Styles and Templates in Windows Phone: HyperlinkButton
- Custom Styles and Templates in Windows Phone: CheckBox
- Custom Styles and Templates in Windows Phone: ListBox
- Custom Styles and Templates in Windows Phone: TextBlock
- Custom Styles and Templates in Windows Phone: TextBox
- Custom Styles and Templates in Windows Phone: PasswordBox
- Custom Styles and Templates in Windows Phone: ProgressBar
- Custom Styles and Templates in Windows Phone: RadioButton
- Custom Styles and Templates in Windows Phone: ScrollViewer
- Custom Styles and Templates in Windows Phone: Slider
Analyzing the Button default Style Elements
The first thing we need to do before customizing the Style of the button is to understand its structure and the most important elements. To get the Default Style of the Windows Phone Button just follow this tutorial: Windows Phone Button Default Style
Setters are used to set basic properties such as Color, Font, Size, Margins, etc.
The most important part in every Style is the Template setter.
- ControlTemplate
The ControlTemplate element specifies the visual structure and behavior of the control and is set via the Template property. You can completely customize the look and feel of a control by giving it a new Template. Usually you create a custom ControlTemplate when you want to customize the control’s appearance beyond what setting the other properties of the control will do. Here is how the default Style of the button should look like (note: the VisualState section is given in the next point).
NOTE: The ContentControl element is very important, since it represents the content container of the button. I.e. everything that you set via the button Content property or via ContentTemplate goes there.
NOTE: «TemplateBinding» is used in order to bind properties of the Visual Elements to properties of the control class (i.e.use TemplateBinding in a template to bind to a value of the control the template is applied to).
Visual States specify the visual behavior of the control. Generally a VisualState contains a Storyboard that changes the appearance of the elements that are in the ControlTemplate. I.e. in the case of the Button control the VisualStates determine what will happen when the button is pressed or disabled.
Button Custom Style and Template
Why would you need to change the Style of the button? Well, the first example that I can think of is a scenario hen you want to create a theme friendly Image button which looks consistent in both light and dark themes.
A nice and easy way of achieving that is to use create a custom button control template with OpacityMask. In short opacity masks enable you to make portions of an element either transparent or partially transparent. For more info about the Opacity Mask take a look at our previous post: Creating theme friendly UI in WP7 using OpacityMask
**Step1.**The first thing that you will need to change in the Style is to replace the ContentControl element with a Grid and TemplateBind the OpacityMask to the Content Property:
Step2. The second thing is to change the «Pressed» VisualState in such way that it changes the Background of the ContentContainer:
**Step3.**Here is how the complete custom Style should look like:
Example: To see the result just follow the steps:
**Step1.**Add a new icon to your project, for example an edit icon in the light theme:
**Step2.**Use the newly created custom Style and ad an ImageBrush as well:
Step3. Run the application. As you can see the Image button automatically looks consistent in both dark and light themes, although you are using just the dark icon image:
In this article I talked about customizing the Button control. Here is the full source code:
Stay tuned with the rest of the posts.
Hope the tip was helpful.
You can also follow us on Twitter: @winphonegeek for Windows Phone; @winrtgeek for Windows 8 / WinRT
How to override the camera button in a Windows Phone app?
There is an app in the marketplace called Flashlight-X which overrides this button to allow the user to turn on / off the LED flash of the phone. No matter what you do, pressing the camera button inside that app doesn’t bring up the Camera app. How do you achieve this?
I mean, I know how to subscribe to the camera button events, but how do I prevent the default action from happening? As in override the default behavior.
3 Answers 3
In WP7, you can do this by using Assembly.Load to access Microsoft’s unsupported (internal-use-only) «Microsoft.Phone.Media.Extended» DLL and then use reflection to access the camera and handle the shutter pressed events. Unfortunately, this DLL doesn’t exist in WP8 and has been replaced by other media APIs, which strip away some of the complexity of that assembly (no reflection needed), but also some of its key features (e.g. being able to use the camera button under lockscreen).
In WP8, you can use AudioVideoCaptureDevice.OpenAsync to get access to the camera device, but the camera button events have been moved to a static class called CameraButtons. You can use those events to override the behavior of the camera buttons in an app. Learn more about them here: http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202963(v=vs.105).aspx
You cannot(you shouldn’t) override the default behaviour of special buttons (camera, back, start, volume up, volume down, search).
