Windows Accent Colours

In a new app concept I’m prototyping, I wanted to allow the user to select a colour for each main item which would effect the heading background colour.

Like this: (note; this is the end result)

Having done similar years ago, I remember the accessibility/legibility concerns this gave me. Allowing your customers to pick any colour they want is not ideal;

If you go completely free form (a full colour picker) then you hit the following problems:

  • Ease of use suffers compared to a quick pick list.
  • Present too many choices (decision fatigue).
  • Many shades (very light and very dark) make it difficult to read and see UI elements.
  • Some colours should absolutely not be offered (Black when the text is black, for example.

Effectively you are giving the users more work and at the same time a rope with which to hang themselves (Even if a colour is OK today, what happens when the theme changes?)

So, options?

Windows gives a list of ‘named’ colours. So how about that?

Well, it also doesn’t guarantee accessibility or contrast. They’re a list of general use colours, not a curated list for this purpose.

If only someone had spent mega dollars researching and building a list that can be relied upon?

Enter Microsoft.

Their Accent Colours serve effectively this exact purpose. Yay!

So I went hunting for an API or enumeration of them. I was aghast to find that one doesn’t seem to exist. Not even a list. I could get the current theme accent, but not them all.

Having spent a few days on and off looking and asking every learned person I could get my hands on, I final gave in and did it the brute force way. In fairness; this possibility was obvious days earlier but I refused to accept I couldn’t do it smarter.

I opened the Windows Personalisation settings, took a snippet and used a colour picker in Paint.Net to get teh Hex values. With that info I used the hover tooltip in Settings to get the colour friendly names.

To save you the wasted time replicating this; here is my list of Windows accent colours!

“#FFB900”, “Yellow Gold”
“#FF8C00”, “Gold”
“#F7630C”, “Orange Bright”
“#CA5010”, “Orange Dark”
“#DA3B01”, “Rust”
“#EF6950”, “Pale Rust”
“#D13438”, “Brick Red”
“#FF4343”, “Mod Red”

“#E74856”, “Pale Red”
“#E81123”, “Red”
“#EA005E”, “Rose Bright”
“#C30052”, “Rose”
“#E3008C”, “Plum Light”
“#BF0077”, “Plum”
“#C239B3”, “Orchid Light”
“#9A0089”, “Orchid”

“#0078D7”, “Default Blue”
“#0063B1”, “Navy Blue”
“#8E8CD8”, “Purple Shadow”
“#6B69D6”, “Purple Shadow Dark”
“#8764B8”, “Iris Pastel”
“#744DA9”, “Iris Spring”
“#B146C2”, “Violet Red Light”
“#881798”, “Violet Red”

“#0099BC”, “Cool Blue Bright”
“#2D7D9A”, “Cool Blue”
“#00B7C3”, “Seafoam”
“#038387”, “Seafoam Team”
“#00B294”, “Mint Light”
“#018574”, “Mint Dark”
“#00CC6A”, “Turf Green”
“#10893E”, “Sport Green”

“#7A7574”, “Gray”
“#5D5A58”, “Gray Brown”
“#68768A”, “Steel Blue”
“#515C6B”, “Metal Blue”
“#567C73”, “Pale Moss”
“#486860”, “Moss”
“#498205”, “Meadow Green”
“#107C10”, “Green”

“#767676”, “Overcast”
“#4C4A48”, “Storm”
“#69797E”, “Blue Gray”
“#4A5459”, “Gray Dark”
“#647C64”, “Liddy Green”
“#525E54”, “Sage”
“#847545”, “Camouflage Desert”
“#7E735F”, “Camouflage”

…listed in groups of 5 representing the horizontal rows in the settings picker.

Is it perfect? No. it wold be better if I could check the Accent-Background colours, but beggars can’t be choosers.

If you spot any errors, let me know.

Enjoy!
Rob.

FlipView SelectedItem binding

For what ever reason, I’ve just lost some hours working around an issue with FlipView on Windows 10 ARM.
In the hope of saving you some time, lets take a walk through it together.
Consider this basic example:
<FlipView
  Name=”fv_Items”
  DataContext=”{Binding MyDataCollection}”
  ItemSource=”{Binding Items}”
  SelectedItem=”{Binding Current, mode=TwoWay}”>
</FlipView>
Assuming you have an object (MyDataCollection) with an ObservableCollection (Items) and a Current property, you’d expect this to just work.  And you’d be right!
…Unless you’re on ARM.
On ARM it looks like the SelectedItem is ignored.  On closer inspection the FlipView is actually overwriting it.  First with the correct value, then with null, then again to the 0 item in the collection…
To work around this (I’m uncomfortable calling this a “fix”) you can set the SelectedItem binding in code behind after the loaded event fires which would otherwise screw everything up.
First, remove the SelectedItem Binding from your FlipView XML.
Now, add a Loaded event handler to the FlipView, and add the following code:
Binding b = new Binding();
b.Mode = BindingMode.TwoWay;
var p = new PropertyPath(“Current”);
b.Path = p;
fv_Items.SetBinding(FlipView.SelectedItemProperty, b);
This works because the FlipView is trying to set itself to the 0 item, regardless of what you say, and overwrites your property value in the process.
In this method, you are not setting the SelectedItem binding until after that tom-foolery is completed.
Cheers,
Rob.