Tip: XAML Designer background toggle

WinUI XAML

4 years ago

The UWP Visual Studio XAML designer has improved over time significantly. Still, there was one thing I always struggled with – working on a page or a user control with a transparent background. When we design a light theme app, and your Visual Studio is in Dark mode or vice versa, the Foreground color of text and background color of the designer are almost indistinguishable, which makes designing super hard:

Can't see the text? Me neither :-D .

Can't see the text? Me neither :-D .

However, I have recently discovered a neat little feature that makes this problem go away – the Toggle artboard background button, which we can find in the bottom toolbar of the XAML designer view:

Toggle artboard background button

Toggle artboard background button

Just click it and voilà! XAML designer switches its background to the inverse color, which will make your text much more readable:

XAML designer with toggled artboard background

Much better now!