XAML：如何仅在设计模式下更改背景颜色？

发布于 2024-10-15 03:30:18 字数 1138 浏览 3 评论 0原文

我有一个具有白色文本前景色和透明背景色的控件。稍后此用户控件将被添加到带有真实背景颜色的不同控件中。

然而在设计过程中，在VS 2010中控制白色背景上的白色前景，我明显看不到任何东西。无论如何，要在设计时定义不同的颜色吗？

我已经尝试过：

if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
}

但这不起作用。有什么建议吗？

更新：

我不明白这对你们来说有什么作用。我创建了一个新的 Silverlight 4.0 应用程序，并将这行代码插入到 ctor 中：

public MainPage()
        {
            InitializeComponent();
            LayoutRoot.Background = new SolidColorBrush(Colors.Blue);

        }

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot">

    </Grid>
</UserControl>

当我进入 Designer 时，我仍然看不到它是蓝色的。我什至没有任何 isInDesignTime 条件。我在这里缺少什么？

谢谢，卡韦

原文

I have a control with white text foreground color and transparent background color.
Later on this usercontrol will be added into a different control that carries the real background color.

However during designing this, control due white foreground on white background in VS 2010, I can't obviously see anything. In there anyway to define a different color for just the design time?

I have tried this:

if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
}

But this doesn't work. Any tips?

UPDATE:

I dont understand how this works for you guys. I have created a new Silverlight 4.0 Application and have inserted this line of code into the ctor:

public MainPage()
        {
            InitializeComponent();
            LayoutRoot.Background = new SolidColorBrush(Colors.Blue);

        }

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot">

    </Grid>
</UserControl>

When I go into Designer, I still dont see it as blue. And I dont even have any isInDesignTime Condition there. What I am missing here?

Thanks,
Kave

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

絕版丫頭 2024-10-22 03:30:18

这是一种方法：

if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
}

如果您切换到创建模板化控件，则需要等待在 OnApplyTemplate 中进行设置，如下例所示：

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    Border b = this.GetTemplateChild("backBorder") as Border;
    if (b != null && System.ComponentModel.DesignerProperties.IsInDesignTool)
    {
        b.Background = new SolidColorBrush(Colors.Orange);
    }
}

假设这是模板：

<Style TargetType="local:TemplatedControl1">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TemplatedControl1">
                <Border x:Name="backBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我还喜欢在这样的代码周围添加条件编译指令，因为它仅适用于开发人员/设计人员，并且在运行时永远不需要。

#if DEBUG
if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
}
#endif

请注意，只有当您创建的UserControl在设计时在*另一个* UserControl/Control 中使用时，整个技术才有效。因此，如果我上面建议的代码放置在名为 UserControlWithDesignMode 的 UserControl 中，那么您必须有另一个 UserControl、UserControlHost，其中包含 UserControlWithDesignMode 控件的实例，用于查看设计时的行为。当您编辑当前编辑的控件时，其隐藏代码不会执行。它仅在包含在另一个主机中时执行（例如在 Silverlight 中，另一个 UserControl）。

Here's one way:

if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
}

If you switch to creating a templated control, you'll need to wait to set things up in OnApplyTemplate, like in this example:

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    Border b = this.GetTemplateChild("backBorder") as Border;
    if (b != null && System.ComponentModel.DesignerProperties.IsInDesignTool)
    {
        b.Background = new SolidColorBrush(Colors.Orange);
    }
}

Assuming this is the template:

<Style TargetType="local:TemplatedControl1">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TemplatedControl1">
                <Border x:Name="backBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I also like to add conditional compile directives around code like this, as it's only for the developer/designer and is never needed at run-time.

#if DEBUG
if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
    LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
}
#endif

Note that this entire technique works only when the UserControl you're creating is used within* another* UserControl/Control at design time. So, if the code I suggested above is placed in a UserControl named UserControlWithDesignMode, then you must have another UserControl, UserControlHost, that contains an instance of the UserControlWithDesignMode control to see the behavior work at design time. The code-behind for the currently edited control does not execute when you're editing it. It only executes when it's contained within another host (in Silverlight, another UserControl for example).

回复收藏 0 原文

凉风有信 2024-10-22 03:30:18

一种选择是为 UserControl 提供背景颜色，然后在使用它的地方覆盖它。因此，当您单独编辑 UserControl 时，它会有背景颜色；但是当您编辑包含该 UserControl 的控件时，您会看到它具有您想要的透明背景。

因此，UserControl 的 XAML 文件将如下所示：

<UserControl x:Class="MyUserControl" ... Background="DarkBlue">

然后在其他使用它的屏幕中，您可以执行以下操作：

<my:MyUserControl Background="Transparent" ...>

不优雅，但很简单。

One option would be to give the UserControl a background color, and then override that where you use it. So when you're editing the UserControl in isolation, it would have a background color; but when you're editing a control that contains that UserControl, you would see it with the transparent background like you want.

So the UserControl's XAML file would look like this:

<UserControl x:Class="MyUserControl" ... Background="DarkBlue">

And then in some other screen, where you use it, you could do:

<my:MyUserControl Background="Transparent" ...>

Inelegant, but simple.

回复收藏 0 原文

月牙弯弯 2024-10-22 03:30:18

不涉及代码的替代方法：

安装此处找到的“Visual Studio 2012 颜色主题编辑器”：
http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a -81a8-337d4e7ace05
- 或者对于 VS 2010：http://visualstudiogallery.msdn.microsoft.com/20cd93a2-c435-4d00-a797-499f16402378< /a>
根据您要修改的主题创建一个新的自定义主题。
单击主题编辑器左上角的“显示所有元素”过滤按钮
在主题编辑器右上角的搜索框中键入“artboard”
设置“Cider -> ArtboardBackground””颜色为您选择的不同颜色。
耶！ :D

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

回复收藏 0 原文

脱离于你 2024-10-22 03:30:18

您可以在 UserControl 构造函数中使用以下代码：

对于 WPF：

if (LicenseManager.UsageMode == LicenseUsageMode.Designtime)
{
    LayoutRoot.Background = new SolidColorBrush( Colors.Blue );
}

对于 WPF / Silverlight：

if (DesignerProperties.GetIsInDesignMode( this ))
{
    LayoutRoot.Background = new SolidColorBrush( Colors.Blue );
}

You can use following code within UserControl constructor:

For WPF:

if (LicenseManager.UsageMode == LicenseUsageMode.Designtime)
{
    LayoutRoot.Background = new SolidColorBrush( Colors.Blue );
}

For WPF / Silverlight:

if (DesignerProperties.GetIsInDesignMode( this ))
{
    LayoutRoot.Background = new SolidColorBrush( Colors.Blue );
}

回复收藏 0 原文

爱殇璃 2024-10-22 03:30:18

很好的线程，尤其是在执行一些 MVVM 时，用户控件在透明时显示为白色的事实非常烦人。

我确信您可以在 Blend 中执行此操作，并根据设计器是否正在运行定义状态，但我认为这不会减少工作量。

仍然不确定如何避免代码后面的代码和避免必须打开混合，所以如果有人有建议，请提前感谢您的发布。

我建议使用不透明度

<my:MyUserControl Background="Transparent" ...>

这不起作用，因为它会使用户控件内的任何子控件在运行时不可见。

一种选择是为 UserControl 提供背景颜色，然后在使用它的地方覆盖它。

您是否尝试在 UserControl 上设置背景？不知道为什么，但对我来说它不起作用。

有效的是设置内容的背景，就像这样

<UserControl x:Class="...">
<StackPanel Background="{StaticResource PhoneChromeBrush}">
...

，然后将以下代码放入视图的构造函数中

public View() {
    InitializeComponent();

    var c = Content as Panel;
    if (c != null) c.Background = new SolidColorBrush(Colors.Transparent);
}

Good thread, especially when doing some MVVM the fact that UserControls appear on white when they are transparent is very annoying.

I'm sure you could do this in Blend with a state defined based on whether a designer is running, but I don't think that'd reduce the amount of work.

Still not sure how to avoid the code in the code behind and avoiding having to open blend, so if anybody has suggestions thanks in advance for posting.

I would suggest to use Opacity

<my:MyUserControl Background="Transparent" ...>

That doesn't work, since it will make any child controls inside the usercontrol invisible at run time.

One option would be to give the UserControl a background color, and then override that where you use it.

Did you try to set the Background on the UserControl? Not sure why but for me it doesn't work.

What does work is to set the Background of the Content, like so

<UserControl x:Class="...">
<StackPanel Background="{StaticResource PhoneChromeBrush}">
...

then putting the following code in the constructor of the view

public View() {
    InitializeComponent();

    var c = Content as Panel;
    if (c != null) c.Background = new SolidColorBrush(Colors.Transparent);
}

回复收藏 0 原文

歌入人心 2024-10-22 03:30:18

在此问题中提到的另一种技术是使用未记录的属性d:DesignerProperties.DesignStyle，它可以工作非常适合将仅设计时样式应用于单个控件，但它似乎不适用于 ResourceDictionary 中的Style这将适用于字典范围内的所有适当类型的控件或元素。

为了解决这个问题，在同一页面上我提供了一个简单的解决方案，用于将仅限设计器的样式部署到ResourceDictionary中。以下是该答案的摘要：

首先，以正常方式将所需的样式放入 XAML 字典中。

<Window.Resources>
    <Style TargetType="TreeViewItem">
        <Setter Property="IsExpanded" Value="True" />
    </Style>
</Window.Resources>

然后，在 C# 代码中，当未检测到设计模式时，从 ResourceDictionary 中删除样式。这是在 OnInitialized 覆盖中执行的：

protected override void OnInitialized(EventArgs e)
{
    if (DesignerProperties.GetIsInDesignMode(this) == false)
        Resources.Remove(typeof(TreeViewItem));

    base.OnInitialized(e);
}

设计模式：运行时模式：

Another technique mentioned in this SO question is to use the undocumented property d:DesignerProperties.DesignStyle, which works great for applying a design-time-only style to a single control, but which doesn't appear to work for a Style in a ResourceDictionary that would apply to all of the appropriately-typed controls or elements under the scope of the dictionary.

To solve this, on that same page I provide a simple solution for deploying a designer-only style into a ResourceDictionary. Here is a summary of that answer:

First, put the desired style in a XAML dictionary in the normal way.

<Window.Resources>
    <Style TargetType="TreeViewItem">
        <Setter Property="IsExpanded" Value="True" />
    </Style>
</Window.Resources>

Then, in the C# code, remove the style from the ResourceDictionary when design mode is not detected. Do this is in the OnInitialized override:

protected override void OnInitialized(EventArgs e)
{
    if (DesignerProperties.GetIsInDesignMode(this) == false)
        Resources.Remove(typeof(TreeViewItem));

    base.OnInitialized(e);
}

Design Mode: Runtime Mode: