Mobile Zone is brought to you in partnership with:

I am a mother of four kids with a passion for languages, writing and programming. I try to cover everything a beginner should know. After all, I am a beginner. If there is anybody out there, thinking I missed something, or if somebody wants other topics, please feel free to contact me. Andrea is a DZone MVB and is not an employee of DZone and has posted 28 posts at DZone. You can read more from them at their website. View Full User Profile

Windows Phone Styles and Resources

01.23.2012
| 3923 views |
  • submit to reddit

For this blog entry I am just getting right to the point. I created a new project with just a button and immediately ran it. So I can change the theme in my emulator. I am setting the background to light, and the accent color to brown.

I want to find out how the application knows what color it should use. Does it even use another color?

Looking at XAML I can find this:

  1. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  2. FontSize="{StaticResource PhoneFontSizeNormal}"
  3. Foreground="{StaticResource PhoneForegroundBrush}"

 

Inside the curly braces there are so called property bindings, or binding syntax.  What it means is that this command is binding the property values to various elements on this page, like the font or the foreground. It is binding values to static resources that have been defined by Microsoft. A resource is any reusable value in Silverlight that has been set in one place and then is used whenever and wherever it is needed.

In this case the application gets the foreground color from the selection I made in the theme screen.

In my little application I could programmatically retrieve the user’s color selection from this point on  by referencing that static resource named “PhoneForegroundBrush”.

But where is that “PhoneForegroundBrush” defined? It is not defined anywhere in my project. Well, there are embedded resource files that are already on a Windows Phone 7 device itself. They are referred to as “theme resources”. I can’t modify the themes or the style definitions within them, but as a developer I can choose which of the themes I want to use, or choose not to use any of them at all. Consequentially the themes are just simple XAML files, one for each combination of dark or light background along with each of the accent colors.

Here you can find a listing of all the various theme resources that have been created by Microsoft, and that I can pull from and use them within my application. Again, those are defined on the phone itself. I just make use of those resources by accessing them similarly to what I showed in the upper XAML screenshot of the binding syntax.

For this blog entry I am going to keep it simple. I am just using one of the resources that are defined on that website. The resource I am going to use is called PhoneAccentBrush. This is going to give me access to that brown accent color I selected earlier in the Windows Phone Emulator.

Suppose I would want to add an accent color to the button’s border. To accomplish this I have a couple of choices. The first is that I just could type the XAML directly into the code editor:

  1. <Button Content="Button"
  2.         Height="100"
  3.         HorizontalAlignment="Left"
  4.         Margin="38,29,0,0"
  5.         Name="button1"
  6.         VerticalAlignment="Top"
  7.         Width="210"
  8.         BorderBrush="{StaticResource PhoneAccentBrush}"/>

 

Looking at the visual portion of my designer I see that:

1

Now, that’s an interesting issue. I selected brown but I automatically get a blue binding around my button control. And also it still shows the dark background and not the selected light one. Why is that happening? Visual Studio uses some default settings in this case.

Running the application gives me the intended result though:

2

If anything, this just emphasizes the fact that Visual Studio and the Emulator work together but they’re two distinct applications that otherwise had no knowledge of each other.

Let’s move on to the property window. I am scrolling down to Foreground and right click on that little icon. A window is going to pop up where I select “Apply Resource…” Visual Studio then is going to show me a list of the various styles that I can choose from. I am choosing PhoneAccentBrush. Two things are happening. I can see that now the text on the button also shows up in blue:

3

The second thing that’s happening is that this property is added to my XAML code:

  1. BorderBrush="{StaticResource PhoneAccentBrush}"
  2. Foreground="{StaticResource PhoneAccentBrush}" />

 

My button in the running application looks now like this:

4

For now I am resetting that Foreground property. That gives me the possibility to click that little arrow in order to select the wanted color:

5

This window has four tabs on the top. I can set a “Null Brush”, a “Solid Brush”, a “Gradient Brush” or a “Image Brush”. By default it is set to “Solid Brush” and the color white, everything set to 255, meaning that there is no alpha transparency at all. Anyway, there are lots of various possibilities to set the Foreground property. For now I want to use the “Gradient Brush”:

6

Remember, everything I do in the properties window will affect the XAML window somehow. My code for the Button Foreground property looks now like this:

  1.     <Button.Foreground>
  2.         <LinearGradientBrush EndPoint="1,0.5"
  3.                              StartPoint="0,0.5">
  4.             <GradientStop Color="#FF494747"
  5.                           Offset="0" />
  6.             <GradientStop Color="White"
  7.                           Offset="1" />
  8.             <GradientStop Color="#FFEF000F"
  9.                           Offset="0.116" />
  10.         </LinearGradientBrush>
  11.     </Button.Foreground>
  12. </Button>

 

It defines the StartPoint and then the GradientStop. When I run the application now, it will ignore the brown I chose before, but use the new defined Foreground property:

7

Assuming I would want to use the same LinearGradientBrush in other buttons that I want to add to my application, I can simply right click on that icon at the Foreground property again and select “Extract Value to Resource”. A window pops up where I can rename it and choose the destination where I want to save it:

8a

If I want to use this GradientBrush color that I created only on this page, I would choose MainPage.xaml. If I want it to be available to the entire application I would choose app.xaml. Since I am only having that one page in my app I am going to choose MainPage.xaml.

Two things are happening again. First, the definition of the GradientBrush is gone, but I can see that the Foreground is now set to a StaticResource called Foreground1:

  1. Foreground="{StaticResource Foreground1}"></Button>

And when I scroll up to the PhoneApplicationPage I can see that there is now a Resource element as a child to the PhoneApplicationPage:

  1. <phone:PhoneApplicationPage.Resources>
  2.     <LinearGradientBrush x:Key="Foreground1"
  3.                          EndPoint="1,0.5"
  4.                          StartPoint="0,0.5">
  5.         <GradientStop Color="#FF494747"
  6.                       Offset="0" />
  7.         <GradientStop Color="White"
  8.                       Offset="1" />
  9.         <GradientStop Color="#FFEF000F"
  10.                       Offset="0.116" />
  11.     </LinearGradientBrush>

 

Let’s see how this works out. I am dragging a new button from the toolbox to my main form. In the properties window I scroll down to Foreground, right click that icon again and select “Apply resource”. I get a dialogue window where I can choose the defined “Foreground1” property:

1

Pretty cool, I think.

So, what if there are multiple properties for a given control, like my button control, that I want to apply to? For example, I not only want the text to be red, but also the border?

To do that, I am going to have to define a style, which is a collection of property setters.

First I am going to remove that LinearGradientBrush completely from my XAML code. Then I am going to define a style in XAML:

  1. <phone:PhoneApplicationPage.Resources>
  2.     <Style x:Key="AndreasStyle"
  3.            TargetType="Button">
  4.         <Setter Property="BorderBrush"
  5.                 Value="Red" />
  6.         <Setter Property="Foreground"
  7.                 Value="Red" />
  8.     </Style>
  9. </phone:PhoneApplicationPage.Resources>

 

To use that style that I just created I simply need to remove the BorderBrush and the Foreground properties and then add that style to both of them:

  1. Style="{StaticResource AndreasStyle}">

 

Seems pretty simple.

2

 

To be continued…

Source:  http://andreahaubner.blog.com/2011/03/16/resources-and-styles/

Published at DZone with permission of Andrea Haubner, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)