XAML: ¿Cómo cambiar el color de fondo solo en modo Diseño?

Question

Tengo un control con color de primer plano de texto blanco y color de fondo transparente. Más tarde, este control de usuario se agregará a un control diferente que lleva el color de fondo real.

Sin embargo, durante el diseño de este, control debido primer plano blanco sobre fondo blanco en VS 2010, obviamente no puedo ver nada. ¿Hay alguna forma de definir un color diferente solo para el tiempo de diseño?

He intentado esto:

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

Pero esto no funciona. ¿Algun consejo?

ACTUALIZACIÓN:

No entiendo cómo funciona esto para ustedes. He creado una nueva aplicación de Silverlight 4.0 y han procedido esta línea de código en el 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> 

Cuando entro en diseñador, todavía no lo ve como azul. Y ni siquiera tengo ninguna condición isInDesignTime allí. ¿Qué me falta aquí?

Gracias, Kave

Answer 1

Aquí hay una manera:

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

Si cambia a la creación de un control de plantilla, tendrá que esperar para poner las cosas en OnApplyTemplate, como en este ejemplo:

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); 
    } 
} 

Asumiendo esta es la plantilla:

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

También me gusta agregar directivas de compilación condicional alrededor del código l Esto es así, ya que es solo para el desarrollador/diseñador y nunca se necesita en tiempo de ejecución.

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

Tenga en cuenta que esta técnica sólo funciona todo cuando el UserControl que está creando se utiliza dentro de otra * * control de usuario/control en tiempo de diseño. Entonces, si el código que sugerí arriba se coloca en un UserControl llamado UserControlWithDesignMode, entonces debe tener otro UserControl, UserControlHost, que contenga una instancia del control UserControlWithDesignMode para ver el funcionamiento del comportamiento en tiempo de diseño. El código subyacente para el control editado actualmente no se ejecuta cuando lo está editando. Solo se ejecuta cuando está contenido dentro de otro host (en Silverlight, otro UserControl por ejemplo).

Answer 2

Puede utilizar siguiente código dentro de control de usuario constructor:

Para WPF:

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

Para WPF/Silverlight:

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

Answer 3

Una opción sería darle al UserControl un color de fondo y luego anularlo donde lo use. Entonces, cuando edite el UserControl de forma aislada, tendrá un color de fondo; pero cuando edite un control que contenga ese UserControl, lo verá con el fondo transparente como desee.

Así archivo XAML del control de usuario se vería así:

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

Y entonces de alguna otra pantalla, en la que lo utilice, usted podría hacer:

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

poco elegante, pero simple.

Answer 4

Buen hilo, especialmente cuando se hace algo de MVVM, el hecho de que los UserControls aparezcan en blanco cuando son transparentes es muy molesto.

Estoy seguro de que podría hacer esto en Blend con un estado definido según si un diseñador se está ejecutando, pero no creo que eso reduzca la cantidad de trabajo.

Todavía no estoy seguro de cómo evitar el código en el código detrás de y evitando tener que abrir mezcla, por lo que si alguien tiene sugerencias, gracias de antemano por la publicación.

sugeriría a utilizar Opacidad

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

eso no funciona, ya que hará que los controles secundarios en el interior del usercontrol invisible en tiempo de ejecución.

Una opción sería la de dar el control de usuario de un color de fondo, y luego anular que donde vaya a utilizarlo.

¿Intentó establecer el fondo en el UserControl? No estoy seguro por qué, pero para mí no funciona.

Lo que hace el trabajo es establecer el fondo del contenido, al igual que

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

luego poner el siguiente código en el constructor de la vista

public View() { 
    InitializeComponent(); 

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

Answer 5

enfoque alternativo que no implique código:

1. Instalar el "Visual Studio 2012 Color Theme Editor" que se encuentra aquí: http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05
   • O para VS 2010: http://visualstudiogallery.msdn.microsoft.com/20cd93a2-c435-4d00-a797-499f16402378
2. Crear un nuevo tema personalizado basado en el que se desea modificar.
3. Haga clic en el botón de filtro "muestra todos los elementos" en la esquina superior izquierda del editor de temas
4. tipo "mesa de trabajo" en la búsqueda de la caja en la parte superior derecha del editor de temas
5. Ajuste el "Cider -> ArtboardBackground "color a un color diferente de su elección.
6. ¡Yay! : D

---

Nota: el campo "Cider -> ArtboardBackground" color del tema se encuentra en VS2012, pero no puedo confirmar si tiene el mismo nombre en VS2010

Answer 6

Otra técnica mentioned in this SO question es el uso de la propiedad indocumentado d:Design­er­Proper­ties.DesignStyle , que funciona muy bien para aplicar un estilo de solo tiempo de diseño a un solo control , pero que no parece funcionar para un Style en un ResourceDictionary que se aplicaría a todos de los controles o elementos apropiadamente tipados bajo el alcance del diccionario.

Para solucionar esto, en esa misma página I provide a simple solution para desplegar un estilo de diseño sólo en un ResourceDictionary. Aquí hay un resumen de esa respuesta:

---

Primero, coloque el estilo deseado en un diccionario XAML de la forma habitual.

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

Luego, en el código C#, quitar el estilo de la Resource­Dict­ionary cuando el modo de diseño es no detectaron. Para ello, se encuentra en la OnInitialized anulación:

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

    base.OnInitialized(e); 
} 

modo de diseño:                                                         Modo Tiempo de ejecución: