We Keep Coding

Can't output info from JSON on a ListView in Xamarin

I've been trying to learn Xamarin with MVVM and I'm still struggling.
I've had issues mainly trying to output information from a JSON file in a ListView.
If I just ignore MVVM and add the code directly into the View, it works perfectly.
However, when I try to use the code in the ViewModel, it can't find the binded Itemssource.
The code:
ListPageVM
using SaveUp.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using SaveUp.View;
using System.Reflection;
using System.Text;
using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace SaveUp.ViewModel
{
public class ListPageVM : INotifyPropertyChanged
{
private ObservableCollection<MainModel> data;
public ListPageVM()
{
var assembly = typeof(ListPageVM).GetTypeInfo().Assembly;
Stream stream = assembly.GetManifestResourceStream("SaveUp.eintraege.json");
using (var reader = new StreamReader(stream))
{
var json = reader.ReadToEnd();
List<MainModel> dataList = JsonConvert.DeserializeObject<List<MainModel>>(json);
data = new ObservableCollection<MainModel>(dataList);
lw.ItemsSource = data;
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
ListPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SaveUp.View.ListPage"
xmlns:viewModel="clr-namespace:SaveUp.ViewModel"
x:DataType="viewModel:ListPageVM">
<ContentPage.BindingContext>
<viewModel:ListPageVM/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<ListView x:Name="lw"
Footer="">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Geld}" Detail="{Binding Detail}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
eintraege.json
[
{
"Geld": 500.00,
"Detail": "Kaffee"
},
{
"Geld": 250.00,
"Detail": "Creme"
},
{
"Geld": 100.00,
"Detail": "Yogurt"
}
]

first, this needs to have a public property
private ObservableCollection<MainModel> data;
should look like
private ObservableCollection<MainModel> data;
public ObservableCollection<MainModel> Data {
get
{
return data;
{
set
{
data = value;
OnPropertyChanged();
}
}
if you are using MVVM, then your VM doesn't directly interact with your view
// get rid of this
lw.ItemsSource = data;
then in your XAML use binding to set the ItemsSource
<ListView ItemsSource="{Binding Data}" ...

Xamarin Forms - ListView: IsVisible binding to an invisible item inside a list view is not working after scrolling to show that item

Hello,
I'm running into very annoying problem, what I need is simple but I'm getting an unexpected problem, here is what I'm trying to do:
I have a listview containing 2 labels in the ViewCell, both labels show same field but the difference is that the first is visible and the font is normal and the second is invisible and the font is bold, what I wanted to do is when I click on the item to change the property named: "Selected" from false to true and vise versa so that the bold label show/hide to inform the user that the item is selected.
In order to achieve this I wrote my code and I deploy the simple app on my android device and it worked like a charm, but after that I noticed that if I scroll the listview to an item that was not shown on the screen and click on that item, the first normal label disappeared which is an expected behavior but the second bold label doesn't shown
The following is my code:
testVisibilityProblem.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:CPALMSStandardsViewer;assembly=CPALMSStandardsViewer"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
xmlns:converters="clr-namespace:CPALMSStandardsViewer.Converters"
xmlns:Helpers="clr-namespace:CPALMSStandardsViewer.Helper"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="CPALMSStandardsViewer.Views.testVisibilityProblem">
<Grid>
<ListView Margin="10,0,10,0"
BackgroundColor="White"
SeparatorColor="Gray"
ItemsSource="{Binding CustomEntities}"
VerticalOptions="Fill"
SelectionMode="None"
HasUnevenRows="True">
<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemTapped"
Command="{Binding SelectCustomEntity}"
EventArgsConverter="{converters:ItemTappedEventArgsConverter}" />
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Name}" TextColor="Black" IsVisible="{Binding IsSelected, Converter={Helpers:InverseBoolConverter}}"></Label>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Name}" TextColor="Black" FontAttributes="Bold" IsVisible="{Binding IsSelected}"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ContentPage>
testVisibilityProblemViewModel.cs
using CPALMSStandardsViewer.Models;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
namespace CPALMSStandardsViewer.ViewModels
{
public class testVisibilityProblemViewModel : ViewModelBase
{
public ObservableCollection<CustomEntity> CustomEntities { get; set; }
public testVisibilityProblemViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Test Visibility Problem!";
CustomEntities = new ObservableCollection<CustomEntity>();
for (int i = 0; i < 50; i++)
{
CustomEntities.Add(new CustomEntity() { Name = "Item " + i, IsSelected = false });
}
}
private DelegateCommand<CustomEntity> _SelectCustomEntity;
public DelegateCommand<CustomEntity> SelectCustomEntity => _SelectCustomEntity ?? (_SelectCustomEntity = new DelegateCommand<CustomEntity>(ExecuteSelectCustomEntityCommand));
private void ExecuteSelectCustomEntityCommand(CustomEntity paramData)
{
paramData.IsSelected = !paramData.IsSelected;
}
}
}
CustomEntity.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
namespace CPALMSStandardsViewer.Models
{
public class CustomEntity : INotifyPropertyChanged
{
public virtual string Name { get; set; }
private bool _IsSelected;
public bool IsSelected { get { return _IsSelected; } set { _IsSelected = value; OnPropertyChanged("IsSelected"); } }
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
}
I searched a lot concerning this problem and all what I found is something related to the OnPropertyChanged(), someone miss use the observable collection, other one miss the use of OnPropertyChanged(), other one used it in wrong way...
But my problem is different, it's not about binding because the top items worked as expected and also as I already mentioned the first label becomes hidden which is expected, my problem is that when you turn the IsVisible from false to true for an item that was not rendered on the screen, it simply not working.
I may know the problem but I tried a lot to get it solved but none of the solutions I tried work for me.
Please note that UWP worked as expected, my problem is on android platform.
Please HELP!

How can I have a public (global) variable assigned to the OnProperty of a SwitchCell (isOn binding) to check if a SwichCell is enabled (On)

I want to have a SwitchCell within a ListView which is able to "remember" the state of the last SwitchCell event (Toggled) when the page is changed or the App closes and opens up again.
I have a class called Relays where I implemented the variables for binding to the SwitchCell properties of On and Text.
I am able to Bind the properties in the code behind RelayControl.xaml.cs class but I want to have a variable (or equivalent) to analyze/check the On state of the SwitchCell when the Page is opened.
I know the solution might be simple but I am very new to Xamarin and C# and I have been reading the Data Binding Basics on the Microsoft site (among other sources) and I can't seem to relate them to my current problem. Any help/examples/suggestions will be greatly appreciated.
My Relays.cs class is as follows:
using System;
using System.Collections.Generic;
using System.Text;
namespace Socket.Models
{
public class Relays
{
public Boolean isOn { get; set; } // Set the state of
the switch
public string State { get; set; } // Get the state of
the switch based on the isOn property
public string Name { get; set; } // Set the name of the
relay in the list
}
}
The RelayControl.xaml is as follows:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Socket.RelayControl"
Title="Relay Control Page">
<ContentPage.Content>
<StackLayout Padding="10,0,0,0">
<ListView x:Name="lstView" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<SwitchCell x:Name="Sw1" Text="{Binding Name,
Mode=TwoWay}" On="{Binding isOn, Mode=TwoWay}"
OnChanged="OnChanged_2"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
the RelayControl.xaml.cs is as follows:
using Socket.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Socket
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RelayControl : ContentPage
{
public RelayControl()
{
InitializeComponent ();
loadSampleData();
}
private void loadSampleData()
{
// Create sample data
ObservableCollection<Relays> listRelays = new
ObservableCollection<Relays>();
listRelays.Add(new Relays { Name ="Relay 1", State = "",
isOn=false });
listRelays.Add(new Relays { Name ="Relay 2", State = "",
isOn=false });
listRelays.Add(new Relays { Name ="Relay 3", State = "",
isOn=false });
lstView.ItemsSource = listRelays;
}
private void OnChanged_2(object sender, ToggledEventArgs e)
{
var selectedItem = ((SwitchCell)sender).BindingContext as
Relays;
if (true)
{
bool IsToggled = e.Value;
string name = IsToggled.ToString();
if (name == "True")
{
//DisplayAlert("ON", "Relay 1 On", "Cancel");
BackgroundColor = Color.Silver;
//Set the switch Property to ON state (toggled)
selectedItem.isOn = true;
//Check if the switch has been toggled and change the
states accordingly
if (selectedItem.isOn == true)
{
BackgroundColor = Color.Gold;
}
}
else
{
//DisplayAlert("OFF", "Relay 1 OFF", "Cancel");
BackgroundColor = Color.LightSkyBlue;
}
}
}// OnChanged event
}// partial class
}

You seem to be following the MVVM pattern so, I will give you a basic run through:
First, your Relays class should be your binding context so that the properties there would be accessible to your XAML file which can be set in two ways
Through Xaml something like this :
<ContentPage.BindingContext>
<local:Relays/>
</ContentPage.BindingContext>
Where local is the namespace of your class and Relays is your class name.
Through C# something like this :
public RelayControl()
{
InitializeComponent ();
loadSampleData();
this.BindingContext=new Relays();
}
Now in your ListView Do the Following Changes :
<ListView x:Name="lstView" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<SwitchCell x:Name="Sw1" Text="{Binding Name,
Mode=TwoWay}" On="{Binding BindingContext.isOn,Source={x:Reference lstView}, Mode=TwoWay}"
OnChanged="OnChanged_2"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
After that, it should work like a charm
In case of issues revert

Why is no content displaying after passing SelectedItem as Custom Object into new page?

I'm very new to Xamarin and C#. So if What I am asking is rookie I apologize. But I have scoured the interwebz and Stack Overflow looking for why what I am doing isn't working and can't figure it out. As far as I can tell it should be working fine but maybe/hopefully I'm just missing something simple.
I'm using MVVM (mostly) and I have a ListView made up of objects called MobileBoardUser. That List View is set up like this
<ListView
ItemsSource="{Binding BoardUsers}"
HasUnevenRows="True"
ItemSelected="StatusBoardPageListView_ItemSelected" >
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
//then the various StackLayout and Label objects etc.
In the code behind I am trying to use the ItemSelected method to pass the selected Item into a new page where all of it's properties will be displayed.
private void StatusBoardPageListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (e.SelectedItem == null)
{
return;
}
MobileBoardUser userSelected = e.SelectedItem as MobileBoardUser;
Navigation.PushAsync(new BoardUserPage(userSelected));
}
The BoardUserPage Code Behind looks like this
using EIOBoardMobile.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EIOBoardMobile.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BoardUserPage : ContentPage
{
public class UserProp
{
public string userprop { get; set; }
}
public class UserValue
{
public string uservalue { get; set; }
}
public ObservableCollection<UserProp> SelectedUserProps { get; set; } = new ObservableCollection<UserProp>();
public ObservableCollection<UserValue> SelectedUserValues { get; set; } = new ObservableCollection<UserValue>();
public BoardUserPage(MobileBoardUser selectedUser)
{
InitializeComponent();
BindingContext = this;
MobileBoardUser shownUser = selectedUser;
foreach (var prop in shownUser.GetType().GetProperties())
{
if (prop.GetType() == typeof(String))
{
UserProp NewUserProp = new UserProp
{
userprop = prop.Name.ToString()
};
SelectedUserProps.Add(NewUserProp);
}
}
foreach (var prop in shownUser.GetType().GetProperties())
{
if (prop.GetType() == typeof(String))
{
UserValue NewUserValue = new UserValue
{
uservalue = prop.GetValue(shownUser, null).ToString()
};
SelectedUserValues.Add(NewUserValue);
}
}
}
}
}
As you can see I have created two lists of objects, one to represent the property names and one to represent the actual values of those properties so they can be used in the xaml. In production these will be dynamic so it is important I be able to do it this way. To this end the BoardUserPage xaml looks like this
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:EIOBoardMobile.Views"
x:Class="EIOBoardMobile.Views.BoardUserPage">
<ContentPage.Content>
<StackLayout Padding="20">
<ListView
ItemsSource="{Binding SelectedUserProps}"
HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" >
<Label Text="{Binding userprop}" HorizontalOptions="StartAndExpand" TextColor="Black" />
<ListView ItemsSource="{Binding SelectedUserValues}" HorizontalOptions="EndAndExpand" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding uservalue}" HorizontalOptions="EndAndExpand" TextColor="Blue" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
All of this compiles and I get no unhandled exceptions or run time errors. The code behind that passes the SelectedItem as MobileBoardUser into the new page works to navigate to BoarduserPage but when I get there the page is empty and doing nothing.
What have I done wrong?

Ok after some trial and error I was actually able to figure this out. I had to make some changes to the code. The typeof statements were not constructed properly. For the SelectedUserProps I was getting the typeof the property rather the value. So I had to change that. Also the nested ListView inside another ListView was causing exceptions and failing to generate. Passing e.SelectedItem after casting actually DID work. It was the foreach comparison statements that were causing me grief. So the major changes I made were to the BoardUserPage code behind and the BoardUserPage xaml. Here are those changes. Primarily using one ObservableCollection instead of two (hence now only one foreach statement and correcting the type comparison so that I was comparing values rather than the properties themselves to typeof(String). Here is the code behind
using EIOBoardMobile.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EIOBoardMobile.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BoardUserPage : ContentPage
{
public class UserProp
{
public string userprop { get; set; }
public string uservalue { get; set; }
}
public ObservableCollection<UserProp> SelectedUserProps { get; set; } = new ObservableCollection<UserProp>();
public BoardUserPage(MobileBoardUser selectedUser)
{
InitializeComponent();
BindingContext = this;
foreach (var prop in selectedUser.GetType().GetProperties())
{
if (prop.GetValue(selectedUser).GetType() == typeof(String))
{
UserProp NewUserProp = new UserProp
{
userprop = prop.Name.ToString(),
uservalue = prop.GetValue(selectedUser).ToString()
};
SelectedUserProps.Add(NewUserProp);
}
}
}
}
}
and here is the View (xaml)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:EIOBoardMobile.Views"
x:Class="EIOBoardMobile.Views.BoardUserPage">
<StackLayout Padding="20" >
<ListView
x:Name="Parent"
ItemsSource="{Binding SelectedUserProps}"
HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="10" HeightRequest="100">
<Label Text="{Binding userprop}" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" TextColor="Black" />
<Label Text="{Binding uservalue}" HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand" TextColor="Blue" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
This displays the property names on the left and values on the right of only those properties which are strings. This was necessary to avoid displaying IDs and othe integer based key values from the database that would just be meaningless clutter to end users.

Current context and databinding

I try to use a databinding in a Xamarin Application List.
I am following : https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/data-and-databinding/.
Visual Studio give me this error : CS0103 C# The name "ELementView" does not exist in the current context.
I think it is a problem about the xmlns:local in xaml fil but I don't know.
Xaml code :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App4;assembly=listeElements"
x:Class="App4.Page1"
Title="ListView Demo Page">
<ListView x:Name="ELementView">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
listeElements code :
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App4
{
public class Element
{
private string element;
public string Name
{
get { return element; }
set { element = value; }
}
ObservableCollection<Element> Elements = new ObservableCollection<Element>();
public void ElementListPage()
{
ELementView.ItemsSource = Elements;
Elements.Add(new Element { Name = "oooo" });
}
}
};
Thanks for your help

You could also use this:
public Page1()
{
InitializeComponent();
Elemenet e = new Element();
e.ElementListPage();
this.BindingContext = e;
}
but make sure your ObservableCollection<Element> has {get; set;};
Then you can add an ItemsSource-Binding to your ListView like this:
<ListView ItemsSource="{Binding Elements}">
as you definded the DataContext for Page1 it will look for a Property called Elements in your DataContext (which is the class Element) - there it gets the ElementsCollection and adds the Name to your CellTemplate

Just by giving the ListView a name doesn't mean you can reference it from anywhere. You can now reference ELementView from the code-behind of your Page1 XAML page.
To get there, open your Solution window, go to Page1.xaml click the arrow to the left of it and double-click Page1.xaml.cs.
In this page you could do something like this:
using System.Collections.ObjectModel;
using Xamarin.Forms;
public Page1()
{
InitializeComponent();
ObservableCollection<Element> Elements = new ObservableCollection<Element>();
ELementView.ItemsSource = Elements;
Elements.Add(new Element { Name = "oooo" });
}
Although this would work, it probably isn't the best approach. You are trying to use MVVM which is good! But you can take it a step further.
Maybe try using a MVVM framework like MvvmCross or FreshMvvm. I have done a blogpost on the later. You can find it here. Although new versions have come out, this should get you started with the basics.