XAML: Как изменить цвет фона только в режиме «Дизайн»?

Question

У меня есть элемент управления с белым цветом текста переднего плана и прозрачным цветом фона.Позже этот пользовательский элемент управления будет добавлен в другой элемент управления, который несет реальный цвет фона.

Однако при разработке этого элемента управления из-за белого переднего плана на белом фоне в 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 там.Что мне здесь не хватает?

Спасибо, Каве

Answer 1

Вот один из способов:

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 во время разработки.Итак, если код, который я предложил выше, помещается в UserControl с именем UserControlWithDesignMode, то у вас должен быть другой UserControl, UserControlHost, который содержит экземпляр элемента управления UserControlWithDesignMode, чтобы увидеть работу поведения на этапе проектированиявремя.Код для текущего отредактированного элемента управления не выполняется при редактировании.Он выполняется только тогда, когда он содержится на другом хосте (в Silverlight, например, UserControl).

Answer 2

Альтернативный подход, который не включает код:

1. Установите «Редактор цветовых тем 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
2. Создайте новую пользовательскую тему на основе той, которую хотите изменить.
3. Нажмите кнопку фильтра «Показать все элементы» в верхнем левом углу редактора тем.
4. Введите "artboard" в поле поиска в верхнем правом углу редактора тем.
5. Установите цвет "Cider -> ArtboardBackground" на другой цвет по вашему выбору.
6. Ура! : D

---

Примечание: поле цветовой темы "Cider -> ArtboardBackground" найдено в VS2012, но я не могу подтвердить, имеет ли оно то же имя в VS2010

Answer 3

Один из вариантов - присвоить UserControl цвет фона, а затем переопределить его там, где вы его используете. Поэтому, когда вы редактируете UserControl изолированно, он будет иметь цвет фона; но когда вы редактируете элемент управления, который содержит этот UserControl, вы увидите его с прозрачным фоном, как вы хотите.

Таким образом, файл XAML UserControl будет выглядеть так:

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

А затем на другом экране, где вы его используете, вы можете сделать:

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

Не элегантный, но простой.

Answer 4

Другой метод , упомянутый в этом вопросе SO , заключается в использовании недокументированного свойства d:Design­er­Proper­ties.DesignStyle, которое отлично подходит для применения стиля только для времени разработки к одному элементу управления , но который не работает для Style в ResourceDictionary, который применяется к всем элементов управления или элементов с соответствующей типизацией в области словаря.

Чтобы решить эту проблему, на той же странице я предоставляю простое решение для развертывания стиля только для дизайнера в ResourceDictionary. Вот краткое изложение этого ответа:

---

Сначала поместите желаемый стиль в словарь XAML обычным способом.

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

Затем в коде C # удалите стиль из Resource­Dict­ionary, когда режим разработки не обнаружен . Сделайте это в OnInitialized переопределении:

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

    base.OnInitialized(e);
}

Режим разработки: Режим выполнения:

Answer 5

Хорошая тема, особенно при работе с некоторыми MVVM, тот факт, что пользовательские элементы управления отображаются на белом фоне, когда они прозрачные, очень раздражает.

Я уверен, что вы могли бы сделать это в Blend с состоянием, определяемым на основе того, работает ли дизайнер, но я не думаю, что это уменьшит объем работы.

Все еще не знаете, как избежать кода в коде и , избегая необходимости открывать blend, поэтому, если у кого-то есть предложения, заранее спасибо за публикацию.* Я бы предложил использовать Opacity

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

Это не работает, так как это сделает любые дочерние элементы управления внутри usercontrol невидимыми во время выполнения.

Один из вариантов - присвоить 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);
}

Answer 6

Вы можете использовать следующий код в конструкторе 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 );
}