Text visible on VS 2015 designer when control's text field value is binded

Question

Whenever I bind text property to view model property

<TextBlock Text="{Binding SomeExampleText}"/>

on the designer I see nothing in the place where my text will appear in runtime. When I use x:Bind:

<TextBlock Text="{x:Bind ViewModel.SomeExampleText}"/>

on the designer I see "ViewModel.SomeExampleText", sometimes it does not display full length because of lacking space (if the binding path is too long).

Is there any way to have custom text displayed in designer just for preview instead of binding path or nothing as ashown above?

Answer 1

There are ways to create view models specifically for design time. The simplest approach is probably this:

<TextBlock Text="{x:Bind ViewModel.SomeExampleText, FallbackValue='Hello!'}"/>

That one shows the string "Hello" in the designer, both with Binding and x:Bind .

For Binding you can set the design-time data context something like this:

<Page
    ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="using:MyNameSpace.ViewModels"
    d:DataContext="{d:DesignInstance Type=viewModels:DesignTimeViewModel, IsDesignTimeCreatable=True}"
    mc:Ignorable="d">

The DesignTimeViewModel doesn't need any spcecific relation to your run-time view model; it only needs to have suitable properties with the same names. If you are binding to collections, this is probably your best bet.

Answer 2

Create a specific view model for the Design view in order to dial in the view's layout and style with realistic data that won't enter the run-time environment.

Since x:Bind looks to the code-behind for a strongly typed data source, you'll need to mimic that data binding path in the Design view. Here's one way:

Apply the d:DataContext attribute to your view set the Type property to your view. When "IsDesignTimeCreatable" is true, it'll create a new instance of your code-behind.

d:DataContext="{d:DesignInstance Type=local:MainPage,IsDesignTimeCreatable=True}" 

Your code-behind likely has a ViewModel property that can be set to a design-time state with fake data or a run-time state with real data.

This blog post shows an example: http://fast417.blogspot.com/2016/06/uwp-design-preview-with-xbind.html