ReactiveUI Bindings
ReactiveUI offers a better design-time data system for solutions that use ReactiveUI type-safe bindings. this.Bind
methods family overwrite whatever has been put into XAML. If your XAML markup looks like this:
<TextBlock
x:Name="ExampleTextBlock"
Text="This is design time text" />
You'll see This is design time text
string in design time, that will be overridden by the code where binding magic happens at run time:
this.WhenActivated(disposable =>
{
// ReactiveUI will bind ExampleString ViewModel property
// to ExampleTextBlock.Text property (defined above)
this.Bind(ViewModel,
viewModel => viewModel.ExampleString,
view => view.ExampleTextBlock.Text)
.DisposeWith(disposable);
});
Regular Bindings
If you use regular bindings, or type-safe {x:Bind }
markup extension available on UWP, then you can import the d
directive and set design-time DataContext
. For the ease of use, you can extract an interface from your ViewModel and create two implementations for it, one implementation would display design-time data only, and another one would be your actual view model. See an example.
Views.AboutView.xaml
<Page x:Class="MyCoolApp.UWP.Views.AboutView"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:designTime="using:MyCoolApp.UWP.DesignTime"
d:DataContext="{d:DesignInstance designTime:DesignTimeAboutViewModel,
IsDesignTimeCreatable=True}"
d:DesignHeight="600"
d:DesignWidth="600">
<!-- Page Content -->
</Page>
Interfaces.IAboutViewModel.cs
public interface IAboutViewModel : INotifyPropertyChanged
{
IEnumerable<AboutSection> AboutSections { get; set; }
ReactiveCommand<AboutFeed> RefreshCommand { get; set; }
}
DesignTime.DesignTimeAboutViewModel.cs
public class DesignTimeAboutViewModel : IAboutViewModel
{
public DesignTimeAboutViewModel()
{
AboutSections = new List<AboutSectionViewModel>
{
new AboutSection {Title = "Title 1", Body = "Lorum Ipsum"},
new AboutSection {Title = "Title 2", Body = "Lorum Ipsum"},
new AboutSection {Title = "Title 3", Body = "Lorum Ipsum"}
});
RefreshCommand = ReactiveCommand.CreateFromTask(o => Task.FromResult(new AboutFeed()));
}
/* Properties and commands are deliberately omitted */
}
ViewModels.AboutViewModel.cs
public class AboutViewModel : ReactiveObject, IAboutViewModel
{
/* Actual interface implementation */
}