XAML: come cambiare il colore di sfondo solo in modalità Progettazione?

Question

Ho un controllo con colore in primo piano del testo bianco e colore di sfondo trasparente. Successivamente questo controllo degli utenti verrà aggiunto in un controllo diverso che trasporta il colore di sfondo reale.

Tuttavia, durante la progettazione di questo controllo, in primo piano bianco su sfondo bianco in VS 2010, non posso ovviamente vedere nulla. In ogni caso, per definire un colore diverso solo per il tempo di progettazione?

Ho provato questo:

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

Ma questo non funziona. Qualche consiglio?

UPDATE:

Non capisco come funziona per voi ragazzi. Ho creato un nuovo Silverlight 4.0 Applicazione e ho inserito questa riga di codice nel 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> 

Quando vado in Designer, io non ancora vedere come blu. E non ho nemmeno alcuna condizione di InDesignTime. Cosa mi manca qui?

Grazie, KAVE

Answer 1

Ecco un modo:

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

Se si passa alla creazione di un controllo basato su modelli, dovrete aspettare per impostare le cose in OnApplyTemplate, come in questo esempio:

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

Assumendo questo è il modello:

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

Mi piace anche aggiungere direttive di compilazione condizionale attorno al codice l questo, come lo è solo per lo sviluppatore/designer e non è mai necessario in fase di esecuzione.

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

Nota che tutta questa tecnica funziona solo quando il UserControl si sta creando viene utilizzato all'interno di un altro * * UserControl/controllo in fase di progettazione. Quindi, se il codice che ho suggerito sopra è inserito in un UserControl denominato UserControlWithDesignMode, è necessario disporre di un altro UserControl, UserControlHost, che contenga un'istanza del controllo UserControlWithDesignMode per vedere il funzionamento del comportamento in fase di progettazione. Il code-behind per il controllo attualmente modificato non viene eseguito quando lo stai modificando. Esegue solo quando è contenuto in un altro host (in Silverlight, ad esempio un altro UserControl).

Answer 2

È possibile utilizzare seguente codice all'interno UserControl costruttore:

Per WPF:

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

Per WPF/Silverlight:

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

Answer 3

Un'opzione sarebbe quella di assegnare a UserControl un colore di sfondo e quindi sostituire quello in cui lo si utilizza. Quindi, quando si modifica UserControl in isolamento, avrebbe un colore di sfondo; ma quando stai modificando un controllo che contiene quel controllo utente, lo vedresti con lo sfondo trasparente come desideri.

Così file XAML del UserControl sarebbe simile a questa:

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

E poi in qualche altro schermo, in cui lo si utilizza, si potrebbe fare:

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

poco elegante, ma semplice.

Answer 4

Buon thread, specialmente quando si esegue un MVVM il fatto che UserControls appaia in bianco quando sono trasparenti è molto fastidioso.

Sono sicuro che si potrebbe fare questo in Blend con uno stato definito in base al fatto che un progettista è in esecuzione, ma non credo che ridurrebbe la quantità di lavoro.

Ancora non si sa come evitare il codice nel codice e evitando di dover aprire la fusione, quindi se qualcuno ha suggerimenti, grazie in anticipo per la pubblicazione.

Vorrei suggerire di utilizzare Opacità

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

che non funziona, dal momento che farà eventuali controlli figlio all'interno del UserControl invisibile in fase di esecuzione.

Un'opzione sarebbe quella di assegnare a UserControl un colore di sfondo, quindi sostituire quello in cui lo si utilizza.

Si è tentato di impostare lo sfondo su UserControl? Non so perché, ma per me non funziona.

quello che funziona è quello di impostare lo sfondo del Contenuto, in questo modo

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

poi mettere il seguente codice nel costruttore della vista

public View() { 
    InitializeComponent(); 

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

Answer 5

approccio alternativo che non comporta codice:

1. Installare "Editor tema colori di Visual Studio 2012" trovato qui: http://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05
   • O per VS 2010: http://visualstudiogallery.msdn.microsoft.com/20cd93a2-c435-4d00-a797-499f16402378
2. creare un nuovo tema personalizzato basato su quello che si desidera modificare.
3. Fare clic sul pulsante del filtro "Mostra tutti gli elementi" in alto a sinistra dell'editor tema
4. tipo "tavola da disegno" nella ricerca-box in alto a destra dell'editor tema
5. Impostare il "Cider -> ArtboardBackground "colore a un colore diverso a tua scelta.
6. Yay! : D

---

Nota: il campo "Cider -> ArtboardBackground" colore del tema si trova in VS2012 ma non posso confermare se ha lo stesso nome in VS2010

Answer 6

Un'altra tecnica mentioned in this SO question è quello di utilizzare la proprietà non documentata d:Design­er­Proper­ties.DesignStyle , che funziona benissimo per applicare uno stile in fase di progettazione a un controllo singolo , ma che non sembra funzionare per un Style in un ResourceDictionary applicabile a a tutti dei comandi o elementi tipizzati in modo appropriato nell'ambito del dizionario.

Per risolvere questo, nella stessa pagina I provide a simple solution per la distribuzione di uno stile di progettazione in uno ResourceDictionary. Ecco un riassunto di questa risposta:

---

Innanzitutto, inserire lo stile desiderato in un dizionario XAML nel modo normale.

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

Poi, nel codice C#, rimuovere lo stile dal Resource­Dict­ionary quando la modalità di progettazione è non rilevato. Fare questo è nel OnInitialized di esclusione:

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

    base.OnInitialized(e); 
} 

Design Mode:                                                         Runtime Mode: