Working With Styles And Resources: Windows Phone Apps Development Tutorial – Part 19

After learning about Image Control, in this part of our tutorial series, we will learn more about designing aspect of applications rather than functionality. We will learn about how to use user’s choice of colors within your application, we will also have a look at selecting different fonts and color settings and finally we will look at how to combine custom settings that we will create into styles, which can be used on single page or across the whole application.

Let’s start right away. Create a new project with some name as usual and place a button anywhere you want. Now start the emulator and click on the start button. So you can get to the settings tab (click on the directional arrow displayed next to IE icon). Now once you reach settings, go to themes. Here you can user can change the background color as well as foreground color. Now if you select different foreground color and start application, you will see no difference in or application style as we haven’t ordered our application to obey the users’ choice.

Theme_Settings

If you see our XAML window, you will see several properties like font-family, font-size and so on. They have been pre-defined for our use. Just have a look at how they have been defined. These are property bindings, also known as binding syntax. A resource is any reusable value in Silverlight that has been set at one place and is used at another! Just like CSS.

So where are these Static Resources defined? You won’t be able to search them in our project. They are already present on our Windows Phone 7.5 and known as theme resources. If you want to learn more about theme resources, there is a great page on MSDN where all the brushed (static resources) are listed. Though there are dozens of resources listed, we will use just one resource for our application, PhoneAccentBrush. This will give access to background and foreground color. We can add this resource using any of the two ways, either by adding it through properties windows or by defining it in code window.

Let’s start editing the code. Start typing following lines in the code area for button that we have in XAML window.

BorderBrush="{StaticResource PhoneAccentBrush}"

Once you write this line, you will notice that the border of the button turns Blue. Now why blue? Because these are some default setting Microsoft has done in Windows Phone developer tool. Let’s change now foreground property but this time using property window. Select the button and go to its property window and search for Foreground property. Right click on that property and click on “Apply Resource”. Once you do that, it will show you a list of available styles. Click on “PhoneAccentBrush” as we did with background. Now try changing background as well as foreground color of emulator and then running the application.

Foreground_background_property_set

It works, the foreground as well as background color are having just the same color as theme itself, isn’t it? With this, we come to an end of this post. In the next tutorial we will continue studying about how to apply resource and style.

Posted by on , in Category Phone with Tags
Gadget freak, Apple lover, Windows Phone lover; well that’s me! I have been in this wonderful field of freelance writing for quite some time and looking forward to developing more illuminating content related to gadgets and technology, as I go along.