Как связать значения из viewmodel в listview

Question

У меня есть ViewModel с пропорциями и метод для заполнения значений:

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++;
    }
}

Путем отладки я проверил методы EventDetails и пропорции получают правильные значения.В View у меня есть страница с ListView, которую я должен заполнить значениями из 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" />

Это часть кода xaml.В этом примере я должен связать значение Hashtag, но оно остается пустым.

Вот мой сервис для 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

Согласно вашему коду, вы хотите привязать ViewModel к ListView, во-первых, вы должны знать, что ListView - это управление коллекцией, поэтому вы должны связать коллекцию с источником данных ListView.

Из вашего кода вы хотитеиспользовать EventsList для привязки ListView, но я не вижу, где вы заполняете данные в EventsList?

Я вижу, что в этом есть userEventsModel ViewModel, коллекция событий, но почему вы создаете эту коллекцию?

Я изменю вам Viewmodel, чтобы сделать один образец для вас, пожалуйста, посмотрите:

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; }
}

ListView находится в 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>

Есть одна статья о привязке к ListView,Вы можете посмотреть:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/data-and-databinding

https://almirvuk.blogspot.com/2017/02/xamarinforms-listview-simple-mvvm.html

Answer 2

Реализует ли ваш класс или базовый класс интерфейс INotifyPropertyChanged?

следующим образом:

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(); }
        }
 }