Visual Studio does not show design data

Question

im currently trying to integrate design data in my UWP app. I've followed for this approach the steps from microsoft: https://docs.microsoft.com/en-us/windows/uwp/data-binding/displaying-data-in-the-designer

My problem: The data will not show up. Only the names of the bindings:

But I expect a result more like this: (Older version, screen from runtime)

So how I've implemented it?
I decided to use a "DesignInstance", because there is already a ViewModel which will be later used anyway (wich works currently fine at runtime).

Because of this, my "MockupViewModel" inherits from the original ViewModel and creates imaginary values in the default constructor:

public class MockupModel
    : WeatherViewModel
{
    public MockupModel() : base()
    {
        Random Randomizer = new Random();

        CurrentData.PrecipitationIcon = WeatherUnicodeIconLib.Neutral.Snow;
        CurrentData.PrecipitationValue = 0.234;
        CurrentData.SunRiseSetIcon = WeatherUnicodeIconLib.Miscellaneous.SunRise;
        CurrentData.SunRiseSetTime = DateTime.Now;
        CurrentData.TemperatureUnitIcon = WeatherUnicodeIconLib.Miscellaneous.Celsius;
        CurrentData.TemperatureValue = -20.75;
        CurrentData.WeatherStatusDescription = "lorem ipsum";
        CurrentData.WeatherStatusIcon = OpenWeatherMapUnicodeStatusIconAdapter.GetStandardIconUnicode(200);
        CurrentData.WindDirectionDegrees = 240.7;
        CurrentData.WindSpeedIcon = WeatherUnicodeIconLib.GetBeaufortScaleIcon(3);

        for (int i = 0; i < 7; i++)
        {
            DailyForecastViewModel NewForecastItem = new DailyForecastViewModel();

            NewForecastItem.Day = DateTime.Now;
            NewForecastItem.TemperatureValue = Randomizer.Next(-30, 30);
            NewForecastItem.WeatherSatusIcon = OpenWeatherMapUnicodeStatusIconAdapter.GetStandardIconUnicode(300);
            NewForecastItem.WindSpeedIcon = WeatherUnicodeIconLib.GetBeaufortScaleIcon(Randomizer.Next(0, 12));

            DailyForecast.Add(NewForecastItem);
        }
    }
}

After that, the MockupViewModel has been added to the XAML code:
(Have a look to the last line of the UserControl header / tag)

<UserControl
x:Class="WeatherControl.WeatherControl"
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"
xmlns:vm="using:WeatherControl.ViewModel"
d:DataContext="{d:DesignInstance Type=vm:MockupModel, IsDesignTimeCreatable=True}">

<UserControl.Resources>
    <SolidColorBrush x:Key="FontColor">White</SolidColorBrush>
    <x:Double x:Key="MainInfoFontSize">90</x:Double>

    <Style TargetType="TextBlock">
        <Setter Property="FontFamily" Value="{StaticResource WeatherIcons}"/>
        <Setter Property="Foreground" Value="{StaticResource FontColor}"/>
        <Setter Property="FlowDirection" Value="LeftToRight"/>
        <Setter Property="FontSize" Value="30"/>
    </Style>
</UserControl.Resources>

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel
        HorizontalAlignment="Stretch"
        Padding="20">

        <StackPanel
            HorizontalAlignment="Stretch"
            Orientation="Horizontal"
            FlowDirection="RightToLeft">
            <TextBlock
                x:Name="SunSetRiseTime"
                Text="{Binding Path=CurrentData.SunRiseSetTime}"/>
            <TextBlock
                x:Name="SunSetRiseIcon"
                Text="{Binding Path=CurrentData.SunRiseSetIcon}"
                Margin="10,0,30,0"/>

            <TextBlock
                x:Name="WindDirectionIcon"
                Text="&#xf0b1;"
                RenderTransformOrigin="0.5 0.5">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="{Binding Path=CurrentData.WindDirectionDegrees}"/>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock
                x:Name="WindBeaufortScaleIcon"
                Text="{Binding Path=CurrentData.WindSpeedIcon}"
                Margin="10,0,30,0"/>

            <TextBlock
                x:Name="PrecipitationIcon"
                Text="{Binding Path=CurrentData.PrecipitationIcon}"
                RenderTransformOrigin="0.5 0.5"/>
            <TextBlock
                x:Name="PrecipitationIconValue"
                Text="{Binding Path=CurrentData.PrecipitationValue}"
                Margin="10,0,20,0"/>
        </StackPanel>

        <StackPanel
            x:Name="MainInfos"
            HorizontalAlignment="Stretch"
            Orientation="Horizontal"
            FlowDirection="RightToLeft">
            <TextBlock
                x:Name="TemperatureUnitIcon"
                Text="{Binding Path=CurrentData.TemperatureUnitIcon}"
                FontSize="{StaticResource MainInfoFontSize}"
                Margin="0,0,10,0"/>
            <TextBlock
                Name="TemperatureValue"
                Text="{Binding Path=CurrentData.TemperatureValue}"
                FlowDirection="LeftToRight"
                FontSize="{StaticResource MainInfoFontSize}"
                Margin="0,0,40,0"/>
            <TextBlock
                x:Name="WeatherStatusIcon"
                Text="{Binding Path=CurrentData.WeatherStatusIcon}"
                FontSize="{StaticResource MainInfoFontSize}"/>
        </StackPanel>

        <TextBlock
                x:Name="WeatherDescription"
                Text="{Binding Path=CurrentData.WeatherStatusDescription}"
                TextAlignment="Right"
                Margin="0,0,0,20"/>

        <ListBox
            x:Name="DailyForecasts"
            HorizontalAlignment="Stretch"
            FlowDirection="RightToLeft"
            Background="Transparent"
            ItemsSource="{Binding Path=DailyForecast}">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Padding" Value="0"/>

                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel
                        x:Name="ForecastDay"
                        Orientation="Horizontal"
                        HorizontalAlignment="Stretch">
                        <TextBlock
                            x:Name="WindSpeed"
                            TextAlignment="Left"
                            Text="{Binding Path=WindSpeedIcon}"
                            Width="70"/>
                        <TextBlock
                            x:Name="Temperature"
                            TextAlignment="Right"
                            Text="{Binding Path=TemperatureValue}"
                            Width="60"/>
                        <TextBlock
                            x:Name="WeatherIcon"
                            TextAlignment="Center"
                            Text="{Binding Path=WeatherSatusIcon}"
                            Width="100"/>
                        <TextBlock
                            x:Name="DayName"
                            TextAlignment="Left"
                            Text="{Binding Path=Day}"
                            Width="70"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</StackPanel>

You can also check out my project on github for more detailed code: https://github.com/Wasserwecken/SmartMirror

I hope you can help me here and thanks in advance!!!

Answer 1

I hit the answer, by random.

• After setting platform to "x86" (x64 does not work)
• and enabling "project code" (Regarding to the answer from Mikael Koskinen)
• Moving my "MockupModel" to the same namespace as the UserControl (Regarding to https://stackoverflow.com/a/17484110/3885480)
  
• I set the configuration to "Release"
  
  --> It worked!

So i checked my project settings to figure out why, and compared the configurations
(Release / Debug)

• After checking "Optimize Code" (For the Debug configuration)
• and rebuilding (important)
  
  
• --> there was no "Invalid Markup" anymore
• --> and the MockupModel with his data showed up correctly!

This works for me in "VS 2015 Comminity Update3" and "VS 2017 RC"

Answer 2

The solution is to make sure you are using x86 configuration and then to click the button called "Enable project code" in Visual Studio:

More information from these two locations:

1) "MSDN: Debugging or Disabling Project Code in XAML Designer"

Disabling project code can lead to a loss of design time data. An alternative is to debug the code running in the designer.

2) Enabling / Disabling design data in Visual Studio 2015 Update 1

In the case where the button is disabled, you can still edit the UI somehow, because the name of the property will be shown, and you can at least set the font, font size, foreground color etc, which is better than nothing.

Unfortunately Visual Studio 2015's designer is quite buggy so you may end up with the same issue as I did: Visual Studio will complain about "Invalid Markup" when you switch to x86. Blend for Visual Studio has the same button and you can try that or VS2017 RC if that doesn't help.