As explained before, when you navigate to a ViewModel object, Zebble will try to locate a View definition that provides a template for your view model.

If it finds one, then the view object is instantiated and binded to the view model, before the navigation starts.

However, if you have not defined any view or template for a given page (view model) then Zebble will generate one for you automatically!

Example

Let's say you have defined the following view model in your project, but have not defined a view for it yet.

class ShoesPage : FullScreen
{
      public Bindable<DateTime> Date = new(LocalTime.Today);
      public Bindable<string> Tomorrow => Date.Get(x => x.AddDays(1).ToString("dd MMM yyyy"));

     public void SayHi()=> Dialog.Alert("Hi");
     
      public readonly CollectionViewModel<Item> Items = new();

      protected override void NavigationStarted()
      {
            var shoes = Enumerable.Range(1, 4).Select(v => new Domain.Shoe { Brand = "Shoe " + v }).ToArray();
            Items.Add(shoes);
      }

      public class Item : ViewModel<Domain.Shoe>
      {
            public Bindable<string> Brand => Source.Get(x => x.Brand);
            public Bindable<string> ImageUrl => Source.Get(x => x.ImageUrl);            

            public void Tap()
            {
                Forward<ShoePage>(x => x.Source(Source));
                // Which is equivalent to: 
                // The<ShoePage>().Source.Set(Source);
                // Forward<ShoePage>();
            }
      }
}

For the above view model, Zebble will automatically show the following UI. Please note that:

• It shows a title at the top of the page, showing the view model class name as plain English
• For each bindable member, it shows a label/value pair
• For each method it shows a button to invoke it
• For each nested view model (such as for list items) it recursively renders the above (lists are cut down to a maximum of 4 items)

In a future version, we will add the ability to customise it on the fly, and then generate the markup code for it to paste into the application and then customise!