Design Time Windows Store App with JSON - json

Question

I am trying to create a windows store app using a Blank Windows 8 store App and can't get basic Design time working. I am obviously missing something simple, but with the research I have done don't see the difference
Here is my MainPage.xaml
<Page
x:Class="TestHubDataBinding.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestHubDataBinding"
xmlns:data="using:TestHubDataBinding.ViewModels"
xmlns:repo="using:TestHubDataBinding.Repo"
d:DataContext="{Binding Source={d:DesignData Source=Repo/VacationData.json, IsDesignTimeCreatable=True, Type=data:VacationViewModel}}"
xmlns:viewModel="using:TestHubDataBinding.Repo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Hub x:Name="MainHub" d:DataContext="{ Binding VacationViewModel[0], Source={d:DesignData Source=Repo/VacationData.json, IsDesignTimeCreatable=True, Type=repo:VacationDataSource}}">
<HubSection x:Name="VacationItemsSection" Width="500" Height="500" x:Uid="VacationItemsSection" Header="Vacations">
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping ="Wrap"
Text="{Binding VacationViewModel[0].Name, Mode=OneWay}" />
</Grid>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
Here is my View Model:
[DataContract]
public class VacationViewModel
{
[DataMember]
public string Name { get; set; }
[DataMember]
public List<string> VacationsList { get; set; }
}
Here is my JSON:
[
{
"Name":"Virginia Beach",
"VItems":
[
{
"Name":"Shorts (Plad)","Value":"2"
}
]
}
, {
"Name":"Orlando Florida",
"VItems":
[
{
"Name":"Shorts (Plad)","Value":"2"
}
]
}
]
And Here is my DataSource:
public class VacationDataSource
{
private readonly ObservableCollection<VacationViewModel> _vacations = new ObservableCollection<VacationViewModel>();
public ObservableCollection<VacationViewModel> Vacations
{
get { return _vacations; }
}
public async Task<TModel> ToObject<TModel>()
{
var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///DataModel/Repo/VacationData.json"));
var json = await FileIO.ReadTextAsync(file);
return Deserialize<TModel>(json);
}
public string ToJson<TObject>(TObject model)
{
return Serialize(model);
}
private static string Serialize<TObject>(TObject model, JsonSerializerSettings settings = null)
{
if (settings == null)
{
settings = new JsonSerializerSettings();
}
return JsonConvert.SerializeObject(model, settings);
}
private static TModel Deserialize<TModel>(string jsonString, JsonSerializerSettings settings = null)
{
if (settings == null)
{
settings = new JsonSerializerSettings();
}
return JsonConvert.DeserializeObject<TModel>(jsonString, settings);
}
}
It seems that the data will return for runtime, but design time just does not want to work.
Thanks