Tip: XAML Designer background toggle

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 😀 .

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!
Buy me a coffeeBuy me a coffee

1 thought on “Tip: XAML Designer background toggle”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.