Fix: Visual Studio 2010 XAML Designer output for WP7 light theme

The other day I submitted my 1st Windows Phone 7 application via http://create.msdn.com

Having registered for free as a student developer (being a PhD student on Robotics) via http://dreamspark.com I could only try my 1st app on WP7 emulator – when it gets accepted I will be able to have my WP7 phone unlocked to try apps there too.

So I was disappointed a bit to get back a certification failure. One of the two reasons stated was that I wasn’t following one key WP7 (design) guideline/requirement: to have the app UI work fine in both dark and light theme of WP7. I was using the default design colors and brushes, not having set any colors explicitly and since the emulator was starting in dark theme by default, this issue slipped my attention (wouldn’t it be nice if the Visual Studio XAML designer allowed you to switch between dark and light theme?).

The (nicely organized) feedback PDF from the Certification step of the WP7 app marketplace submission process was saying:

At first I couldn’t find the settings at the WP7 emulator since the image button pointing to the right to go to the settings page wasn’t visible (probably because of my video card not supporting the latest shader model and running the emulator ignoring the warnings shown that only Silverlight – not XNA – content will show up and probably not always fine – obviously meaning functionality that is implemented using GPU hardware acceleration in the emulator).

Dragging to the left on the 1st screen of the emulator (that just shows IE) takes you to the apps page where you also see Settings and your deployed app (apart from IE). You can hold down mouse on Settings there and select to Pin it to 1st page for easier access. At settings you can change the Theme Background to “light” instead of the default “dark” and try your app again.

In my app’s case indeed you couldn’t see a thing. The article that gave me a hint to what might be happening was:

http://timdams.wordpress.com/2011/06/21/creating-a-wp7-app-supporting-dark-and-light-themes/

and especially the phrase:

when the light theme is active, what WP7 basically does is switch the Foreground and the Background property of all controls, as long as they’re not defined explicitly.

The moment however, you define a specific color for a control, WP7 won’t help you with switching colors anymore

So I took a look again at the XAML code the Visual Studio 2010 designer for WP7 Silverlight app had generating. I noticed the XAML had Background=”Black” at various controls (like Grid, Pivot etc.).

Comparing with a newly created project I noticed it just had Background=”Transparent” for Grid. I later on remembered that at some point it was showing Pivot pages one over the other (due to wrong nesting in the XAML) which had set me changing the Background to “Black” at various controls trying to work around the overlap issue.

Doing a replace all for { Background=”Black”} (with a space prefix) and replacing with {} (that is nothing) is the first step needed for the fix.

The 2nd step is to add to the XAML header the missing Background="{StaticResource PhoneBackgroundBrush}" attribute value assignment shown below in bold that seems to be missing (to use the phone’s background brush by default).

In fact most probably the 2nd issue is with the Silverlight WP7 Pivot application template (probably the same goes for the Panorama template) and not the XAML designer itself which may be WP7 agnostic altogether.

<phone:PhoneApplicationPage
    x:Class="MYPHONEAPPCLASSNAME.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    Background="{StaticResource PhoneBackgroundBrush}"
    SupportedOrientations="PortraitOrLandscape"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    Title="MYPHONEAPPTITLE"
    IsHitTestVisible="True">

A useful link regarding WP7 brushes is “Theme Resources for Windows Phone”:
http://msdn.microsoft.com/en-us/library/ff769552(v=vs.92).aspx

These suggestions have been submitted to Microsoft Connect and can be voted for at: https://connect.microsoft.com/VisualStudio/feedback/details/703467/vs2010-silverlight-xaml-designer-with-wp7-silverlight-app-templates-fail-at-wp7-light-theme

Οπτικοποιώντας το φώς

Πρόσφατα έκανα κριτική ανάγνωση (review) μιας προτεινόμενης δημοσίευσης για το συνέδριο ΤΠΕ-Ε 2011 (http://www.ekped.gr/?p=202), που είχε σχέση με την πρόσληψη της έννοιας του φωτός και της σκιάς από τα νήπια. Ανέφερε πως έχουν πρόβλημα να οπτικοποιήσουν νοητά το φως ως “ακτίνες” (όχι ότι είναι ακριβώς ακτίνες βέβαια, κύμα είναι) και τη διάδοση του.

Σκεφτόμουν ένα πείραμα όπου περνά φως μέσα από ένα κλειστό διαφανές κουτί που περιέχει σκόνη, το οποίο μετά ανακινείς για να εμφανιστεί το φως πάνω στη σκόνη, ή και συνδιασμό διαγραμμάτων και βιωματικής εμπειρείας.

Σχετικά με τη διάδοση του, ο φωτεινός κώνος μιας εστιασμένης φωτεινής πηγής (spot cone) μεγαλώνει όσο απομακρύνεσαι από την πηγή, άρα αν τον οπτικοποιήσεις τα παιδιά μπορούν να συλλάβουν την κατεύθυνση του φωτός (από το μικρό προς το μεγάλο) και τη διάδοση (ιδίως αν παραλληληστεί με τον κυματισμό γύρω από μια πέτρα που πέφτει στο νερό). Αν συνδυαστεί με καθρέφτες που τοποθετεί/μετακινεί ο μαθητής, η διάδοση μπορεί να γίνεται ίσως ακόμη πιο σαφής.