Develop Reference

LiveCharts2 binding continuously changing data to graph

I'm new in WPF and C# so go easy on me :)
My goal is to plot data to graph using LiveCharts2 with WPF help and add data live.
I followed the example of LiveCharts2 added the class ViewModel with and the XAML and everything worked fine:
public partial class ViewModel
{
public ISeries[] Series { get; set; } =
{
new LineSeries<double>
{
Values = new double[] { 1, 2 },
Fill = null
}
};
This is static data .. how do I bind it to a variable that changes at any given time? or how should I change the code for that purpose?
I tried to write only XAML code (view code) and took the example from LiveCharts2 to add data to the "Values" but couldn't make it.
I want something like this and just fire and forget & wish that the data plot will update automatically.
new LineSeries<double>
{
Values = new double[] { myChangedata },
Fill = null
}

You need to use an ObservableCollection instead of an array so the chart can receive updates.
public partial class ViewModel
{
private ObservableCollection<double> myChangedData = new();
public ViewModel()
{
Series.Add(new LineSeries<double>
{
Values = myChangedData,
Fill = null,
});
}
public object Sync { get; } = new();
public List<ISeries> Series { get; set; } = new();
}
Then to add data
lock (Sync)
{
// Any changes including adding, clearing, etc must be synced.
myChangedData.Add(1D);
myChangedData.Add(2D);
}
When doing live data be sure you set the SyncContext property on the chart and always lock it before any changes.
<lc:CartesianChart Series="{Binding Series}" SyncContext="{Binding Sync}"/>

How to set listview itemssource to a viewmodel in Xamarin?

I'm trying to make a listview in xamarin show data from a restapi but have the option to filter the list or sort it based upon last name.
I've set the bindingcontext equal to the apiviewmodel which works. But I want to set the itemssource to a list which can be manipulated later instead of the binding context.
Here is the code that works:
Xaml:
<ListView x:Name="DirectoryListView" ItemsSource="{Binding ContactsList}" IsPullToRefreshEnabled="True">
Xaml.cs:
LocalAPIViewModel = new APIViewModel();
BindingContext = LocalAPIViewModel;
APIViewModel.cs:
private List<MainContacts> _ContactsList { get; set; }
public List<MainContacts> ContactsList
{
get
{
return _ContactsList;
}
set
{
if(value != _ContactsList)
{
_ContactsList = value;
NotifyPropertyChanged();
}
}
}
public class MainContacts
{
public int ID { get; set; }
public string FirstName { get; set; }
}
This all works fine. It's only when I add the following lines that it stops displaying the data in the listview:
xaml.cs:
LocalList = LocalAPIViewModel.ContactsList;
DirectoryListView.ItemsSource = LocalList;
I think I need to add these lines so that I can manipulate the list that's being displayed. Why is the list not being displayed? Is this not how it should be done?

According to your description and code, you use MVVM to bind ListView firstly, it works fine, now you want to use Viewmodel to bind ListView itemsource in xaml.cs directly, am I right?
If yes,I do one sample according to your code, that you can take a look, the data can display successfully.
public partial class Page4 : ContentPage
{
public APIViewModel LocalAPIViewModel { get; set; }
public Page4 ()
{
InitializeComponent ();
LocalAPIViewModel = new APIViewModel();
listview1.ItemsSource = LocalAPIViewModel.ContactsList;
}
}
public class APIViewModel
{
public ObservableCollection<MainContacts> ContactsList { get; set; }
public APIViewModel()
{
loadddata();
}
public void loadddata()
{
ContactsList = new ObservableCollection<MainContacts>();
for(int i=0;i<20;i++)
{
MainContacts p = new MainContacts();
p.ID = i;
p.FirstName = "cherry"+i;
ContactsList.Add(p);
}
}
}
public class MainContacts
{
public int ID { get; set; }
public string FirstName { get; set; }
}
so I suggest you can check ContactsList if has data.
Update:
I want to be able to search the list with a search bar and also order it by first or last names. I also want to be able to click on one of the contacts and open up a separate page about that contact
I do one sample that can meet your requirement, you can take a look:
https://github.com/851265601/xf-listview

So, to answer all your questions...
First, the binding.
Once you set the ItemsSource="{Binding ContactsList}" this means that anytime you signal that you have changed your ContactsList by calling OnPropertyChanged(), that is going to be reflected on the ItemsSource property (so, update the UI - that is why we put the OnPropertyChanged() into the setter). Thus, you do not need to manually set the ItemsSource every time you change it. (Especially from the View, as the View should have no knowledge of how the ContactsList is defined in the ViewModel.)
So you can completely remove those lines from the View's code-behind.
Next, the ordering and searching.
What OnPropertyChanged() does, is that it re-requests the bound property from the ViewModel, and updates the View according to that. So, just after OnPropertyChanged() is called, the getter of the bound property (ContactsList) is called by the View.
So, a good idea is to put the sorting mechanism into the getter of the public property. (Or the setter, when resetting the property.) Something like this:
public class ViewModel {
private ObserveableCollection<MainContacts> contactList { get; set; }
public ObserveableCollection<MainContacts> ContactList {
get {
return new ObservableCollection<MainContacts>(contactList
.Where(yourFilteringFunc)
.OrderBy(yourOrderingFunc));
}
set {
contactsList = value;
OnPropertyChanged();
}
}
//...
}
So, whenever your public property is called, it will sort the private property and return the collection that way.

Change public List<MainContacts> ContactsList to public ObservableCollection<MainContacts> ContactsList
in xaml.cs
instead of LocalList = LocalAPIViewModel.ContactsList;, put
ContactsList = new ObservableCollection(LocalAPIViewModel.ContactsList);
I think this will work, instead of setting ListView's Itemsource to 'LocalList'

Xamarin forms - MVVM observable collection always null

I have the strangest issue with an observable collection. I set my collection with some dummy data and it loads on the content page as expected however when I attempt to get the data from the data context its always null.
I debugged the code in the ViewModel and I can see the collection as null. Its clearly not null because I populates on the form.
Is there something im missing here !
private ObservableCollection<Company> _CompanyCollection;
public ObservableCollection<Company> CompanyCollection
{
get { return _CompanyCollection; }
set
{
if (value != null)
{
_CompanyCollection = value;
OnPropertyChanged();
}
}
}
Loading data
public void LoadTestCompanies()
{
CompanyCollection = new ObservableCollection<Company>()
{
new Company() { Name="The Suit Lounge"},
new Company() { Name="The Suit Lounge"},
new Company() { Name="The Suit Lounge"}
};
}
Calling Viewmodel from event in page.cs
CompaniesVM viewModel = (CompaniesVM)BindingContext;
var results = viewModel.CompanyCollection.Where(x => x.Name.ToLower().Contains(searchBar.Text.ToLower()));
This is the code behind
public Companies ()
{
InitializeComponent ();
BindingContext = new CompaniesVM(this.Navigation);
}
ViewModel calls loatTestCompanies
public CompaniesVM(INavigation navigation)
{
// Navigation
Navigation = navigation;
LoadTestCompanies();
}
Ive tried many other ways of initialising the collection and use .Add(object> but nothing seems to be working.
Any ideas would be great.
Thank you

Two advises that may solve your problem:
1
Use a self-declared readonly property when referring to collections:
public ObservableCollection<Company> CompanyCollection { get; }
2
This change will force you to create the instance of CompanyCollection directly in the constructor:
public CompaniesVM(INavigation navigation)
{
Navigation = navigation;
CompanyCollection = new ObservableCollection<Company>();
LoadTestCompanies();
}
And then...:
public void LoadTestCompanies()
{
CompanyCollection.AddRange(new[]
{
new Company() { Name="The Suit Lounge"},
new Company() { Name="The Suit Lounge"},
new Company() { Name="The Suit Lounge"}
});
}
I believe that changing the reference itself for bound properties implies in ViewModel using an object instance and the View using another one. So the view 'stops' to listen to VM changes for that property.
I've never got into the deep of ItemsSources Views implementations, but I guess they kind of observe the items when binding collections - or the collection instance's properties in some cases - when getting changes notification.
With this changes, I guess your code should work fine.
Hope it helps.

UITableView to ObservableCollection binding breaks when the containing UIViewController is initialised for the second time

I'm using mvvmcross and xamarin to bind an ObservableCollection to a UITableView. The collection is updated in place using the Add, Remove and Move methods. These calls correctly trigger INotifyCollectionChanged events and the TableView is updated as expected the first time the view containing the table is shown. If the user navigates away from the original view as part of the normal application flow but later returns the correct data is loaded into the table but calls to add, move and remove no longer update the table.
The INotifyCollectionChanged events are still being fired when the collection is updated
If I manually subscribe to these events in my subclass of MvxStandardTableViewSource and try and call ReloadData on the UITableView still does not update
My presenter is creating a new instance of the viewmodel and view each time the page is visited.
I'm also using Xamarin-Sidebar (https://components.xamarin.com/view/sidebarnavigation) for navigation in my application with a custom presenter to load the views but as far as I can tell the view is initialised via exactly the same code path whether it's the first or subsequent visit.
My presenters Show() method looks like this:
public override void Show(MvxViewModelRequest request)
{
if (request.PresentationValues != null)
{
if(NavigationFactory.CheckNavigationMode(request.PresentationValues, NavigationFactory.ClearStack))
{
MasterNavigationController.ViewControllers = new UIViewController[0];
base.Show(request);
}
else if(NavigationFactory.CheckNavigationMode(request.PresentationValues, NavigationFactory.LoadView))
{
var root = MasterNavigationController.TopViewController as RootViewController;
var view = this.CreateViewControllerFor(request) as UIViewController;
root.SidebarController.ChangeContentView(view);
}
}
else
{
base.Show(request);
}
}
The binding in my ViewController looks like this:
public override void ViewDidLoad()
{
base.ViewDidLoad();
View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
var source = new TracksTableSource(TableView, "TitleText Title; ImageUrl ImageUrl", ViewModel);
TableView.Source = source;
var set = this.CreateBindingSet<TracksViewController, TracksViewModel>();
set.Bind(source).To(vm => vm.PlaylistTable);
set.Apply();
}
And my viewmodel is as below where PlaylistTable is a subclass of ObservableCollection with the Update method using add, move and remove to keep the collection up to date.
public class TracksViewModel : MvxViewModel
{
private readonly IPlaylistService _playlistService;
private readonly IMessengerService _messengerService;
private readonly MvxSubscriptionToken _playlistToken;
public PlaylistTable PlaylistTable { get; set; }
public TracksViewModel(IPlaylistService playlistService, IMessengerService messengerService)
{
_playlistService = playlistService;
_messengerService = messengerService;
if (!messengerService.IsSubscribed<PlaylistUpdateMessage>(GetType().Name))
_playlistToken = _messengerService.Subscribe<PlaylistUpdateMessage>(OnDirtyPlaylist, GetType().Name);
}
public void Init(NavigationParameters parameters)
{
PlaylistTable = new PlaylistTable(parameters.PlaylistId);
UpdatePlaylist(parameters.PlaylistId);
}
public async void UpdatePlaylist(Guid playlistId)
{
var response = await _playlistService.Get(playlistId);
PlaylistTable.Update(new Playlist(response));
}
private void OnDirtyPlaylist(PlaylistUpdateMessage message)
{
UpdatePlaylist(message.PlaylistId);
}
}
This setup works perfectly the first time the view is initialised and updates the table correctly, it's only the second and subsequent times the view is initialised that the table fails to update. Can anyone explain why the binding fails when it appears the view is created using the same techniques in both instances?
I can post additional code if required but I believe the issue will be how I'm using the presenter since the code I've not posted from PlaylistTable functions correctly in unit tests and on first viewing.

Add/Delete Items from DataContext

How can I add or delete items from my DataContext? This is my code:
class WallModel
{
public WallModel()
{
WallItems = new ObservableCollection<Wall>();
Initialization = InitializeAsync();
}
public Task Initialization { get; private set; }
public async Task InitializeAsync()
{
WallItems.Add(new Wall { id = 2, user = 3 });
}
public ObservableCollection<Wall> WallItems { get; set; }
}
And MainPage.xaml.cs:
public MainPage()
{
this.InitializeComponent();
DataContext = new WallModel();
lvMain.DataContext = DataContext;
}

We don't generally add or remove items from a DataContext directly. Instead, (in MVVM) we try to create a class that incorporates all of the properties that we want to display in the UI and methods that perform the required functionality. Then we set an instance of this class as the DataContext.
Of course, you can just set a simple collection property as the DataContext of one control and in that case, you could just add or remove items from that collection as normal. However, it is generally preferred to manipulate the data item(s) set as the DataContext rather than the DataContext object itself.

You can use for example:
((WallModel)DataContext).WallItems.Remove(item);
or
((WallModel)DataContext).WallItems.RemoveAt(index);
....
Also if lvMain is in the MainPage you do not need to set its datacontext because it gets inherited.
As Sheridan mentions use a viewmodel and a Delete command which removes the item directly in the viewmodel.

((WallModel)DataContext).WallItems.Add(new Wall { id = 2, user = 3 });