Sometimes you may want to use two colors in an app. If it was just one then I'm sure you'd just go with the Accent color.
The acccent colors all work well when on Black or White.
The problem though is that there is no single other color that can be combined well with any accent color and you probably want black and white elsewhere on the page. What you really want to avoid is a design that looks bad with one (or more) accent color(s).
If only there was a way to have another brush resource available that would adjust to the selected accent color and work in compliment to it.
Introducing the AccentComplimentBrush
It lets you have another SolidColorBrush available via a an Application wide resource that will work with any of the default accent colors. The complimentary color is based on the exact opposite position on the color wheel. See how the two pairs all go together:
The accent color above and it's compliment below.
How do you use it?
Just 2 simple steps
1. Add the resource.
Get the file, add it to your project and then reference it. (Either at the application level or on a specific page.)
<phone:PhoneApplicationPage.Resources>
<mrlacey:AccentComplimentBrush x:Key="MustBeSetButCanBeAnything" />
</phone:PhoneApplicationPage.Resources>
Note the key value I've used above. Resources must have a key, but we don't actually ever use it. Because of this, ReSharper (or equivelent) might try and tell you that the resource isn't used. It is. Usage just can't automatically be detected at design time it because it's implemented with some run time trickery.
2. Use it!
Just refer to it in the XAML.
<TextBlock Text="accent"
Foreground="{StaticResource PhoneAccentBrush}" />
<TextBlock Text="compliment"
Foreground="{StaticResource AccentComplimentBrush}" />
or in code:
(SolidColorBrush)Application.Current.Resources["AccentComplimentBrush"];
Important!
1. It currently only works with the default accent colors, not any added by the operator or OEM. If you use this and want some help with adding support for any accent color let me know.
2. Because it uses "run time trickery" it doesn't work with the designer (in Visual Studio or Blend). If you know a way that would allow design time support I'd love to hear it.
What do you think? Useful?
Update I've now made a version 2.0 of this code which supports 7.X too and will even work with OEM/MO defined accent colors.
I had a similar requirement in that I needed a "Dark" accent colour as I was adding a messaging system to my app. For instance if you look at the messaging section for the phone, you will see that your messages are a darker accent colour, while the other message would be in the phone accent colour.
ReplyDeleteYou can use this code to get the colour, and so far works well in all the accent colours I have tested:
Color accent = (Color)Resources["PhoneAccentColor"];
Color darkAccent = Color.FromArgb(accent.A, (byte)(accent.R / 1.5), (byte)(accent.G / 1.5), (byte)(accent.B / 1.5));
@Totidev I thought that "dark accent" was just done with a partial transpatency so the underlying black background darkened it.
ReplyDelete