Force Windows Phone Theme

Windows Phone applications inherits the theme of the OS on launch.

When the UI is designed specially for the dark theme it won't look well on the light theme, or vice versa.

To prevent this the application can force the default dark or light theme.

In the application class' constructor put this code to force the dark theme:

if ((Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible) MergeCustomColors("/Themes/DarkStyles.xaml");

Or this code to force the light theme:

if ((Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible) MergeCustomColors("/Themes/LightStyles.xaml");

Anywhere in your project put this method:

private void MergeCustomColors(String Theme)
{
    ResourceDictionary Dictionaries = new ResourceDictionary();
    String source = String.Format(Theme);
    var themeStyles = new ResourceDictionary { Source = new Uri(source, UriKind.Relative) };
    Dictionaries.MergedDictionaries.Add(themeStyles);
    ResourceDictionary appResources = Current.Resources;
    foreach (DictionaryEntry entry in Dictionaries.MergedDictionaries[0])
    {
        SolidColorBrush ColorBrush = entry.Value as SolidColorBrush;
        SolidColorBrush ExistingBrush = appResources[entry.Key] as SolidColorBrush;
        if (ExistingBrush != null && ColorBrush != null) { ExistingBrush.Color = ColorBrush.Color; }
    }
}

The code assumes that the projects contains the files DarkStyles.xaml and LightStyles.xaml in a folder named Themes.

A demo project can be found here.

Get Windows Phone Accent Color

Some times an application needs to know which accent color is currently in use on the device so it can adjust it's UI.

The PhoneAccentColor key indicates the accent color as a Color object.
The PhoneAccentBrush key indicates the accent color as a Brush object.

In XAML you can do something like:

<TextBlock Foreground="{StaticResource PhoneAccentBrush}" />
<Border>
  <Border.Background>
    <SolidColorBrush Color="{StaticResource PhoneAccentColor}" />
  </Border.Background>
</Border>

In C#:

Color AccentColor = (Color)Resources["PhoneAccentColor"];
Brush AccentBrush = (Brush)Resources["PhoneAccentBrush"];

Detect Windows Phone Theme

Some times an application needs to know which theme is currently in use on the device so it can adjust it's UI.

The PhoneLightThemeVisibility key indicates the visibility of the light theme.
The PhoneDarkThemeVisibility key indicates the visibility of the dark theme.

In XAML you can do something like:

<TextBlock Visibility="{StaticResource PhoneLightThemeVisibility}" />
<TextBlock Visibility="{StaticResource PhoneDarkThemeVisibility}" />

You can use a converter to manipulate other properties that are not of type Visibility.

In C#:

Visibility LightThemeVisibility = (Visibility)Resources["PhoneLightThemeVisibility"];
Visibility DarkThemeVisibility = (Visibility)Resources["PhoneDarkThemeVisibility"];

Windows Phone Flip Animation

You can use the Projection class to produce the flip animation of a control.

The following XAML ilustrates this:

<UserControl.Resources>
    <Storyboard x:FieldModifier="private" x:Name="SBStartAnimation">
        <DoubleAnimation Storyboard.TargetName="SPPanel" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" From="-90" To="0" Duration="0:0:0.150" />
    </Storyboard>
</UserControl.Resources>

<Border x:FieldModifier="private" x:Name="BShade" Background="#aa000000">
    <StackPanel x:FieldModifier="private" x:Name="SPPanel" VerticalAlignment="Top" Background="#222222">
        <StackPanel.Projection> 
            <PlaneProjection CenterOfRotationY="0.5" RotationX="0" /> 
         </StackPanel.Projection> 
        <Image Source="/Background.png" HorizontalAlignment="Center" Stretch="None" />
        <LC:ProgressLine x:FieldModifier="private" x:Name="PLProgress" Margin="0,-5,0,10" /> 
        <TextBlock Text="Working, please wait..." HorizontalAlignment="Center" Margin="0,0,0,20" /> 
    </StackPanel>
</Border> 

The SPPanel Stackpanel is flipped as defined in the SBStartAnimation Storyboard.

Windows Phone Backgound Color Animation

In Silverlight for Windows Phone you can't animate a Brush so you can't animate the Background of a control.

However, you can use the ColorAnimation class to animate the color of a Brush.

The following XAML shows an example:

<UserControl.Resources>
    <Storyboard x:FieldModifier="private" x:Name="SBStartAnimation"> 
        <ColorAnimation Storyboard.TargetName="BShade" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" From="#00000000" To="#aa000000" Duration="0:0:0.150" /> 
    </Storyboard> 
</UserControl.Resources>

<Border x:FieldModifier="private" x:Name="BShade" Background="#aa000000" /> 

The BShade object must have it's Background property initialized.

Windows Phone Margin Animation

In Silverlight for Windows Phone the ThicknessAnimation class isn't available.

You have two solutions:

• Place a transparent object on the left/top and animate it's Width/Height properties;
• Place the object you want to animate in a Canvas and animate the object Left/Top properties.

If you choose the second options, the XAML can look like this:

<UserControl.Resources>
    <Storyboard x:FieldModifier="private" x:Name="SBUndeterminedAnimation">
        <DoubleAnimation x:FieldModifier="private" x:Name="DAUndeterminedAnimation" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:2.000" From="0" Storyboard.TargetName="BProgress" Storyboard.TargetProperty="(Canvas.Left)" />
    </Storyboard>
</UserControl.Resources>

<Grid>
    <Canvas x:FieldModifier="private" x:Name="CTrack" Background="#19ff0000" Height="5" HorizontalAlignment="Stretch">
        <Border x:FieldModifier="private" x:Name="BProgress" Background="#ffff0000" Height="5" Width="50" />
    </Canvas>
</Grid>

This XAML is actually a custom ProgressBar that has both determined and undetermined behavior.

The To property of the DAUndeterminedAnimation DoubleAnimation is set in code-behind.

Cross-Platform Native Code Generator

When creating an application for different platforms, you can create an HTML application that will fit every deployment or create a native application for each platform you want to traget.

Creating an HTML application sure means less work, since the code (HTML+JavaScript+CSS) is fairly supported across web browsers.

Of course, the User Interface (UI) will not match every system where the application will be deployed.

Developing the application nativelly will allow the UI to be fully integrated with the OS.

But a native application means a software project for each platform and this can be unmanageable.

There are several solutions to this problem that minimize the coding of logic that is common to all of those software projects (business logic).

One of them is AppDevPoint.

This tool centralizes the business logic so that it's coded only once in one place.

There must be native project for each platform since the UI is created natively this way being truly integrated with the OS.

This methodology completely separates the UI from code.

If the business logic has to be changed, simply code it in the AppDevPoint, regenerate the builds and all of your native projects will be updated in a single action.

The binaries produced by the native compiler runs directly on the OS as this framework doesn't requires VMs or additional run-times to be installed.

This tool is free and open-source.

For more details, please visit:
http://appdevpoint.webs.com
http://appdevpoint.codeplex.com/

Windows Phone Stateful Framework

For an windows phone application to pass the Microsoft certification, it must implement the tombstone state.

In concept this is easy to achieve, but in practice we must be careful.

This framework wraps the OnNavigatedTo and OnNavigatedFrom events of the page, exposing a set of methods one can override.

There are two types of methods: navigation methods and state manipulation methods.

The navigation methods allows the page to react to navigation events for initialization, clean-up, etc.

The state manipulation methods is where the code to persist and restore the state must be implemented.

A special state manipulation method is available for restoring the global state of the application.

The state can be immutable if it doesn’t change throughout the page life-cycle, or changeable if otherwise.

A page can be marked as transient this way optimizing the state manipulation methods.

For source code, please visit http://wpstatefulframework.codeplex.com/