How to bind values from viewmodel to listview - xaml

Question

I have ViewModel with proporties and method to populate values:
public class MRateReportViewModel : HeaderViewModel
{
public ICommand ChangeReportPeriodCommand { get; }
public ICommand BackToHomePageCommand { get; }
public string Hashtag { get; set; }
public string Rating { get; set; }
public decimal? mTP { get; set; }
public string Image { get; set; }
public string Date { get; set; }
public DateTime MinimumDate { get; set; }
public DateTime MaximumDate { get; set; }
public DateTime PickedDate { get; set; }
public ObservableCollection<UserEventModel> UserEventsCollection { get; set; }
private UserEventsModel userEventsModel;
private ObservableCollection<EventTypeAtributtes> EventTypes;
public string EventType;
public List<String> EvtList { get; set; }
public MRateReportViewModel()
{
UserEventsCollection = new ObservableCollection<UserEventModel>();
userEventsModel = new UserEventsModel();
ChangeReportPeriodCommand = new Command((dailyOrTotal) => ChangeReportPeriod(dailyOrTotal.ToString()));
BackToHomePageCommand = new Command(() => BackToHomePage());
InitData();
}
private async void InitData()
{
ShowDialog();
userEventsModel = await EventService.GetEvents();
EventTypes = await EventService.GetEventType();
foreach (var item in userEventsModel.Events)
{
UserEventsCollection.Add(item);
}
HideDialog();
Page++;
}
}
By debugging I checked EventDetails methods and proporties get correct values.
In View I have page with ListView which I should populate with values from viewmodel:
<ListView ItemsSource="{Binding EventsList}"
CachingStrategy="RecycleElement"
x:Name="EventsDiary"
ItemAppearing="EventsDiary_ItemAppearing"
SelectionMode="None"
HasUnevenRows="True"
Margin="0,0,0,10">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<material:MaterialCard HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
CornerRadius="2"
Margin="10,0,10,15"
HeightRequest="178"
Padding="0"
BackgroundColor="#f4f4f4">
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
Grid.ColumnSpan="5"
Grid.Row="0"
BackgroundColor="{StaticResource CustomizedRedColor}"
CornerRadius="4"
Margin="0" />
<RelativeLayout Grid.Column="0"
Grid.Row="1"
Margin="10,10,0,0">
<controls:CircleImage HeightRequest="90"
WidthRequest="90"
Source="serpa1.png"
Aspect="AspectFill">
</controls:CircleImage>
<material:MaterialCard HeightRequest="30"
WidthRequest="30"
CornerRadius="50"
BackgroundColor="#525252"
Margin="0"
Padding="0"
Opacity="0.9">
<Label Text="1"
TextColor="White"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
</material:MaterialCard>
</RelativeLayout>
<StackLayout Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
Padding="0"
Margin="0"
Orientation="Vertical"
Spacing="0">
<Label Text="Ključne reči"
FontSize="18"
Margin="0,5,0,0"
TextColor="#03414e"
FontFamily="{StaticResource BalooBhai}" />
<Label Text="{Binding Hashtag}"
FontSize="12"
Margin="0"
VerticalOptions="StartAndExpand"
TextColor="#030303" />
This is part of xaml code. In this example I should bind Hashtag value but it just remain blank.
Here is my service for UserEventsModel:
public static async Task<UserEventsModel> GetEvents()
{
UserEventsModel userEventModel = new UserEventsModel();
try
{
//string url = UrlConstants.GET_USER_EVENTS;
string url = UrlConstants.USER_DIARY;
using (var client = new HttpClient())
{
client.DefaultRequestHeaders.TryAddWithoutValidation("Cookie", LocalDataHelper.RestoreCookie());
string content = Newtonsoft.Json.JsonConvert.SerializeObject(userEventModel);
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
using (var result = await client.PostAsync(url, new StringContent(content, Encoding.UTF8, "application/json")))
{
string resultContent = await result.Content.ReadAsStringAsync();
if (result.StatusCode == System.Net.HttpStatusCode.OK)
{
userEventModel = (UserEventsModel)JsonConvert.DeserializeObject<UserEventsModel>(resultContent);
}
}
}
}
catch (Exception ex)
{
throw;
}
return userEventModel;
}

Answer 1

Do your class or base class implements the INotifyPropertyChanged interface?
like this:
public abstract class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new
PropertyChangedEventArgs(propertyName));
}
}
public class YOURViewModel : BaseViewModel
{
private string _Hashtag;
public string Hashtag
{
get { return _Hashtag; }
set { _Hashtag = value; OnPropertyChanged(); }
}
}

Answer 2

According to your code, you want to bind ViewModel to ListView, firstly, you should need to know ListView is collection control, so you shoule bind collection to ListView's itemsource.
From your code, you want to use EventsList to bind ListView, but I don't see where you populate data into EventsList?
I see there is userEventsModel ViewModel, Events collection in this, but why you foreach this collection?
I change you Viewmodel to do one sample for you, please take a look:
public partial class Page9 : ContentPage
{
public ObservableCollection<UserEventModel> EventsList { get; set; }
public Page9 ()
{
InitializeComponent ();
//populate data in collection EventsList.
EventsList = new ObservableCollection<UserEventModel>()
{
new UserEventModel(){Hashtag="test1",Rating="test1",mTP=0, Image="test1",Date="test1"}
};
this.BindingContext = this;
}
}
public class UserEventModel
{
public string Hashtag { get; set; }
public string Rating { get; set; }
public decimal? mTP { get; set; }
public string Image { get; set; }
public string Date { get; set; }
}
The ListView is in Page 9,
<ListView ItemsSource="{Binding EventsList}"
CachingStrategy="RecycleElement"
x:Name="EventsDiary"
ItemAppearing="EventsDiary_ItemAppearing"
SelectionMode="None"
HasUnevenRows="True"
Margin="0,0,0,10">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<material:MaterialCard HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
CornerRadius="2"
Margin="10,0,10,15"
HeightRequest="178"
Padding="0"
BackgroundColor="#f4f4f4">
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
Grid.ColumnSpan="5"
Grid.Row="0" BackgroundColor="{StaticResource CustomizedRedColor}"
CornerRadius="4"
Margin="0" />
<RelativeLayout Grid.Column="0"
Grid.Row="1"
Margin="10,10,0,0">
<controls:CircleImage HeightRequest="90"
WidthRequest="90"
Source="serpa1.png"
Aspect="AspectFill">
</controls:CircleImage>
<material:MaterialCard HeightRequest="30"
WidthRequest="30"
CornerRadius="50"
BackgroundColor="#525252"
Margin="0"
Padding="0"
Opacity="0.9">
<Label Text="1"
TextColor="White"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
</material:MaterialCard>
</RelativeLayout>
<StackLayout Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
Padding="0"
Margin="0"
Orientation="Vertical"
Spacing="0">
<Label Text="Ključne reči"
FontSize="18"
Margin="0,5,0,0"
TextColor="#03414e"
FontFamily="{StaticResource BalooBhai}" />
<Label Text="{Binding Hashtag}"
FontSize="12"
Margin="0"
VerticalOptions="StartAndExpand"
TextColor="#030303" />
</StackLayout>
</Grid>
</material:MaterialCard>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
There are one article about bind to ListView, you can take a look:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/data-and-databinding
https://almirvuk.blogspot.com/2017/02/xamarinforms-listview-simple-mvvm.html