Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Xamarin Carousel not binding to ViewModel

I've got a Carousel page, where I use a XAML page as the template, however, while static text works fine, binding that page to a ViewModel, doesn't show my data correctly on the page:

My Carousel XAML page:

<?xml version="1.0" encoding="utf-8" ?>

<CarouselPage.ItemTemplate>


</CarouselPage.ItemTemplate>

Code behind:

using TestProject.ViewModels.Budget;
using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TestProject.Views.Budget
{
public partial class CustomerListPage : CarouselPage
{
public int CurrentIndex;

    public CustomerListPage()
    {
        InitializeComponent();

        ItemTemplate = new DataTemplate(typeof(CustomerListItemPage));

        ItemsSource = new ObservableCollection<ContentPage>
        {
            new CustomerListItemPage(){BindingContext = new CustomerListItemViewModel(DateTime.Now) },
            new CustomerListItemPage(){BindingContext = new CustomerListItemViewModel(DateTime.Now.AddMonths(-1)) },
            new CustomerListItemPage(){BindingContext = new CustomerListItemViewModel(DateTime.Now.AddMonths(-2)) },
            new CustomerListItemPage(){BindingContext = new CustomerListItemViewModel(DateTime.Now.AddMonths(-3)) },
        };
    }
}

}

My template page:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage.Content>

        <Label  Text="{Binding CurrentDate}" VerticalOptions="Start" HorizontalOptions="Center" BackgroundColor="Red" />
    </StackLayout>
</ContentPage.Content>

My ViewModel:

using System;

namespace TestProject.ViewModels.Budget
{
public class CustomerListItemViewModel : SyncableViewModel
{
private string currentDate { get; set; }

    public string CurrentDate
    {
        get
        {
            return currentDate;
        }

        set
        {
            currentDate = value;
            OnPropertyChanged(nameof(CurrentDate));
        }
    }

    public CustomerListItemViewModel(DateTime date)
    {
        CurrentDate = date.ToString();
    }
}

}
I thought I had everything wired up correctly, however, when I go to the carousel, the CurrentDate field is not showing up at all, even though when debugging, it is setting it correctly in the ViewModel.

Tagged:

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    You have set the wrong ItemsSource. For a CarouselPage, ItemsSource is each template child page's binding context. So modify your CarouselPage like:

    public class CustomerListPage : CarouselPage
    {
        public CustomerListPage ()
        {
            ItemTemplate = new DataTemplate(typeof(CustomerListItemPage));
    
            ItemsSource = new ObservableCollection<CustomerListItemViewModel>
            {
                new CustomerListItemViewModel(DateTime.Now),
                new CustomerListItemViewModel(DateTime.Now.AddMonths(-1)),
                new CustomerListItemViewModel(DateTime.Now.AddMonths(-2)),
                new CustomerListItemViewModel(DateTime.Now.AddMonths(-3))
            };
        }
    }
    
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Or just use CarouselView

    e.g. https://github.com/AndreiMisiukevich/CardView

Sign In or Register to comment.