DesignInstance not working properly help needed...

Question

Hi,

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>
</Grid>

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]}"

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!..

---

Code is like a box of chocolates!...

Answer 1

Check the format for setting the DataContext

See this: http://stackoverflow.com/questions/14275891/windows-store-app-design-time-datacontext

---

Best Regards,
Please remember to mark the replies as answers if they help

Answer 2

Thanks IssueKiller,

The only changes I made was I added the Binding and the Type:

d:DataContext="{Binding DefaultDataModel[0], Source={d:DesignInstance Type=designTimeData:MainPageViewModel, IsDesignTimeCreatable=True}}"

I can access other properties in my MainPageViewModel without the Binding property, but I can't get the ObservableDictionary : IObservableMap<string, object> mappings, so can I assume this can't be done?

I can do this at runtime in code and get the data I need:

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

Is there something that needs to be added to this class to make it available for design time?

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;
		}
	}
}

---

Code is like a box of chocolates!...

Answer 3

Cancel that!  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.

---

Code is like a box of chocolates!...