如何在VS2012中更改XAML设计器的背景颜色？

Question

我只是尝试在设计师中查看XAML代码后的结果。然而，当我在vs2012中使用深色主题时，很难识别黑色字母。

我的问题是如何在不修改深色主题的情况下更改设计师背景为白色。似乎需要在工具中更改几个选项？

谢谢

---

请浏览所有答案。所有答案都有不同的方法，后面的可能更适合您的需求。

- Ted Corleone

Answer 1

在VS 2013中，您可以更改XAML设计器的背景。前往：

Tools -> Options -> Environment -> Fonts and Colors

在面板顶部的下拉框中选择：

Show settings for: XAML UI Designer

然后设置：

Item foreground : white
Item background : white or very light grey (custom)

- VisualStudioEspresso

---

当我这样做时，背景变成了方格状。除了默认值或自动设置外，任何其他背景或前景颜色都会导致方格背景。 - faldeland

如果前景与背景不同，设计画布应该添加格子背景，以区分它与用户控制。如果您喜欢，两者都可以选择白色。您是否使用默认的VS黑暗主题？ - VisualStudioEspresso

在我看来，这个答案应该被标记为正确答案。 :) 谢谢 - Stefan Vasiljevic

使用白色作为项目前景色，使用自定义RGB（245, 245, 245）作为项目背景色，以完全复制常规浅色主题的颜色方案。 - Fernando Espinosa

仍然适用于VS 2019 :) - dgellow

Answer 2

从Visual Studio 2017开始，XAML设计器有一个“切换画板背景”按钮，它的作用是将透明度从黑色棋盘图案更改为白色棋盘图案。

这样做的好处是无需修改XAML文件。

- Jack Ukleja

---

哇，这真是个好消息！！！过去4年里，这个问题被浏览了12672次，难以想象。 - Ted Corleone

我正在使用 Visual Studio 2017，但不知何故找不到这个按钮，它是唯一丢失的按钮。 - Baptiste Candellier

这个功能只在较新的VS版本中添加了吗？它运行得如此完美，以至于我很惊讶多年来没有人建议过它。 - ShadowLiberal

为什么这个不更高呢？在阅读这篇文章之前，我尝试了上面提到的所有方法（几乎是无意中），而这正是我所需要的！ - jumbo

我在VS 2019中没有这个按钮，只有它左右的按钮。 - Welcor

Answer 3

另一种不涉及代码的方法：

1. 安装“Visual Studio Color Theme Editor”扩展程序

• VS 2022: https://marketplace.visualstudio.com/items?itemName=idex.vsthemepack
• VS 2019: https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.VisualStudio2019ColorThemeEditor
• VS 2017: https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.ColorThemesforVisualStudio
• VS 2015: https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.VisualStudio2015ColorThemeEditor
• VS 2013 "RC": https://visualstudiogallery.msdn.microsoft.com/9e08e5d3-6eb4-4e73-a045-6ea2a5cbdabe
• VS 2012 : https://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05
• VS 2010 : https://visualstudiogallery.msdn.microsoft.com/20cd93a2-c435-4d00-a797-499f16402378

---

根据您想要修改的主题创建一个新的自定义主题。（下面是2013年特定的帮助图像）

点击主题编辑器左上角的“显示所有元素”筛选按钮。

在主题编辑器右上角的搜索框中输入“artboard”。

将“Cider -> ArtboardBackground”颜色设置为您选择的其他颜色。

• VS2013还引入了第二个值“Cider -> ArtboardSecondaryBackground”，用于创建有用的棋盘格效果。

6. 耶！:D

---

注意： "Cider -> ArtboardBackground" 颜色主题字段在 VS2012 中找到，但我无法确认它在 VS2010 中是否具有相同的名称。

编辑：添加了指向 VS2013（感谢@treaschf提供的提示！）官方扩展的链接，尽管我认为它是一个“RC”版本。另外，添加了方便的图片。

- MechEthan

---

请不要在多个问题中发布完全相同的答案。如果同样的答案适用于多个问题，那么这些问题很可能是重复的。您应该标记（或关闭，如果您有足够的声望），而不是回答。 - ChrisF

显然，该扩展包括“浅与暗编辑器”主题。正是我正在寻找的。此外还修复了黑色设计师背景问题。 - michaelr524

请注意，Cider是WPF XAML设计器，而XAML UI设计器是所有其他xaml平台的xaml设计器。如果您同时使用这两种技术，则可能需要更新两者。 - Owen Johnson

Answer 4

我曾经遇到过同样的问题，并发现了一篇非常有用的博客文章，其中详细说明了如何在App.xaml中使用触发器来设置样式。

<Style TargetType="{x:Type UserControl}">
    <Style.Triggers>
        <Trigger Property="ComponentModel:DesignerProperties.IsInDesignMode"
                 Value="true">
            <Setter Property="Background"
                    Value="White" />
        </Trigger>
    </Style.Triggers>
</Style>

http://caraulean.com/2012/visual-studio-2012-dark-theme-tip/

- Antony Scott

---

在App.xaml中使用触发器非常好，似乎这里没有其他方法。希望微软在下一个版本中能够修复这个问题。暗色主题实际上非常酷。感谢您的分享。 - Ted Corleone

XMLNS 是一种 XML 的命名空间机制，它用于确保在同一个 XML 文档中使用的元素和属性名称不会产生冲突。你提供的这段代码是一个 XML 命名空间的声明，它指定了一个名为 "ComponentModel" 的命名空间，并将其映射到 PresentationFramework 程序集中的 System.ComponentModel 命名空间。 - Evalds Urtans

为了使这种样式起作用，它需要被包含在一个<UserControl.Resources>标签中，并放置在<UserControl>标签的下方。 - Contango

顺便提一下，这个标签只适用于“UserControl”，因为“ResourceDictionary”不支持XAML预览。 - Contango