Using the complementary color of the phone accent color in your WP7 app

I’m building a Windows Phone app where I want to compare 2 objects to each other visually by showing graphs on how good each of the objects is performing. because I like to use the accent color in my apps I was thinking of what would be a good second color for the other graph. Since I’m not a designer I did some research on colors and found out that every color has a complementary color that is exactly the opposite color of your primary color. (Probably some basic design knowledge I didn’t know that.

Calculating this color is done by simple math. Your primary color + the complementary color should add up to hex value FFFFFF (white) so if you just remove the R G and B values of your color from the max value 255 you’ll end up with your complementary color.

So how to do this in your windows phone project? Let me first show you the results and after that I’ll explain how I created a resource you can use in blend to bind to your complementary color. Below are screenshots of a sample app (download at the end of this post) that displays the phone accent color and its complementary color. I’ve taken screenshots of every color so you can see what the results look like. The first rectangle shows the phone accent color while the second shows it’s complementary color.

complementary1complementary2complementary3complementary4complementary5complementary6complementary7complementary8complementary9complementary10

So let’s see how to use this color in code. I’ve created a class calles “Resources” and I’ve added 2 public static properties in it. 1 called ComplementaryColor and 1 called ComplementaryColorBrush. You’ll use the Brush property mostly when binding but if you would like to have the color it’s also available.

   1: public class Resources

   2: {

   3:     private static Color _complementaryColor = new Color()

   4:     {

   5:  

   6:         R = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).R),

   7:         G = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).G),

   8:         B = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).B),

   9:         A = ((Color)Application.Current.Resources["PhoneAccentColor"]).A

  10:     };

  11:  

  12:     private static Brush _complementaryColorBrush = new SolidColorBrush(_complementaryColor);

  13:  

  14:     public static Color ComplementaryColor

  15:     {

  16:         get

  17:         {

  18:             return _complementaryColor;

  19:         }

  20:     }

  21:  

  22:     public static Brush ComplementaryColorBrush

  23:     {

  24:         get

  25:         {

  26:             return _complementaryColorBrush;

  27:         }

  28:     }

  29: }

The calculations of the complementary color is done by subtracting the R G and B values from the  max of 255 and they are stored in a new Color property. this color is then used in our ComplementaryColorBrush.

To use these properties in blend we’ll just add this class as a resource in the App.xaml file:

   1: <Application.Resources>

   2:     <ResourceDictionary>

   3:         <resources:Resources x:Key="Resources" d:IsDataSource="True"/>

   4:     </ResourceDictionary>

   5: </Application.Resources>

When we build our project and open up Expression blend we can now use this color by selecting the rectangle and going into the databinding menu for the fill property and then selecting the ComplementaryColorBrush.

image

There you go. when you run your project now you’ll see the complementary color of your selected phone accent color

complementary9

You can download my sample application incudling source from my skydrive here

Happy Coding!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Fixing the The Target “GetCopyToOutputDirectoryContentProjectItems” does not exist in the project exception when building your WP7 project

My colleague was installing the Windows Phone 7.1 SDK today and we received the following errors during installation plus a popup box that the bootstrapper had an exception:

Setup could not install the following components:

  • Microsoft XNA game Studio 4.0 Refresh
  • Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0

sdk error

We retried installing the SDK after a full uninstall and a reboot but this wouldn’t help. This error kept appearing. In the end my idea was that we didn’t need XNA any time soon so we would just let this rest and see if everything was still working. Visual studio 2010 opened up fine, Blend  was working All the templates for a  phone project were there so everything seemed ok.

A few hours later when my colleague opened up an already made project from source control and tried to build the project she informed me that she was getting build errors so I had a look. The exception was

The Target “GetCopyToOutputDirectoryContentProjectItems” does not exist in the project

I never heard of this error before and checked if the project was still building on my machine. Ofcourse it was so the problem was somewhere in her environment. I didn’t immediately make the connection of the XNA installation failure but after some searching I found out that it had to do with some of the MSBUILD .target files that Windows Phone 7.1 projects use that have dependencies on the XNA Game studio.

Getting XNA Game studio installed properly seemed the solution so we tried to get that fixed. The solution is in getting the XNA studio installed without use of the bootstrapper that was crashing and Aaron Stebner made a good post on how to do that here.

Follow all the steps in Aarons guide (the file from step 9 didn’t exist for me so I skipped it) and after this the project would build again.

Everyone happy and back to coding Smile Hopefully this post can help someone else when they run into the same problems as we did because we’ve spend to much precious time to fix this.

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Started a new Codeplex project: Windows Phone Silverlight Toolkit Behavior Extensions

Of all windows phone development that is done in the world I think almost everyone is using the Windows Phone Silverlight Toolkit you can get from Codeplex. This toolkit adds a lot of new controls and also other cool features as page transitions and a tilt effect on usercontrols so users will get more feedback when clicking in the UI.

This week I started working on a new project with a designer and he asked me how to insert the page transitions on a windows phone application page and I showed him that you’ll have to add a piece of XAML to your code and the page transitions will work. He asked me “Can’t I do this in the designer mode without touching any code?” I didn’t have any right answer for him so that’s why I’ve spend part of my weekend to build some behaviors that can be used to drag this functionality on pages in Expression Blend.

There are behaviors for every type of transition available in the silverlight toolkit. for each transitiontype there is an “in” and “out” behavior for entering and leaving the page. Besides the transition behaviors I’ve also created a behavior to turn the tilteffect on or off

  • EnableTiltEffectBehavior
  • SuppressTiltBehavior
  • TransitionRollInBehavior
  • TransitionRollOutBehavior
  • TransitionRotateInBehavior
  • TransitionRotateOutBehavior
  • TransitionSlideInBehavior
  • TransitionSlideOutBehavior
  • TransitionSwivelInBehavior
  • TransitionSwivelOutBehavior
  • TransitionTurnstileInBehavior
  • TransitionTurnstileOutBehavior

You can download the behaviors here: (important: you also need the silverlight toolkit for this to work)

http://phonetoolkitbehavior.codeplex.com/

On the codeplex site you’ll find a msi release containing the dll that you can include in your project to use these behaviors and I’ve also included a sample application. I’ll also upload the sample application to the marketplace so you can easily test out the performance etc without any trouble.

For a compete tutorial check this blogpost.

This is currently the first release so every feedback is welcome. please let me know by adding a comment here or contact me on twitter

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Switching Dark/Light theme in Blend for Windows Phone

Today a small tip on how to change the design view of your windows phone 7 application in Expression Blend so you can see it in light or dark theme or check how all the different accent colors look:

This is basic functionality but when I asked around I noticed most people don’t know about this feature so that’s why I wrote this blogpost.

By default in Expression Blend your app will show using the dark theme and the blue accent color. To see how your app looks in white just open the Device window by clicking “Window” –> “Device”

blend device window

When the device window is opened you can switch to the light or dark theme by clicking one of the icons. You can also select the accent color from the pulldown box on the right.

blend select white theme

The result:

blackwhite blend

Happy Coding! Designing!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter