Jaime Rodriguez
On Windows Store apps, Windows Phone, HTML and XAML

  • Jaime Rodriguez

    Theming in Windows Phone


    A theme is a visual definition of the look & feel for common controls in an Operating System. 
    Themes are usually end-user selectable, changing the theme at the OS level, impacts the look & feel of running applications that are ‘theme aware’.  As an example, on Windows Vista and Windows 7, a popular/desired theme is the Aero theme.

    Windows Phone supports theming. Here is a screenshot of the themes in action in Windows Phone.  

        image         image       image

    This is the exact same app. No code changes, and no recompile. I switched the OS themes to get the different look and feel.

    Since theming is new to Silverlight,  I went under the hood for the implementation details, below are my findings (when dissecting the MIX Preview release). 
    Note:  This is pre-released preview software, it will definitely change [I will point a few coming changes, and I am sure there will be more than I know about now] .


    Details on how end-users will configure themes:

    • The pre-defined themes are a combination of a background + accents colors. 
      • You get a Dark or a Light Background.
      • The accent colors can be Orange, Blue, Red, Green
        [Figure to the right of this paragraph shows the themes configuration screen].
    • OS themes are not extensible; you can’t create and install your own theme.  You can install your own application skin; a skin would change the look and feel for just your app; where a theme can affect all apps.
    • Users can select the active theme on the OS [or the emulator] from Settings –> Themes.
      [The emulator does not persist the theme selection across emulator runs, but if you change the theme it is persisted in memory, allowing you to use that theme for the duration of your emulator session]

    Developer/implementation details: 

    • As expected (for Silverlight applications), theming is implemented using resources and resource dictionaries.  
    • The way the themes are implemented is this:
      • There are pre-defined names for the resources in a theme. Most of the names follow this format:  Phone<Feature/Functionality><Type>  for example:  PhoneBackgroundColor or  PhoneAccentBrush.
      • You can take a peek at the resources in a theme from the resource dictionaries at C:\Program Files (x86)\Microsoft SDKs\WindowsPhone\v7.0\Design  (or just program files if running 32-bit OS).
      • These theme resources are injected into the run-time at application startup.  
        1. The resources are resolved as if they were at  a higher level than Application level Resources.
          If you are familiar with Silverlight or WPF, the {StaticResource} markup extension look-ups are resolved bottom-up, where a UIElement first looks for a desired resource in its Resources collection; if the resource is not there it will query up the visual tree on its Parent’s resources collection (and iteratively the parent’s parent, ,all the way up to the root of the tree.  If the resource is not found, the resource resolution logic then looks in the Application.Resources collection.   
          For Windows Phone, if the resource is not found in the standard resolution above, it will then query the themed resources collection (inserted by the OS) to try to resolve it. 
          Note: see known issues below for known bugs on resource resolution at MIX release]
        2. The resources are injected before Application.InitializeComponent is called. 
          This means, if you insert a resource into App.xaml, that references a Theme resource, you will be fine..   
          At the same time, it is nice that they live in its own private collection
        3. There is some magic on where these are stored. You cant’ see them at run-time (there is no exposed object that shows them), but you can reference and query for them.  See Figure 2 below, the debugger tells me there is no resources on the Page or Application Resources collections, but when I query them, they are there. 
          Personally, I am still undecided with theme resources resolving at Page level (via this.Resources). 
          I think this has implications with regards for those of us that have our equivalent to WPF’s TryFindResource, but not a huge deal since these are supposed to be Theme resources. Again, just don’t use the names in the theme.
    • Since you are running Silverlight applications (so only StaticResources) the expectation is that theming changes are picked up once per application at start-up.   There is no system-wide event or notification that tells you that the current active theme has changed.  [This should not be an issue; but wanted to save you from looking for the event]
    • There is no API to detect the active theme. As a workaround, you can peek into the resources (e.g. look at PhoneBackgroundColor, to know if you are running the Dark or Light theme and look at PhoneAccentColor to know the accent). 

    A known issues at MIX release:

    There is a bug in the MIX preview release that makes resource resolution behave different from what I described above.  The bug is that {StaticResource}  lookups are looking at the “themed resources” collection  first instead of looking at  application resources first.  This is a bug and will be fixed in later builds.

    Note that this is not a big issue, you would only see this issue if your themed resources, and your application resources do not match.  There is two scenarios when this can happen:

      1. If you try to override the theme by inserting your own resources into App.Resources with the same names.  I have to recommend that you do not do that. If you don’t want theming it is safer to create custom templates and styles to get your look & feel right (and bullet proof).
      2. If your design-time resources – inserted by VS2010 tooling into App.xaml  - are not matching the theme running on the OS.  This is a variation of #1 above, but with this one, the developer had no intention to override the resources, therefore I had to highlight it separately.  It also had me all confused given it behaves different from SL on desktop and WPF.

        Here is a detailed explanation on the resources in App.xaml:
        The VS 2010 tooling inserts the equivalent of the DarkBlue theme into App.xaml, in the resources collection. 
        This is handy for design-time and it works at run-time due to bug above.   That said,  the resources in App.xaml are not required at run-time.  You can remove most of the resources in App.xaml and check that still your works.   You can see this in my sample code attached to this post.

        The only two resources from App.xaml that you should not remove are the two styles: PhoneTextpageTitle1Style and PhoneTextPageTitle2Style.   These two styles are not themed resources and are referenced by the default PhoneApplicationPage template created by Visual Studio.  What I did for my app was move these resources back to the Page resources collection, ending up an empty App.Resources collection, and two styles in the MainPage resources collection.

    Sample code is at http://learningwindowsphone.com/samples/LearningWindowsPhone.ThemesAtMIX.zip  

    That is it all you should need to know to get going with themes. Now, you can plan for your Windows Phone application to be theme-aware.

  • Jaime Rodriguez



    If you are a Silverlight  developer take a quick “Journey into Siverlight on Windows Phonecoverby checking out the free preview of Chapter 6 on the “Learning Windows Phone Programming” book by  my colleague Yochay Kiriaty and yours truly.   

    In this quick read, and you will get a high level glimpse at the the Silverlight stack on Windows Phone and understand the reasons for the few small tweaks..   Mike Harsh said at MIX “if you are a Silverlight developer, congrats you just graduated to Windows Phone developer”..  I am changing that one to “after you read this chapter you will have graduated as a Windows Phone developer” :)

    You can also download code samples for this chapter from the code section on the Learning Windows Phone site.  This site is a work in progress (our friend who will do the design is on vacation, bear with us).  Check the site often as we will soon add the ‘engage’ capability..

    Feedback on both the chapter and the site are welcome and appreciated! Try the contact page on the site.  Also, in case you missed it, we have another free chapter for “Building your first Windows Phone application”.

    If you like the chapter, please tweet it, or share it. we want others to enjoy it and to share feedback on it!
  • Jaime Rodriguez

    Three upcoming WPF trainings


    Last year, Karl and I had a blast on our WPF for Line of Business tour.  It was so cool to meet all these people doing or planning to do WPF.  This year, budget is tighter, so no big tour.. but still plenty of WPF and Windows 7 training coming to a city near you..  
    Here are the details:

    April 15,  London, UKClient Development with Visual Studio 2010, .NET Framework 4 & Windows 7 at Techdays  UK Mike Taulty, Ian Griffiths, Paul Foster, and others will do a “Client Day” at Microsoft Techdays, UK.
    This is an all-day Lap Around Windows 7, .NET 4, and any thing you want to ask these guys.  Mike,Ian and Paul know everything about WPF, Silverlight, .NET and predicting the stock market. Don’t miss out on their tips.  Register here.

    April 28,29  - Redmond, WA   -- WPF For Line-Of-Business, Reloaded.
    Karl Shifflett and I will do the same two-day version of the WPF for Line Of Business training we did last year.   This is a two-day deep dive into WPF:  Day one is fundamentals, Day two has an MVVM focus.   

    This is FREE, you get breakfast, lunch and afternoon snack.  Register here. 
    First-come, First serve, limited capacity. You should hurry, but please register only if you are committed to attend.

    April 30, Redmond WA – Building Windows 7 Applications with Windows Presentation Foundation and .NET 4.
    Karl, me, and a few members of the WPF team will recap the new WPF features in .NET 4, and how to use these features to create applications that take advantage of Windows 7.

    Expect to hear about client profile, multi-touch, taskbar, all the new graphics enhancements. etc.

    This is FREE, you get breakfast, lunch and afternoon snack.  Register here. 
    First-come, First serve, limited capacity. You should hurry, but please register only if you are committed to attend.

    If you can’t make these dates or these cities. Don’t worry. The Redmond trainings will be recorded and published online. 
    That said, join us if you can.  You will learn much more in person than watching the videos. We would love to have you.

    Stay tuned for detailed agenda.  Register as soon as possible if you want a seat.

    [PS—If you have a blog, or you participate in any other form of social sharing, please spread the word.
    We thank you in advance!]

    Update 3/24 --  We will only do the locations above. Again, Redmond will be recorded and posted online. 
    As much as we would love to do a tour, this year it simply was not possible; let's try online and see if we can make it work; it could be a way to reach more people (even if not 1:1)

  • Jaime Rodriguez

    I am back..


    I hear that I am not supposed to do the “sorry, I got busy..” blog post… but it has been long enough that I do feel I owe you a “catching up” post…

    Where did I go?  nowhere.   I am still in the same team, at Microsoft. Doing the same gig (working with big customers on the coolest apps that use any .NET client technology (including WPF, Silverlight, and a new addition Windows Phone)..

    Why did not you call, email, or blog?   At first, I was a bit too busy with events like PDC, CES and MIX preparation… 
    After that, I was a bit consumed by Windows Phone but could not blog about it.  i was also letting technology and demand take its course.   You will hear more about it as I go.

    How is the family?  wife and kids are good.  We moved (a whole 4 miles distance, but new school district).  Samuel just finished basketball season, we are moving on to T-ball…  Sophia is at a wonderful fun/loving age (almost 4); I am enjoying every minute since I already know time flies when your kids are young.

    Now that you are back; are you going to blog more frequently and stick with it?
    I will try!  Can’t guarantee it, but will give it a second run… I am super excited about what is coming down the pipeline at Microsoft and have lots of opinions and tips to share around that…

    Can we still email you or contact you via blog contact page? 
    Yes,  please do..    I would love ideas for topics to blog on, or questions on old posts..  stay tuned and you will hear I am adding technologies to my repertoire..

    Thanks for reading [for those that stuck around :)]

Page 1 of 1 (4 items)