Why User controls don't load design time data

Question

In Visual Studio 2015 with latest updates installed, doing a project for Windows 10 UAP. I create a User Control like this:

<UserControl
x:Class="App3.CustomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
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>
    <GridView x:Name="gridView" ItemsSource="{Binding Elements}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Width="50" Height="50" Background="Bisque">
                    <TextBlock Text="{Binding}"/>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

</Grid>

Code Behind:

namespace App3{
public sealed partial class CustomControl : UserControl
{
    public CustomControl()
    {
        this.InitializeComponent();
        this.DataContext = new MainViewModel();
    }
}

}

MainViewModel

public class MainViewModel
{
    public List<int> Elements { get; set; }

    public MainViewModel()
    {
        Elements = Enumerable.Range(0, 100).ToList();
    }
}

I add that user control to the MainPage and I execute the app. I see 100 elements in the screen. Great! But since I cannot be executing and compiling millions of times I expect the design time data to help me.

When editing the UserControl I don't see anything! But when in the MainPage I see the elements being loaded.

I expect to see in the same UserControl the data being loaded since that's where I want to design, edit styles or load data.

Any help? Thanks.

score 2 · Answer 1 · answered Sep 28 '16 at 16:55

2

Another way to do it is to make use of the d:datacontext using:

  d:DataContext="{d:DesignInstance {x:Type local:MyViewModelSample},IsDesignTimeCreatable=True}">

That will reference a design-time only view model.

answered Sep 28 '16 at 16:55

Sage Pourpre

9,932
3
27
39

score 0 · Accepted Answer · answered Sep 28 '16 at 08:29

0

I expect to see in the same UserControl the data being loaded since that's where I want to design, edit styles or load data.

To do this you should set DataContext in xaml:

<UserControl.DataContext>
    <local:MainViewModel x:Name="viewmodel" />
</UserControl.DataContext>

and in the code behind of your CustomControl, remove the DataContext:

public CustomControl()
{
    this.InitializeComponent();
    //this.DataContext = new MainViewModel();
}

You can see it as bellow:

answered Sep 28 '16 at 08:29

Grace Feng

16,564
2
22
45

Hi Grace, It works, but just being curious. Should not the designer run the code after the InitializeComponent? If I put the not working UserControl inside another UserControl seting the datacontext in the constructor I'm able to see it also. – Fritjof Berggren Sep 28 '16 at 12:42
1

@FernandoUrkijoCereceda, if you put a `TextBox` in the layout, before the `InitializeComponent`, it can also be seen in the designer. What does `InitializeComponent` do? Find the [answer here](http://stackoverflow.com/questions/245825/what-does-initializecomponent-do-and-how-does-it-work-in-wpf). The controls can already be seen in the designer before Initialization, but here `GridView`, if it can't find the items, nothing will be shown. If you set the `DataContext` in the code behind, it can get only after building, this's why it can be seen if you set the `DataContext` where ever in xaml. – Grace Feng Sep 29 '16 at 01:24
Setting the usercontrol DataContext is considered bad practice, since you break the DataContext flow from parent controls. Instead, the DataContext should be set on an element inside the control, typically on the outermost (Grid, StackPanel, whatever) – Oyvind Jul 03 '19 at 18:42

Why User controls don't load design time data

2 Answers2