Fixing the styling of the WPToolkit ToggleSwitch

If you've ever done any XAML based development for Windows Phone you'll be aware of just how essential the WPToolkit is.

One of the most popular controls contained in the toolkit is the ToggleSwitch. Unfortunately though, its default styling doesn't play well when you want to use it with custom foreground and background colours.

Looking at this image we can see the same page in both light and dark themes. (At 50% in Blend)
The first pair of toggleswitches show the checked and unchecked states with the default theme colours.
The second pair shows what happens if with the default styling when the background and foreground are modified though.
This is almost certainly NOT what you want to see.
With a modified foregound and background I'd expect you want to see something like in the final pair of switches.

So, how to get the toggleswitch to display "properly"?
It's just a case of modifying both the `toolkit:ToggleSwitch` and the `toolkitPrimitives:ToggleSwitchButton`.
Add a `Foreground` reference to `ToggleSwitch` and then replace all the StaticResource references to PhoneForegroundBrush and PhoneBackgroundBrush with TemplateBinding references to `Foreground` and `Background`.
If that sounds complicated, don't worry. You can just copy it from https://github.com/mrlacey/WPMisc/blob/master/ToggleSwitchStyling.xaml (Which also contains the xaml used to create the above images.)

If you've developed an app where the toggleswitches look like the middle pair you now know how to update them.
Similarly, if you know of any apps where there are toggleswitches look like the middle pair above, point them to this article. :)