How to preview a ListView using Xamarin.Forms xaml editor

user_5466997 0
Viewed 1700

I'm implementing a ListView in Xamarin.Forms with custom cells, but I can't see what I'm doing since the preview shows an empty list and re-building every time is simple too time consuming. I can't even see a simple TextCell..

How can I see the preview of my cells in the editor? This is my xaml:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyNamespace"
    x:Class="MyNamespace.MyAppPage">
<ContentPage.Content>

    <ListView x:Name="myList">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="Preview?" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage.Content>

Note: I am using Visual Studio 2017 for Mac.

2nd Part

OK so I tried using BindingContext but I don't understand well the usage of this property. This is my updated XAML:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyNamespace;assembly:MyNamespace"
    BindingContext="{x:Static local:MusicSeed.Model}"
    x:Class="MyNamespace.MyAppPage">

    <ContentPage.Content>

        <ListView ItemsSource="{Binding Tracks}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </ContentPage.Content>

</ContentPage>

And this is where I have the data, MusicSeed.cs:

namespace MyNamespace
{
    public static class MusicSeed
    {
        public static readonly MusicSeedModel Model = new MusicSeedModel();  
    }

    public class MusicSeedModel
    {
        public readonly MusicTrack[] Tracks =
        {
            new MusicTrack("Track 01"),
            new MusicTrack("Track 02"),
            new MusicTrack("Track 03"),
            new MusicTrack("Track 04"),
        }; 
    }
}

The result is this error thrown by the XAML editor:

No static member found for local:MusicSeed.Model

I tried changing Tracks as static but nothing changed. Also rebuilt the solution, the error disappeared but the preview is still empty. What am I missing here?

visual-studio-2017 xamarin.forms xamarin xaml
2 Answers

You will have to provide some kind of BindingContext for rows to be rendered during design time. There is an awesome article by James Montemagno that explains how to do just that.

Another recommended article to refer would be this one on Xamarin Help

enter image description here

EDIT 1:

Your XAML is correct, but the view-model is wrong. You can only bind to properties. Try changing you declaration to following: 

namespace MyNamespace
{
    public class MusicSeed
    {
        public static MusicSeedModel Model { get; } = new MusicSeedModel();
    }

    public class MusicSeedModel
    {
        public MusicTrack[] Tracks { get; } =
            {
                new MusicTrack("Track 01"),
                new MusicTrack("Track 02"),
                new MusicTrack("Track 03"),
                new MusicTrack("Track 04"),
            };
    }

    public class MusicTrack
    {
        public string Name { get; }

        public MusicTrack(string v)
        {
            this.Name = v;
        }
    }
}
user_72927720

You can't. If you are using MVVM framework, your code still needs to be generated / Build.

An Alternative is to use Xamarin Live Player Which Can Build Lists On your actual device for android and ios

FYI: Currently while answering this questions it's on Alpha

user_17525620
Related