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

Build your first Windows Phone app sample code and powerpoint deck from my session @ Windesheim Zwolle

Yesterday I did a hands on Windows Phone development session to show students of the Windesheim in Zwolle how to build their first application.

If you were at yesterdays session I hope you got inspired to start making Windows Phone apps and hope to see your apps in the Imagine Cup this year.

imaginecup windesheim

https://www.imaginecup.com/

The app we’ve build during the class was a simple twitter app that downloads json data asynchronous and parses the json objects to c# objects. We then bind a list of these TwitterItems to a listbox on the MainPage.xaml and create a ItemTemplate for the listbox items by using Expression Blend Sample data created from the  TwitterItem object.

The visual studio project and powerpoint deck can be downloaded here on my skydrive:

https://skydrive.live.com/redir.aspx?cid=ef12210979e9f6b0&resid=EF12210979E9F6B0!1480&parid=EF12210979E9F6B0!1463

The sample project contains a few extra steps that I didn’t have time for during the session itself but it shows how to post a message to a social network by using the ShareStatusTask and it also contains basic navigation.

During the session I also showed the use of a open source tool to generate classes from json. you can download this tool from codeplex here:

http://jsonclassgenerator.codeplex.com/

to use these classes you’ll need a dll compiled for windows phone. you can get that one here on codeplex:

http://json.codeplex.com/

If you have any question about the sample code or Windows Phone in general contact my by mail or send me a tweet at @geertvdc

Happy Coding!

Geert van der Cruijsen

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