How to set a value to display for bound properties in WPF design mode?

Question

My bound contents are showed as empty string in the UI design-mode. I want to display some faked value for those contents but I don't know how to.

Please share if you know how to. Thank you!

Answer 1

An easy way to get Design-time-data in Visual Studio 2010 is to use a design-datacontext. Short example with a Window and a ViewModel, For DataContext, the d:DataContext will be used in Design-mode and the StaticResource will be used in runtime. You can also use a separate ViewModel for design but in this example I will use the same ViewModel for both.

<Window ...
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:local="clr-namespace:DesignTimeData"
        mc:Ignorable="d"            
        d:DataContext="{d:DesignInstance local:MyViewModel,
                        IsDesignTimeCreatable=True}">
    <Window.Resources>
        <local:MyViewModel x:Key="MyViewModel" />
    </Window.Resources>
    <Window.DataContext>
        <StaticResource ResourceKey="MyViewModel"/>
    </Window.DataContext>
    <StackPanel>
        <TextBox Text="{Binding MyText}"
                 Width="75"
                 Height="25"
                 Margin="6"/>
    </StackPanel>
</Window>

And in the ViewModels property MyText we check if we're in design mode and in that case we return something else.

public class MyViewModel : INotifyPropertyChanged
{
    public MyViewModel()
    {
        MyText = "Runtime-Text";
    }

    private string m_myText;
    public string MyText
    {
        get
        {
            // Or you can use
            // DesignerProperties.GetIsInDesignMode(this)
            if (Designer.IsDesignMode)
            {
                return "Design-Text";
            }
            return m_myText;
        }
        set
        {
            m_myText = value;
            OnPropertyChanged("MyText");
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Designer.cs, which is found here, looks like this

public static class Designer
{
    private static readonly bool isDesignMode;
    public static bool IsDesignMode
    {
        get { return isDesignMode; }
    }
    static Designer()
    {
        DependencyProperty prop =
            DesignerProperties.IsInDesignModeProperty;
        isDesignMode =
            (bool)DependencyPropertyDescriptor.
                FromProperty(prop, typeof(FrameworkElement))
                      .Metadata.DefaultValue;
    }
}

Answer 2

You can use FallbackValue property to display something in design time as well. But this will also be the value at runtime if your binding fails.

<TextBox Text="{Binding MyText, FallbackValue='My Fallback Text'}"/>

Answer 3

You could use the DesignMode property to find out if you are at design time ( http://msdn.microsoft.com/en-us/library/c58hb4bw(vs.71).aspx )

There are further thoughts but no real conclusions on ways to do it at this question: What approaches are available to dummy design-time data in WPF?

Answer 4

You can wrap your content in another property and test if the value is empty. In that case return the fake value you want.

private string _content;
public string Content
{
    get
    { 
        if (_content != "") return _content;
        else return "FAKE";
    }
    set { _content= value; }
}