In last tutorial we learnt how to apply style and theme resource to our controls. Now in this part of our tutorial series, we will continue working with styles and resources and learn how to apply color resources of our choice.
Let’s start working with the same project that we created in last tutorial with one button. Select that button and head towards property window. When you click on small arrow key situated next to Foreground property you will notice that another small window opens up with different color tiles and tabs on it. There are four small tabs on that small window namely Null Brush, Solid Color Brush, Gradient Brush and Image Brush. By default it is set to solid brush with color white (RGB: 0,0,0 and alpha transparency channel set to 255). You can choose the color you want by moving the slider along the vertical bar and then the circular cursor to select the exact shade. You can also choose iDropper using which you can adopt color of any of the available tool. There are lot of ways to get modify the color on this solid color brush.
The same goes with Gradient Brush. It performs similar task as solid color brush but sports few additional options. It gives you a series of stops. You can use these stops creatively to get different shades among the chosen color. You can also change the texture of the color using options like horizontal gradient and vertical gradient. Image brush allows you to choose an image as our resource. You can add an image just like we added an image in image control.
For now, use gradient color brush using a stop like I’ve done it (See image). Now if you see the XAML window, you will see that some code is added to XAML window for button.
Now suppose, if we want to add the same gradient color we added for our button to all other controls on our page, how do we do it? For that go to foreground property where we set the funky gradient color brush and right click on it and select “Extract value to resource”. It will open a small popup window “Create Resource”. You can name the resource as you want or you can leave as it is. Then you can choose where you want to save it, depending on where you want to use this resource. If you want to use it on single page, select MainPage.xaml else choose App.xaml and click on Ok.
Now drag another button on designer surface and go to foreground property. Now you will find our custom resource under the name local resources. Once you click on it, you will see the second button carrying same color as first one. What if there are multiple properties that we want to apply to our control? We can do so using styles. A style is a collection of property setters. Let us create a new style now. First delete all the modifications we did in last example and get a new button for fresh start. Paste the following code below the xmlsns declarations.
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Foreground" Value="Red"/>
In this code, we have created two setter properties to change the border and foreground color. After this go to button’s code and add this bit of code:
You will notice that our button border color and foreground color turns into red.
Now if you want to apply this style to your entire application, cut the code between the <phone:PhoneApplicationPage.Resources> </phone:PhoneApplicationPage.Resources>. Open the App.xaml file and paste it in between application resource tags. Now if you go back and check the button, you will see that button still displays red color.
So this is all about Styles and resources in Windows Phone 7.5. In next chapter we will learn about navigating between the xaml pages.