DesignInstance not working properly help needed

Question

I'm using a

public class ObservableDictionary : IObservableMap<string, object>

..to bind to in my XAML for design time data. I'm using the same ObservableDictionary class that's created when you create a default Windows Store App. My MainPage uses

public partial class MainPageViewModel : ViewModels.IMainPageViewModel 
{
public ObservableCollection<Models.HubSection> HubSections { get; set; }
public ObservableCollection<ViewModels.IWritingItemViewModel> Writings { get; set; }

private readonly ObservableCollection<Models.ObservableDictionary> defaultDataModel;
public ObservableCollection<Models.ObservableDictionary> DefaultDataModel
{
    get { return this.defaultDataModel; }
}

Models.ObservableDictionary hub = new Models.ObservableDictionary();

public MainPageViewModel()
{
    this.defaultDataModel = new ObservableCollection<Models.ObservableDictionary>();
    this.GetHubSections();
    this.GetWritings();
    this.DefaultDataModel.Add(hub);
}

private void GetHubSections()
{
    var hubSections = DesignTimeData.Factory.GenHubSections();
    this.HubSections = new ObservableCollection<Models.HubSection>();

    foreach (var section in hubSections)
    {
        this.HubSections.Add(section);
    }

    Models.ObservableDictionary hub = new Models.ObservableDictionary();
    hub["HubSections"] = this.HubSections;
}

private void GetWritings()
{
    var writings = DesignTimeData.Factory.GenWritings();
    this.Writings = new ObservableCollection<ViewModels.IWritingItemViewModel>();
    var viewmodels = writings.Select((x, i) => new WritingItemViewModel
    {
        Writing = x,
        VariableItemSize = Common.VariableItemSizes.Normal
    });

    this.Writings.AddRange(viewmodels);
    Models.ObservableDictionary hub = new Models.ObservableDictionary();
    hub["Writings"] = this.Writings;

    if (viewmodels.Any())
    {
        SelWriting = viewmodels.First();
    }
}
}

The manually coded data is from

public static class Factory
{
public static IEnumerable<Models.HubSection> GenHubSections()
{
    foreach (var hubSection in CreateHubSection())
    {
        yield return hubSection;
    }
}

private static ObservableCollection<Models.HubSection> CreateHubSection()
{
    var writing = new ObservableCollection<Models.HubSection>
    {
#region HubSections

        new Models.HubSection
        {
            UniqueId = "A6C99BE9-3DE5-4625-A763-55623D8CDA55",
            Name = "WritingsHubSection",
            IsHeaderInteractive = false,
            ContentTemplate = "SectionWritingsTemplate",
            HeaderTemplate = "",
            Header = "WRITINGS",
            ImagePath = "ms-appx:///Assets/StoreLogo.scale-180.png",
        },
        new Models.HubSection
        {
            UniqueId = "A6C99BE9-3DE5-4625-A763-55623D8CDA22",
            Name = "SenarioHubSection",
            IsHeaderInteractive = false,
            ContentTemplate = "SectionSenarioTemplate",
            HeaderTemplate = "",
            Header = "SENARIOS",
            ImagePath = "ms-appx:///Assets/StoreLogo.scale-180.png",
        }

#endregion
    };

    return writing;
}
}

In my XAML I use

d:DataContext="{d:DesignInstance designTimeData:MainPageViewModel, IsDesignTimeCreatable=True}">

..for instantiation of the class to create the design time data for my MainPage

<Grid Background="{ThemeResource AppBackground}"
  d:DataContext="{Binding DefaultDataModel[0]}"
  DataContext="{Binding DefaultDataModel[0]}">
<Hub Margin="0,40,0,0">
    <HubSection MinWidth="{Binding Width, Source={StaticResource WritingsSize}}"
                Header="WRITINGS"
                x:Name="WritingsHubSection">
        <DataTemplate>
            <ListView
                x:Name="itemGridView"
                ItemsSource="{Binding HubSections}"
                Margin="-9,-14,0,0"
                SelectionMode="Single">
                <ListView.ItemTemplate>
                    <DataTemplate >
                        <Grid Height="250" Width="310" Margin="5,10,5,10" Background="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="150">
                                <Image Source="{Binding ImagePath}" />
                            </Border>
                            <StackPanel Grid.Row="1" Margin="0,10,0,0">
                                <TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                                <TextBlock Text="{Binding Header}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </DataTemplate>

    </HubSection>
</Hub>

This code will be normally use to create HubSections in a Custom Hub Control by Diederik Krols "Using the Windows 8.1 Hub as an ItemsControl", but I couldn't get it to work, so I reduced the XAML down to just a ListView to see if I can work out the problem. As of now when I run the App the ListView display the data.

But, when I remove

d:DataContext="{Binding DefaultDataModel[0]}"
DataContext="{Binding DefaultDataModel[0]}"

Addition: I've made some change after reading "Windows Store App Design-time DataContext" by Luke Pulpit, because we have the same issue. I added the Binding and Type properties, but I get the same results.

To make this issue more clear is my problem is with ObservableDictionary : IObservableMap class as to why I can't bind to the mappings for design time data.

public class ObservableDictionary : IObservableMap<string, object>
{
private class ObservableDictionaryChangedEventArgs : IMapChangedEventArgs<string>
{
    public ObservableDictionaryChangedEventArgs(CollectionChange change, string key)
    {
        this.CollectionChange = change;
        this.Key = key;
    }

    public CollectionChange CollectionChange { get; private set; }
    public string Key { get; private set; }
}

private Dictionary<string, object> _dictionary = new Dictionary<string, object>();
public event MapChangedEventHandler<string, object> MapChanged;

private void InvokeMapChanged(CollectionChange change, string key)
{
    var eventHandler = MapChanged;
    if (eventHandler != null)
    {
        eventHandler(this, new ObservableDictionaryChangedEventArgs(change, key));
    }
}

public void Add(string key, object value)
{
    this._dictionary.Add(key, value);
    this.InvokeMapChanged(CollectionChange.ItemInserted, key);
}

public void Add(KeyValuePair<string, object> item)
{
    this.Add(item.Key, item.Value);
}

public bool Remove(string key)
{
    if (this._dictionary.Remove(key))
    {
        this.InvokeMapChanged(CollectionChange.ItemRemoved, key);
        return true;
    }
    return false;
}

public bool Remove(KeyValuePair<string, object> item)
{
    object currentValue;
    if (this._dictionary.TryGetValue(item.Key, out currentValue) &&
        Object.Equals(item.Value, currentValue) && this._dictionary.Remove(item.Key))
    {
        this.InvokeMapChanged(CollectionChange.ItemRemoved, item.Key);
        return true;
    }
    return false;
}

public object this[string key]
{
    get
    {
        return this._dictionary[key];
    }
    set
    {
        this._dictionary[key] = value;
        this.InvokeMapChanged(CollectionChange.ItemChanged, key);
    }
}

public void Clear()
{
    var priorKeys = this._dictionary.Keys.ToArray();
    this._dictionary.Clear();
    foreach (var key in priorKeys)
    {
        this.InvokeMapChanged(CollectionChange.ItemRemoved, key);
    }
}

public ICollection<string> Keys
{
    get { return this._dictionary.Keys; }
}

public bool ContainsKey(string key)
{
    return this._dictionary.ContainsKey(key);
}

public bool TryGetValue(string key, out object value)
{
    return this._dictionary.TryGetValue(key, out value);
}

public ICollection<object> Values
{
    get { return this._dictionary.Values; }
}

public bool Contains(KeyValuePair<string, object> item)
{
    return this._dictionary.Contains(item);
}

public int Count
{
    get { return this._dictionary.Count; }
}

public bool IsReadOnly
{
    get { return false; }
}

public IEnumerator<KeyValuePair<string, object>> GetEnumerator()
{
    return this._dictionary.GetEnumerator();
}

System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
    return this._dictionary.GetEnumerator();
}

public void CopyTo(KeyValuePair<string, object>[] array, int arrayIndex)
{
    int arraySize = array.Length;
    foreach (var pair in this._dictionary)
    {
        if (arrayIndex >= arraySize) break;
        array[arrayIndex++] = pair;
    }
}
}

I can do this in code during run-time and get the results I need,

var w = this.DefaultDataModel[0];
ObservableCollection<Models.HubSection> hubSections = w["HubSections"] as ObservableCollection<Models.HubSection>;

but not for design time data when I do this:

d:DataContext="{Binding DefaultDataModel[0], Source={d:DesignInstance Type=designTimeData:MainPageViewModel, IsDesignTimeCreatable=True}}"
...
..
ListView x:Name="itemGridView"  ItemsSource="{Binding HubSections}"

It displays the data as well as when I run the App and I don't get any warnings nor errors. Any help would be appreciated!

Thanks!...

Answer 1

Well this is not the answer to the issue, but after doing more research I finally realize I was tying to be too technical and at the same time not fully understanding the use of design time data.

Its the results of the display I should be really looking for and not how I get the data.

Apologize for the wasted post!...