Xamarin XAML Previewer Design Data Bindings - xaml

Question

I am trying to set up a Design Time Data binding in a Xamarin XAML page so I can utilise the previewer to design my page more quickly. I have set up a static class which contains my data, but when I preview it does not show me the bound data.
How do I get the binding to work? I am trying it with the Test property
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TechsportiseApp.Data;assembly=DesignTimeData"
BindingContext="{x:Static local:DesignTimeData.ViewModel}"
x:Class="TechsportiseApp.Views.Timer" x:Name="ParentView" Title="Timer">
<Entry Margin = "3" Text="{Binding Test}" />
</ContentPage>
DesignTimeData.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using TechsportiseApp.Models;
namespace TechsportiseApp.Data
{
public class DesignTimeData
{
public static class ViewModelLocator
{
private static TimerViewModel timerVM;
public static TimerViewModel ViewModel => timerVM ?? (timerVM = new TimerViewModel());
public class TimerViewModel
{
public ObservableCollection<Timing> Timings { get; set; } = new ObservableCollection<Timing>
{
new Timing { Position = 1, BatchCode = "A", Elapsed = "01:02:03.001", EndTime = DateTime.Now, StartTime = DateTime.Now, Id = 1, RaceId = 111 }
};
public List<RaceOption> RaceOptions { get; set; } = new List<RaceOption>
{
new RaceOption { Id = 1, RaceId = 2, Colour= "Red", OptionName="5k" },
new RaceOption { Id = 3, RaceId = 4, Colour= "Blue", OptionName="10k" },
new RaceOption { Id = 5, RaceId = 6, Colour= "Green", OptionName="15k" },
new RaceOption { Id = 5, RaceId = 8, Colour= "Yello", OptionName="20k" },
};
public string Test = "Bind Test";
}
}
}
}

Answer 1

public class TimerViewModel
{
private string _test = "Bind Test";
public string Test
{
get
{
return _test;
}
set
{
value = _test;
//implement your INotifyOnPropertyChangedHere...
}
}
/// the rest of your view model code
}

Answer 2

It looks like you have not properly defined your class. Change the below structure
From
namespace TechsportiseApp.Data
{
public class DesignTimeData
{
public static class ViewModelLocator
{
private static TimerViewModel timerVM;
public static TimerViewModel ViewModel => timerVM ?? (timerVM = new TimerViewModel());
public class TimerViewModel
{
public ObservableCollection<Timing> Timings { get; set; } = new ObservableCollection<Timing>
{
new Timing { Position = 1, BatchCode = "A", Elapsed = "01:02:03.001", EndTime = DateTime.Now, StartTime = DateTime.Now, Id = 1, RaceId = 111 }
};
public List<RaceOption> RaceOptions { get; set; } = new List<RaceOption>
{
new RaceOption { Id = 1, RaceId = 2, Colour= "Red", OptionName="5k" },
new RaceOption { Id = 3, RaceId = 4, Colour= "Blue", OptionName="10k" },
new RaceOption { Id = 5, RaceId = 6, Colour= "Green", OptionName="15k" },
new RaceOption { Id = 5, RaceId = 8, Colour= "Yello", OptionName="20k" },
};
public string Test = "Bind Test";
}
}
}
}
To
namespace TechsportiseApp.Data
{
public class DesignTimeData
{
private static TimerViewModel timerVM;
public static TimerViewModel ViewModel => timerVM ?? (timerVM = new TimerViewModel());
public class TimerViewModel
{
public ObservableCollection<Timing> Timings { get; set; } = new ObservableCollection<Timing>
{
new Timing { Position = 1, BatchCode = "A", Elapsed = "01:02:03.001", EndTime = DateTime.Now, StartTime = DateTime.Now, Id = 1, RaceId = 111 }
};
public List<RaceOption> RaceOptions { get; set; } = new List<RaceOption>
{
new RaceOption { Id = 1, RaceId = 2, Colour= "Red", OptionName="5k" },
new RaceOption { Id = 3, RaceId = 4, Colour= "Blue", OptionName="10k" },
new RaceOption { Id = 5, RaceId = 6, Colour= "Green", OptionName="15k" },
new RaceOption { Id = 5, RaceId = 8, Colour= "Yello", OptionName="20k" },
};
public string Test = "Bind Test";
}
}
}
This should resolve your issue