In my Xamarin app, I'm using a ListView to display phone numbers as well as other data for vendors.
The view model I use for this page looks like this:
public class VendorProfileViewModel : BaseViewModel
{
public LayoutState _mainState;
ContactModel contact;
public VendorProfileViewModel()
{
Title = string.Empty;
IsBusy = true;
MainState = LayoutState.Loading;
}
public LayoutState MainState
{
get => _mainState;
set => SetProperty(ref _mainState, value);
}
public ContactModel Contact
{
get => contact;
set
{
if (contact == value)
return;
contact = value;
OnPropertyChanged();
}
}
public async void Init(Guid id)
{
Contact = await MyApi.GetContact(123);
IsBusy = false;
MainState = LayoutState.None;
}
}
And I have a public List<PhoneNumber> PhoneNumbers { get; set; } property in the ContactModel class.
In my XAML page, I'm trying to bind items to PhoneNumbers like this:
<ListView
ItemSource={Binding Contact.PhoneNumbers}>
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text={Binding PhoneNumber} />
</DateTemplate>
</ListView.ItemTemplate>
</ListView>
I'm getting an error that states that the PhoneNumber property was not found in view model.
How do I bind to property of a subclass of my view model in a ListView?
Related
Oke here is the context: I have a Xamarin Application that connects to ASP.NET rest service. Currently I am working on the databinding on my views
There is a certain Data model called prestatie which has a foreingn Key Reference to the Trainer model class and another that foreign key reference to the Getuigschrift Class.
public class Prestatie : INotifyPropertyChanged
{
[Key]
private Guid _PrestatieID;
public Guid PrestatieID
{
get => _PrestatieID;
set
{
_PrestatieID = value;
RaisePropertyChanged(nameof(PrestatieID));
}
}
private string _Rekeningnummer;
public string Rekeningnummer
{
get => _Rekeningnummer;
set
{
_Rekeningnummer = value;
RaisePropertyChanged(nameof(Rekeningnummer));
}
}
private string _Rijksregisternummer;
public string Rijksregisternummer
{
get => _Rijksregisternummer;
set
{
_Rijksregisternummer = value;
RaisePropertyChanged(nameof(Rijksregisternummer));
}
}
[ForeignKeyAttribute("Trainer")]
public Guid? TrainerID
{
get;
set;
}
public Trainer Trainer
{
get;
set;
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Trainer Class:
public class Trainer : Persoon
{
private Guid _TrainerID;
public Guid TrainerID
{
get => _TrainerID;
set
{
_TrainerID = value;
RaisePropertyChanged(nameof(TrainerID));
}
}
public ICollection<Prestatie> Prestaties
{
get;
set;
}
public Getuigschrift Getuigschriften
{
get;
set;
}
private Guid _GetuigschriftID;
public Guid? GetuigschriftID
{
get => _GetuigschriftID;
set
{
_GetuigschriftID = (Guid)value;
RaisePropertyChanged(nameof(GetuigschriftID));
}
}
}
Now I got two ViewModels setup fto represent this data, one for an overview and the second for the Details/Editing/adding. Databinding of items is on the viewmodels, so in Theory I should make these relations up in my view models but I am uncertain on how to do this. At one hand I just need to have some labels back in the ItemViewModel, and the other hand I need sort of comobox/list/picker for the data input to just get the Foregin Key.
Solutions I have tried it something like this, but that does not seem to work.
Xamarin ListView MVVM DataBinding
Here is a small snippet of my viewmodels, I cant post more because of the character limit.
public class PrestatieViewModel : BaseViewModel
{
private ObservableCollection<Prestatie> _prestaties;
private readonly IPrestatieDataService _prestatieDataService;
private readonly INavigationService _navigationService;
public ObservableCollection<Prestatie> Prestaties
{
get => _prestaties;
set
{
_prestaties = value;
OnPropertyChanged("Prestaties");
}
}
public class PrestatieDetailViewModel : BaseViewModel
{
private Prestatie _selectedPrestatie;
private readonly IPrestatieDataService _prestatieDataService;
private readonly INavigationService _navigationService;
public Prestatie SelectedPrestatie
{
get => _selectedPrestatie;
set
{
_selectedPrestatie = value;
OnPropertyChanged(nameof(SelectedPrestatie));
}
}
You can bind the picker's selectedItem with trainer so you could pick and set the value.
Here are the code you could refer to
xmal:
<ContentPage.BindingContext>
<local:PeopleViewModel/>
</ContentPage.BindingContext>
<CollectionView x:Name="mycol">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="100,* "
RowDefinitions="*,*">
<Label Text="{Binding Name}" BackgroundColor="LightBlue"/>
<Picker x:Name="mypicker" Grid.Column="1" Title="Select a Trainer"
TitleColor="Red"
ItemsSource="{Binding pgs}"
ItemDisplayBinding="{Binding Name}"
SelectedItem="{Binding Trainer}">
</Picker>
<Label Text="Trainer:" Grid.Row="1" Grid.Column="0" BackgroundColor="AliceBlue"/>
<Label
Grid.Row="1"
Grid.Column="1"
Text="{Binding Trainer.Name}"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
viewmodel:
public class PeopleViewModel:INotifyPropertyChanged
{
string name;
People trainer;
public List<People> pgs { get; private set; } = new List<People>{new People{Name="Trainer1" },
new People{ Name="Trainer2"} ,
new People{ Name="Trainer3"} };
public string Name {
get { return name; }
set { if (name != value)
{ name = value;
OnPropertyChanged();
}
} }
public People Trainer
{
get { return trainer; }
set
{
if (trainer != value)
{
trainer = value;
OnPropertyChanged();
}
}
}
#region INotifyPropertyChanged
void OnPropertyChanged(string name=null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
#endregion
public event PropertyChangedEventHandler PropertyChanged;
}}
I'm getting two collections of data from a web service - the full collection and then a subset of items. The subset should be selected on load. I cannot get the SelectedItems to show as selected in the CollectionView, event though that property is set. I've looked over the Monkeys example and all over the web but can't find an example just like this
View:
<RefreshView IsRefreshing="{Binding IsBusy, Mode=TwoWay}" Command="{Binding LoadItemsCommand}">
<CollectionView x:Name="ExperiencesCollectionView"
ItemsSource="{Binding Experiences}"
SelectedItems="{Binding ProfileExperiences, Mode=TwoWay}"
SelectionMode="Multiple">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label
Text="{Binding Description}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
</StackLayout>
Code Behind:
public partial class ExperiencesPage : ContentPage
{
ExperiencesViewModel viewModel;
public ExperiencesPage()
{
InitializeComponent();
BindingContext = viewModel = new ExperiencesViewModel();
}
protected override void OnAppearing()
{
base.OnAppearing();
if (viewModel.Experiences.Count == 0)
viewModel.IsBusy = true;
}
ViewModel:
public class ExperiencesViewModel : BaseViewModel
{
public ObservableCollection<Experience> Experiences { get; set; }
public ObservableCollection<object> ProfileExperiences { get; set; }
public Command LoadItemsCommand { get; set; }
public string InterestedIn { get; set; }
public ExperiencesViewModel()
{
Title = "My Experiences";
Experiences = new ObservableCollection<Experience>();
LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());
}
async Task ExecuteLoadItemsCommand()
{
IsBusy = true;
try
{
Experiences.Clear();
//Get these from the REST service
var experiences = await App.ExperienceManager.GetExperiencesAsync();
var serviceExperiences = await App.ExperienceManager.GetProfileExperiencesAsync();
foreach (var exp in experiences)
{
Experiences.Add(exp);
}
foreach (var profileExp in serviceExperiences)
{
ProfileExperiences.Add(profileExp);
}
}
catch (Exception ex)
{
Debug.WriteLine(ex);
}
finally
{
IsBusy = false;
}
}
I need to pass data from a ListView to a TodoDetail page where I have a Telerik DataForm, but I don't know how to make it work. If I use normal Xamarin Forms controls it works fine, but need it to work with the Telerik DataForm control.
Here is my code:
Todo.xaml
list item tapped handler
private async void ToDoTaskTap(object sender, ItemTappedEventArgs e)
{
var user = ToDoTask.SelectedItem as tblEmpTask;
if (user != null)
{
var mainViewModel = BindingContext as MainViewModel;
if (mainViewModel != null)
{
mainViewModel.Selected = user;
await Navigation.PushAsync(new ToDoDetail(mainViewModel));
}
}
}
tblEmpTask.cs
public class tblEmpTask
{
public string strTaskName { get; set; }
}
TodoDetail.xaml
<telerikInput:RadDataForm x:Name="dataForm">
<telerikInput:RadDataForm.Source>
<local1:MainViewModel />
</telerikInput:RadDataForm.Source>
</telerikInput:RadDataForm>
MainViewModel.cs
public class MainViewModel : INotifyPropertyChanged
{
public tblEmpTask Selected
{
get { return _Selected; }
set
{
_Selected = value;
OnPropertChanged();
}
}
[DisplayOptions(Header = "Name")]
public string Name
{
get { return this.Selected.strTaskName; }
set
{
if (value != this.Selected.strTaskName)
{
this.Selected.strTaskName = value;
OnPropertChanged();
}
}
}
}
You must add a binding between the SelectedItem and the ListView
Here's an example:
ViewModel:
public List<object> ItemsSource { get; set; }
public object SelectedItem {
set { SelectedItemChanged(value); }
}
async void SelectedItemChanged(object value) {
await App.Current.MainPage.Navigation.PushAsync(new AboutPage(SelectedItem));
}
Page:
<ListView
ItemsSource="{Binding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=OneWayToSource}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding .}"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have an api URL here which provides the response below.
Json
{"status":200,"message":"Operation done successfully","data":{"enableNext":false,"products":[{"image":"http://bresa.lazyhost.in/upload/product/1/Tjtqr8.jpg","id":1,"code":"PROi6v8X5261","name":"Spandex Stretch Lounge Sofa with Couch Seat Cover SlipCover","description":"nice sofa , very comfortable for sitting in Living room","tags":"chairs, sofa, ","price":"1000.00","quantity":100,"images":["http://bresa.lazyhost.in/upload/product/1/Tjtqr8.jpg"]}]}}
The model class for above response is below.
CarouselModel
namespace CameliaMaison.Models
{
public partial class CarouselModel
{
[JsonProperty("status")]
public long Status { get; set; }
[JsonProperty("message")]
public string Message { get; set; }
[JsonProperty("data")]
public List<CarouselData> Carouseldata { get; set; }
}
public partial class CarouselData
{
[JsonProperty("id")]
public long Id { get; set; }
[JsonProperty("name")]
public string Name { get; set; }
[JsonProperty("path")]
public string Path { get; set; }
}
}
The ViewModel
namespace CameliaMaison.ViewModels
{
public class CarouselImagesViewModel
{
private List<CarouselData> items;
public List<CarouselData> Items
{
get { return items; }
set
{
items = value;
}
}
public CarouselImagesViewModel()
{
var responseObj = MyHTTP.GetApiData().Result;
foreach(CarouselData item in responseObj){
Items.Add(item);
}
}
}
public class MyHTTP
{
public static async Task<List<CarouselData>> GetApiData()
{
HttpClient httpClient = new HttpClient();
HttpResponseMessage response = await httpClient.GetAsync("http://bresa.lazyhost.in/api/banners");
CarouselModel categoriesData = new CarouselModel();
var content = await response.Content.ReadAsStringAsync();
if (response.StatusCode == System.Net.HttpStatusCode.OK)
{
categoriesData = JsonConvert.DeserializeObject<CarouselModel>(await response.Content.ReadAsStringAsync());
}
return categoriesData.Carouseldata;
}
}
}
I need to parse the JSON and store in Model Object and populate the data in the listview via MVVM.However, there seems to be something wrong with the implementation. I am unable to figure out and the content page class is below.
ProductsListPage.xaml.cs
public partial class ProductsListPage : ContentPage
{
public ProductsListPage()
{
InitializeComponent();
}
}
ProductsListPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:constants="clr-namespace:CameliaMaison;assembly=CameliaMaison"
x:Class="CameliaMaison.Views.ProductsListPage"
Title="Employee List">
<ListView x:Name="ListView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="ABC" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
First you must have a button on your view page.
<Button Command = "{Binding GetInfoCommand}" />
Than you must create a view-model. Something like this :
public class CarouselModel: INotifyPropertyChanged
{
//get a reference from the another class where you make the call to get the json
Tasks ts = new Tasks();
List<CarouselData> _carouseldata ;
public List<CarouselData> CarouselData
{
get { return _carouseldata ; }
set
{
if (value == _carouseldata ) return;
_carouseldata = value;
OnPropertyChanged();
}
}
public ICommand GetIInfoComand
{
get
{
return new Command(async()=>
{
CarouselData= await _apiServices.GetInfo();
});
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Than in your tasks.cs class you must consume the call where you get the json. This simple. :)
==edit==
In your view you must replace your textcell.Something like this :
<ListView x:Name="ListView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name }" />
</DataTemplate>
</ListView.ItemTemplate>
Also you get a reference of your view model and place it before the listview :
<ContentPage.BindingContext>
<CarouselModel/>
</ContentPage.BindingContext>
I am developing an app with Xamarin.Forms, trying to leverage ReactiveUI, but Xamarin.Forms ListView does not behave as expected.
The test setup is an Entry field which I input values into. I subscribe to changes on the ReactiveList and add the value to a ListView.
The problem: The ListView updates for a few seconds and then just stops.
Console still logs inputs.
Sample code below:
<!-- xaml layouts omitted for brevity -->
<Entry x:Name="searchbox" HorizontalOptions="FillAndExpand"
Text="{Binding SearchQuery, Mode=TwoWay}"
/>
<ListView x:Name="ResultView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Address}"></TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ViewModel + SearchResult class:
public class SearchViewModel : ReactiveObject
{
public ReactiveList<SearchResult> SearchResults { get; set; }
private string searchQuery;
public string SearchQuery
{
get { return searchQuery; }
set { this.RaiseAndSetIfChanged(ref searchQuery, value); }
}
public ReactiveCommand<List<SearchResult>> Search { get; set; }
public SearchViewModel()
{
// Set up our ListView data list
this.SearchResults = new ReactiveList<SearchResult>();
this.SearchResults.ChangeTrackingEnabled = true;
Search = ReactiveCommand.CreateAsyncTask(async _ => {
return await GenerateSearchResultAsync(this.SearchQuery);
});
Search.Subscribe(results => {
SearchResults.Clear(); // just replace output every time
SearchResults.AddRange(results);
// output results to console
results.ForEach(r => Console.WriteLine(r.Address));
});
// this used to contain a condition I removed for brevity
this.WhenAnyValue(x => x.SearchQuery).InvokeCommand(this, x => x.Search);
}
// create a new result list and return it, async code removed for demo-simplicity
private static async Task<List<SearchResult>> GenerateSearchResultAsync(string value)
{
var rv = new List<SearchResult>();
rv.Add(new SearchResult(value + " " + DateTime.Now.ToString("hh:mm:ss.FFFF")));
return rv;
}
}
public class SearchResult
{
private string address;
public SearchResult(string s)
{
this.Address = s;
}
public string Address { get; set; }
}
This seems to be a bug when WeakReferences are mistakenly collected during GC.
I'm not knowledgable enough to do the debugging, but some other smart guys did:
https://github.com/reactiveui/ReactiveUI/issues/806
https://bugzilla.xamarin.com/show_bug.cgi?id=31415 (open xamarin bug report)
Workaround:
Add this class to your project:
public class ReactiveObservableCollection<T> : ReactiveList<T>
{
public ObservableCollection<T> ObservableCollection { private set; get; }
public ReactiveObservableCollection()
{
this.ObservableCollection = new ObservableCollection<T>();
ItemsAdded.Subscribe(ObservableCollection.Add);
ItemsRemoved.Subscribe((x) => ObservableCollection.Remove(x));
}
}
and use it instead of the ReactiveList:
public class ViewModel : ReactiveObject {
public ReactiveObservableCollection<SearchResult> SearchResults { set; get; }
public ViewModel()
{
// use ReactiveObservableCollection instead of ReactiveList
this.SearchResults = new ReactiveObservableCollection<SearchResult>()
{
ChangeTrackingEnabled = true
};
}
Also, make sure to use the .ObservableCollection property on the collection as ItemSource (instead of just the collection)!
this.ResultView.ItemsSource = viewModel.SearchResults.ObservableCollection;
instead of
this.ResultView.ItemsSource = viewModel.SearchResults;
This should solve the problem.
HTH!