Change toObservableCollection does not update UI - xamarin.forms

I am new to Xamarin Forms. So therefore I have a trouble with the UI updating. I had create a collection view to display a list of data. Besides that I also created a button for the user to update remarks. While the user click the button, it will call OnRemarksButtonClickedAsync(APIPatrolD obj) and update the patrold_remark to the ObservationList. I already debug and ensure that the remarks had been store in the DAPIPatrolDSiapImbasList but it unable to update to the UI. Did anyone known why?
Below is my source code.
APIDATA Class
public class APIPatrolH
{
public string patrolh_ID { get; set; }
public DateTime patrolh_planDateTime { get; set; }
public DateTime patrolh_actualDateTime { get; set; }
public string patrolh_actualBy { get; set; }
public string patrolh_route { get; set; }
public string patrolh_routeDesc { get; set; }
public APIPatrolD[] patrolh_patrold { get; set; }
}
public class APIPatrolD
{
public string patrold_ID { get; set; }
public string patrold_loc { get; set; }
public int patrold_seq { get; set; }
public string patrold_desc { get; set; }
public byte[] patrold_image { get; set; }
public string patrold_GPS { get; set; } //latitude,longtitue. If 0,0 then no gps tracking
public string patrold_takenGPS { get; set; } //filled by apps
public DateTime patrold_takenDateTime { get; set; } //filled by apps - scan date time
public string patrold_remark { get; set; } //filled by apps
}
Base View Model
public class BaseViewModel : INotifyPropertyChanged
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
var handler = PropertyChanged;
handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
View Model
public string _patrold_remark;
public string patrold_remark
{
get { return _patrold_remark; }
set
{
_patrold_remark = value;
OnPropertyChanged();
}
}
public ObservableCollection<APIPatrolD> _DAPIPatrolDSiapImbasList;
public ObservableCollection<APIPatrolD> DAPIPatrolDSiapImbasList
{
get { return _DAPIPatrolDSiapImbasList; }
set
{
if (_DAPIPatrolDSiapImbasList != value)
{
_DAPIPatrolDSiapImbasList = value;
OnPropertyChanged();
}
}
}
public SecurityPortalDetailsPageViewModel(DAPIPatrolH dAPIPatrolH, int v)
{
DAPIPatrolDSiapImbasList = new ObservableCollection<APIPatrolD>();
}
private async void OnRemarksButtonClickedAsync(APIPatrolD obj)
{
// To Do display a customize PopUps=
var result = await App.Current.MainPage.Navigation.ShowPopupAsync(new CustomizePopups(obj));
foreach (APIPatrolD aPIPatrolD in DAPIPatrolDSiapImbasList) {
if (aPIPatrolD.patrold_loc == obj.patrold_loc) {
aPIPatrolD.patrold_remark = (string)result;
break;
}
}
OnPropertyChanged("DAPIPatrolDSiapImbasList");
}
UI Page
<CollectionView Grid.Row="2"
Grid.ColumnSpan="2"
ItemsSource="{Binding DAPIPatrolDSiapImbasList,Mode=TwoWay}">
<CollectionView.EmptyView>
<StackLayout>
<Label Text="Tiada Rekod" HorizontalOptions="CenterAndExpand" TextColor="Black" FontAttributes="Bold" FontSize="18" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition />
<ColumnDefinition Width="0.1"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="55"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="3" />
</Grid.RowDefinitions>
<Label FontSize="15" FontAttributes="Bold" Text="{Binding patrold_seq}" TextColor="#403f3f" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
<Label FontSize="15" FontAttributes="Bold" Grid.Column="1" Text="{Binding patrold_loc}" TextColor="#403f3f" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>
<Label FontSize="15" FontAttributes="Bold" Grid.Column="2" Text="{Binding patrold_desc}" TextColor="#403f3f" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>
<Label FontSize="15" FontAttributes="Bold" Grid.ColumnSpan="5" Grid.Row="1" Text="{Binding patrold_takenDateTime, StringFormat='{dd/MM/yy hh:mm tt}'}" TextColor="#403f3f" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>
<Label FontSize="15" FontAttributes="Bold" Grid.ColumnSpan="5" Grid.Row="2" x:Name="Remarks" Text="{Binding patrold_remark}" TextColor="#403f3f" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>
<Button Text="Pemerhatian" FontSize="9" FontAttributes="Bold" Grid.Column="3" BackgroundColor="Red" HeightRequest="30" WidthRequest="120" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"
Command="{Binding Path=BindingContext.RemarksCommand, Source={x:Reference _SecurityPortalDetailsPage}}"
CommandParameter="{Binding .}"
TextTransform="None"
/>
<controls:CFrame Grid.Row="3" Grid.ColumnSpan="5" BackgroundColor="LightGray"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Refer to the following code:
`
public class APIPatrolD:INotifyPropertyChanged
private string _patrold_loc;
public string patrold_loc {
get { return _patrold_loc; }
set {
_patrold_loc = value;
OnPropertyChanged("patrold_loc");
}
}
`

Related

Multilevel Listview in xamarin forms

I need to make a Multilevel Listview in Xamarin forms.
Currently, I am using this for my Single level Grouping in my Menu Page
http://www.compliancestudio.io/blog/xamarin-forms-expandable-listview
I need to update something like the attached image. I have tried some of the Solution but all in vain.
Anyone has any idea about this.
Thanks
You could do this with Expander of Xamarin Community Toolkit.
Install Xamarin Community Toolkit from NuGet: https://www.nuget.org/packages/Xamarin.CommunityToolkit/
Usage: xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Xaml:
<ContentPage.BindingContext>
<viewmodels:RootViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<ScrollView Margin="20">
<StackLayout BindableLayout.ItemsSource="{Binding roots}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<xct:Expander>
<xct:Expander.Header>
<Label Text="{Binding Root}"
FontAttributes="Bold"
FontSize="Large" />
</xct:Expander.Header>
<StackLayout BindableLayout.ItemsSource="{Binding Node}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<xct:Expander Padding="10">
<xct:Expander.Header>
<Label Text="{Binding Key.Node}" FontSize="Medium" />
</xct:Expander.Header>
<StackLayout BindableLayout.ItemsSource="{Binding Value}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding SubRoot}" FontSize="Small" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</xct:Expander>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</xct:Expander>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Model:
public class Roots
{
public string Root { get; set; }
public Dictionary<Nodes, List<SubRoots>> Node { get; set; }
}
public class Nodes
{
public string Node { get; set; }
}
public class SubRoots
{
public string SubRoot { get; set; }
}
ViewModel:
public class RootViewModel
{
public List<Roots> roots { get; private set; }
public RootViewModel()
{
CreateMonkeyCollection();
}
public void CreateMonkeyCollection()
{
List<SubRoots> subRoot = new List<SubRoots>() { new SubRoots() { SubRoot = "SubNode" } };
Dictionary<Nodes, List<SubRoots>> node = new Dictionary<Nodes, List<SubRoots>>();
node.Add(new Nodes() { Node="Nodo1"}, null);
node.Add(new Nodes() { Node="Nodo2"}, null);
node.Add(new Nodes() { Node="Nodo3"}, null);
node.Add(new Nodes() { Node="Nodo4"}, subRoot);
roots = new List<Roots>()
{
new Roots(){ Root="Root1", Node=node},
new Roots(){ Root="Root2", Node= null}
};
}
}

Unable to build my app after connecting it to sqlite

Ok so when i run my app i just get a : System.AggregateException which i tried to spot with the debuguer
and it brings me to this function in the AgendaDatabase.cs file :
public AgendaDatabase(string dbPath)
{
database = new SQLiteAsyncConnection(dbPath);
database.CreateTableAsync<Agenda>().Wait();
}
Before targetting the System.AggregateException with the debugger i also had a SystemAggregateException for this function in AcceuilPage.xaml.cs:
protected override async void OnAppearing()
{
base.OnAppearing();
AgendaCollection.ItemsSource = await App.Database.GetAgendasAsync();
}
and when i execute one more it says : unhandled exception : SQLite.SQLiteException: no such table: Agenda which is weird cause the code is supposed to create it if it doesn't exist.
This is the tutorial i am following : https://learn.microsoft.com/en-us/xamarin/get-started/quickstarts/database?pivots=windows
Thanks for your help.
I've done the steps mutiple time, even listened to similar tutorial with no solution on how to fix it : heres the code :
AgendaDatabase.cs (in Database folder)
using System;
using System.Collections.Generic;
using System.Text;
using SQLite;
using Calculette.Models;
using System.Threading.Tasks;
namespace Calculette.Database
{
public class AgendaDatabase
{
readonly SQLiteAsyncConnection database;
public AgendaDatabase(string dbPath)
{
database = new SQLiteAsyncConnection(dbPath);
database.CreateTableAsync<Agenda>().Wait();
}
public Task<List<Agenda>> GetAgendasAsync()
{
return database.Table<Agenda>().ToListAsync();
}
public Task<Agenda> GetAgendaAsync(int id)
{
return database.Table<Agenda>()
.Where(i => i.ID == id)
.FirstOrDefaultAsync();
}
public Task<int> SaveAgendaAsync(Agenda agenda)
{
if (agenda.ID != 0)
{
return database.UpdateAsync(agenda);
}
else
{
return database.InsertAsync(agenda);
}
}
public Task<int> DeleteAgendaAsync(Agenda agenda)
{
return database.DeleteAsync(agenda);
}
}
}
Agenda.cs in the Models folder
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using SQLite;
using Calculette.Database;
namespace Calculette.Models
{
public class Agenda
{
[PrimaryKey, AutoIncrement]
public int ID { get; set; }
public string Topic { get; set; }
public string Duration { get; set; }
public DateTime Date { get; set; }
public ObservableCollection<Speaker> Speakers { get; set; }
public string Color { get; set; }
public string Name { get; set; }
public string Time { get; set; }
}
}
AcceuilPage.xaml in the Views folder
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Calculette"
xmlns:pv="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
x:Class="Calculette.MainPage"
BarBackgroundColor = "White"
BarTextColor="#008A00">
<ContentPage Icon="icontache.png" BackgroundColor="#F6F8F9">
<ContentPage.Content>
<!-- ScrollView nous permet d'avoir une page scrollable-->
<ScrollView Orientation="Vertical">
<CollectionView Grid.Row="2" Margin="25" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
SelectionMode="None" x:Name="AgendaCollection">
<CollectionView.Header>
<StackLayout Orientation="Horizontal" Spacing="220">
<Label Text="Agenda" TextColor="Black" FontSize="18"/>
<ImageButton Source="iconplus.png" HeightRequest="30" WidthRequest="30" Clicked="GoToNewFormPage"></ImageButton>
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate >
<DataTemplate>
<pv:PancakeView HasShadow="True" BackgroundColor="White" VerticalOptions="StartAndExpand "
HorizontalOptions="FillAndExpand" >
<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="{Binding Color}" WidthRequest="3" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<Expander Grid.Column="1">
<Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="{Binding Date, StringFormat='{0:dd}'}" TextColor="#008A00" FontSize="27"
HorizontalOptions="Center"/>
<Label Text="{Binding Date, StringFormat='{0:MMMM}'}" TextColor="Black" FontSize="10"
HorizontalOptions="Center" Margin="0,-10,0,0" FontAttributes="Bold"/>
<ImageButton Source="iconplus.png" HorizontalOptions="Center" HeightRequest="30" WidthRequest="30" Clicked="GoToFormPage"></ImageButton>
</StackLayout>
<BoxView Grid.Column="1" BackgroundColor="#F2F4F8" WidthRequest="1" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Column="2" HorizontalOptions="Start" VerticalOptions="Center" Margin="20">
<Label Text="{Binding Topic}" TextColor="#008A00" FontSize="15" FontAttributes="Bold"/>
<Label Text="{Binding Duration}" TextColor="#2F3246" FontSize="12" Margin="0,-10,0,0"/>
</StackLayout>
</Grid>
</Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="1" BackgroundColor="#F2F4F8" WidthRequest="1" HorizontalOptions="Start"
VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Column="2" Spacing="10">
<Label Text="Tâches" TextColor="Black" FontSize="15" Margin="20,0"/>
<StackLayout BindableLayout.ItemsSource="{Binding Speakers}" HorizontalOptions="Start" VerticalOptions="Center" Margin="20,0,0,20">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label TextColor="#2F3246" FontSize="12">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="{Binding Time}"/>
<Span Text=" - "/>
<Span Text="{Binding Name}" FontAttributes="Bold"/>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid>
</Expander>
</Grid>
</pv:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</ContentPage.Content>
</ContentPage>
AcceuilPage.xaml.cs
using Calculette.ViewModel;
using Calculette.Models;
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.PancakeView;
namespace Calculette
{
public partial class MainPage : TabbedPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = this;
}
protected async void GoToFormPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Views.AgendaItemDetailPage());
}
protected async void GoToNewFormPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Views.NewFormPage());
}
protected override async void OnAppearing()
{
base.OnAppearing();
AgendaCollection.ItemsSource = await App.Database.GetAgendasAsync();
}
}
}
First of all, you must specify database model, because sqlite is not able to create table from your model.
namespace Calculette.Models
{
[Table("Agenda")]
public class Agenda
{
[PrimaryKey, AutoIncrement, Column("ID")]
public int ID { get; set; }
[Column("Topic")]
public string Topic { get; set; }
[Column("Duration")]
public string Duration { get; set; }
//public DateTime Date { get; set; }
//public ObservableCollection<Speaker> Speakers { get; set; }
[Column("Color")]
public string Color { get; set; }
[Column("Name")]
public string Name { get; set; }
[Column("Time")]
public string Time { get; set; }
}
}
Be aware that sqlite does not support
public DateTime Date { get; set; }
public ObservableCollection<Speaker> Speakers { get; set; }

Xamarin Forms - Using bindable layout to access different parts of the model

I'm trying to setup a gallery of images, that also features the ability to click on the image to show/hide a grid with image description, using the MVVM process.
However, i think my model, view model and view is not correctly setup because i am only able to display the images in the stacklayout if i use BindableLayout.ItemsSource="{Binding GalleryList.Gallery}" in the top stacklayout, but not able to access the other parts of the class, i.e. only the Gallery list.
So essentially, I cant access InfoGridVisible binding, since the it can't find/reach it? (i'm not sure to be honest).
Here is a snippet of my work so far:
View - testpage.xaml:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="testproject.Pages.testpage"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:styles="clr-namespace:testproject.Styles"
xmlns:behaviours="clr-namespace:testproject.ViewModels"
mc:Ignorable="d"
xmlns:pancakeview="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
BackgroundColor="Orange"
x:Name="Root">
<ContentPage.Content>
<ScrollView>
<Grid
Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--PROBLEM STARTS HERE -->
<StackLayout x:Name="GalleryStk" Grid.Row="1" Orientation="Vertical" BindableLayout.ItemsSource="{Binding GalleryList.Gallery}" Margin="10,0,10,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="5" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
</Grid.RowDefinitions>
<Frame x:Name="ImageFrame" CornerRadius="20" Padding="0" IsClippedToBounds="True" Grid.Row="0">
<Image Source="{Binding Image}" Aspect="AspectFill" Grid.RowSpan="2" HorizontalOptions="Center" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}" Command="{Binding TapCommand}"/>
</Image.GestureRecognizers>
</Image>
</Frame>
<!--<Image Source="ShadowOverlay" Grid.RowSpan="2" Aspect="Fill" VerticalOptions="End" HorizontalOptions="Fill" />-->
<Grid x:Name="InfoGrid" RowSpacing="10" ColumnSpacing="10" Grid.Row="0" IsEnabled="False" IsVisible="{Binding GalleryList.InfoGridVisible, Source={x:Reference InfoGrid}}">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="AUTO"/>
</Grid.ColumnDefinitions>
<BoxView Color="Black" Opacity="0.5" CornerRadius="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="0" Grid.RowSpan="5" Grid.ColumnSpan="3"/>
<Label Text="{Binding Title}" Padding="10,10,0,0" Grid.Row="0" Grid.ColumnSpan="3" Style="{StaticResource TitleLabel}" LineBreakMode="NoWrap"/>
<!--<controls:CircleImage Source="{Binding ProfileImage}" Aspect="AspectFill" Grid.Row="1" Grid.Column="0" WidthRequest="25" HeightRequest="25" />-->
<Label Text="{Binding Description}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Padding="10,0,10,0" Grid.Row="1" Grid.RowSpan="4" Grid.ColumnSpan="3" Style="{StaticResource HandleLabel}"/>
<!--<Button Text="See More" x:Name="ExpandContractButton" Clicked="ExpandContractButton_Clicked" Padding="10,0,10,0" Grid.Row="2" Grid.RowSpan="3" Grid.ColumnSpan="3"/>-->
<!--<StackLayout Orientation="Horizontal" VerticalOptions="Center" Grid.Column="2" Grid.Row="1" Spacing="5">
<Image Source="Eye"/>
<Label Text="{Binding ViewCount, StringFormat='{0:N0}'}" Style="{StaticResource HandleLabel}" />
<Label Text="views" Style="{StaticResource BodyLabel}"/>
</StackLayout>-->
</Grid>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Code behind for view - testpage.xaml.cs
public partial class testpage : ContentPage
{
private Image _galleryImage;
public Grid GalleryInfoGrid;
private static testpage _instance;
public UserProfileViewModel vm { get; }
public static testpage Instance
{
get
{
if (_instance == null)
_instance = new testpage();
return _instance;
}
}
public testpage()
{
InitializeComponent();
vm = new UserProfileViewModel();
BindingContext = new UserProfileViewModel();
//var _galleryInfoGrid = (Grid)Root.FindByName("InfoGrid");
//_galleryInfoGrid.IsEnabled = true;
//_galleryInfoGrid.IsVisible = true;
}
Model:
{
public List<GalleryImage> Gallery { get; set; }
public string InfoGridVisible;
public string InfoGridEnabled;
}
public class GalleryImage
{
public string Title { get; set; }
public string Image { get; set; }
public string Description { get; set; }
}
Services (data):
public class ProfileService
{
private static ProfileService _instance;
public static ProfileService Instance
{
get
{
if (_instance == null)
_instance = new ProfileService();
return _instance;
}
}
public GalleryList GetGallery()
{
return new GalleryList
{
InfoGridEnabled = "False",
InfoGridVisible = "False",
Gallery = new List<GalleryImage>
{
new GalleryImage { Title="sevilla01.jpg", Image = "sevilla01.jpg", Description="Description1Description1Description1Description1 Description1Description1Description1 Description1Description1" },
new GalleryImage { Title="sevilla02.jpg", Image = "sevilla02.jpg", Description="Description2 Description1Description1Description1Description1Descript ion1Description1" },
new GalleryImage {Title="sevilla03.jpg", Image = "sevilla03.jpg", Description="Description3Description1Description1Description1" },
new GalleryImage {Title="sevilla04.jpg", Image = "sevilla04.jpg", Description="Description4Description1Description1" },
new GalleryImage {Title="sevilla05.jpg", Image = "sevilla05.jpg", Description="Description5Description1" },
new GalleryImage {Title="sevilla06.jpg", Image = "sevilla06.jpg", Description="Description6" },
new GalleryImage {Title="sevilla07.jpg", Image = "sevilla07.jpg", Description="Description7Description1Description1Description1Description1Description1Description1Description1Description1 Description1" }
}
};
}
}
View Model - UserProfileViewModel.cs:
public class UserProfileViewModel : BindableObject
{
//Models
private Profile _profile;
private GalleryList _galleryList;
int taps = 0;
ICommand tapCommand;
public UserProfileViewModel()
{
Profile = ProfileService.Instance.GetProfile();
GalleryList = ProfileService.Instance.GetGallery();
tapCommand = new Command(OnTapped);
}
public ICommand TapCommand
{
get { return tapCommand; }
}
void OnTapped(object s)
{
taps++;
//var info1Grid = testpage.Instance.GalleryInfoGrid;
//info1Grid.IsVisible = true;
//info1Grid.IsEnabled = true;
//GalleryList.InfoGridEnabled = "False";
//GalleryList.InfoGridVisible = "False";
Console.WriteLine("parameter: " + taps + " " + GalleryList.InfoGridVisible);
OnPropertyChanged();
}
public Profile Profile
{
get { return _profile; }
set
{
_profile = value;
OnPropertyChanged();
}
}
public GalleryList GalleryList
{
get { return _galleryList; }
set
{
_galleryList = value;
OnPropertyChanged();
}
}
}
Apologies for the code dump, any help would be appreciated as i have been stuck on this for a few days.
If there is a better method of implementing this, i would love to hear it.
What I want you try is something like this:
public class GalleryList : BindableObject {
private string _InfoGridVisible { get; set; }
private string _InfoGridEnabled { get; set; }
public List<GalleryImage> Gallery { get; set; }
public string InfoGridVisible
{
get { return _InfoGridVisible; }
set
{
_InfoGridVisible = value;
OnPropertyChanged();
}
}
public string InfoGridEnabled
{
get { return _InfoGridEnabled; }
set
{
_InfoGridEnabled = value;
OnPropertyChanged();
}
}
}
public class GalleryImage : BindableObject {
private string _Title { get; set; }
private string _Image { get; set; }
private string _Description { get; set; }
public string Title
{
get { return _Title; }
set
{
_Title = value;
OnPropertyChanged();
}
}
public string Image
{
get { return _Image; }
set
{
_Image = value;
OnPropertyChanged();
}
}
public string Description
{
get { return _Description; }
set
{
_Description = value;
OnPropertyChanged();
}
}
}
InfoGridVisible is not a property and hence binding when performs a lookup will never find it, the way to solve this is :
public class GalleryList
{
public List<GalleryImage> Gallery { get; set; }
public string InfoGridVisible { get; set; }
public string InfoGridEnabled { get; set; }
}
In the case of how to be able to get the Object within a Command you need to tell your TapGesture how to access to that command through this 2 options:
<TapGestureRecognizer Command ="{Binding Path=BindingContext.CommandToCall, Source={x:Reference Name=ParentPage}}" CommandParameter="{Binding .}"/>
Or:
<TapGestureRecognizer Command ="{Binding Source={RelativeSource AncestorType={x:Type vm:vmWhereCommandIs}}, Path=CommandToCall}" CommandParameter="{Binding .}"/>
Just in case you need more info here there are some resources:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/relative-bindings
https://www.xamarinexpert.it/how-to-correctly-use-databinding-with-listview-and-collectionview/

Xamarin Forms CollectionView Command not working

I have a collection view with the command binded, but for some reason when I select an item the action is never called in the viewmodel, heres my ViewModel code:
public class PlatillosViewModel : INotifyPropertyChanged
{
private INavigation Navigation;
public event PropertyChangedEventHandler PropertyChanged;
public List<PlatilloModel> Platillos { get; set; }
public List<GrupoModel> Grupos { get; set; }
public ICommand SelectedGroupCommand => new Command(SelectedGroup);
public PlatillosViewModel(INavigation navigation)
{
Navigation = navigation;
PlatillosRepository repository = new PlatillosRepository();
Platillos = repository.GetAll().ToList();
GrupoRepository grupoRepository = new GrupoRepository();
Grupos = grupoRepository.GetAll().ToList();
}
public ICommand SelectedPlatilloCommand => new Command<PlatilloModel>(async platillo =>
{
await Navigation.PushAsync(new PlatilloView());
});
void SelectedGroup()
{
PlatillosRepository platillosRepository = new PlatillosRepository();
//Platillos = platillosRepository.GetFilteredByGroup(grupoSeleccionado);
}
protected virtual void OnPropertyChanged(string property = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
}
}
And here is my Page:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ComanderoMovil.Views.PlatillosView"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"
xmlns:behaviorsPack="clr-namespace:Xamarin.Forms.BehaviorsPack;assembly=Xamarin.Forms.BehaviorsPack">
<ContentPage.Content>
<StackLayout>
<SearchBar> </SearchBar>
<StackLayout Orientation="Horizontal">
<CollectionView ItemsSource="{Binding Grupos}"
HeightRequest="50"
ItemsLayout="HorizontalList"
SelectionMode="Single"
SelectedItem="{Binding SelectedGroupCommand, Mode=TwoWay}">
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView>
<Label Margin="2"
BackgroundColor="Black"
Text="{Binding nombre}"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontSize="Small"></Label>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<ListView Grid.Column="2"
HasUnevenRows="True"
SeparatorVisibility="None"
ItemsSource="{Binding Platillos}">
<ListView.Behaviors>
<behaviorsPack:SelectedItemBehavior Command="{Binding SelectedPlatilloCommand}"/>
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="2, 5, 5, 0">
<Frame OutlineColor="Black"
Padding="10"
HasShadow="False">
<StackLayout Orientation="Horizontal">
<Label Margin="10"
Text="{Binding clave_platillo}"
FontSize="Large"
HorizontalOptions="Start"></Label>
<Label Margin="10"
HorizontalTextAlignment="End"
Text="{Binding nombre}"></Label>
</StackLayout>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
I have tried adding the command to the items inside the collection view, replacing labels for buttons, but still doesn't work, I've also tried to use SelectionChangedCommand in the collection view, and still the same issue, the only way I can make it work is handling the item selection in the View, but I want to stay true to MVVM.
Here is my GrupoModel:
public class GrupoModel
{
public string clave_grupo { get; set; }
public int id_clasificacion { get; set; }
public int id_grupo { get; set; }
public string nombre { get; set; }
public bool pedirClave { get; set; }
public bool status { get; set; }
public int tipo { get; set; }
}
and here is an image of what im trying to do:
If you read the document:
When the SelectionMode property is set to Single, a single item in the
CollectionView can be selected. When an item is selected, the
SelectedItem property will be set to the value of the selected item.
When this property changes, the SelectionChangedCommand is executed
(with the value of the SelectionChangedCommandParameter being passed
to the ICommand), and the SelectionChanged event fires.
When you want to bind a Commond, you should bind to the SelectionChangedCommand instead of SelectedItem. Change your code like below and it will work:
<CollectionView
HeightRequest="50"
ItemsLayout="HorizontalList"
SelectionMode="Single"
SelectionChangedCommand="{Binding SelectedGroupCommand, Mode=TwoWay}"
>
The command should go in the class of GrupoModel instead of the PlatillosViewModel
public List<GrupoModel> Grupos { get; set; }
Should be "linked" to class GrupoModel that have properties and a commandwhich will listen, something like:
Class GrupoModel
{
public int Id { get; set; }
public string Foo { get; set; }
public ICommand SelectedGroupCommand => new Command(Completar);
private async void Completar()
{
await ViewModels.PlatillosViewModel.GetInstancia().SelectedGroup(this);
}
}
This way each element of Grupos will have a command to listen.
BTW: Shouldn't Grupos be an ObservableCollection?

Xamarin forms:Listview grouping issue

I am trying to implement listview grouping for my following JSON data.
JSON Sample:
{
"cbrainBibleBooksHB":[ {
"book":"2 John",
"cbrainBibleTOList":[
{
"bookName":"2 John",
"chapter":"1",
"pageUrl":"/edu-bible/9005/1/2-john-1"
},
{....}
]
},
{
"book":"3 John",
"cbrainBibleTOList":[
{
"bookName":"3 John",
"chapter":"1",
"pageUrl":"/edu-bible/9007/1/3-john-1"
},
{...}
]
}
]
}
I am trying to group the JSON data by its book name.
I tried like below:
Model:
public class BibleTestament
{
public List<CbrainBibleBooksHB> cbrainBibleBooksHB { get; set; }
}
public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
{
public string book { get; set; }
public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
}
public class CbrainBibleTOList
{
public string chapter { get; set; }
public string pageUrl { get; set; }
public string bookName { get; set; }
}
Viewmodel
HttpClient client = new HttpClient();
var Response = await client.GetAsync("rest api");
if (Response.IsSuccessStatusCode)
{
string response = await Response.Content.ReadAsStringAsync();
Debug.WriteLine("response:>>" + response);
BibleTestament bibleTestament = new BibleTestament();
if (response != "")
{
bibleTestament = JsonConvert.DeserializeObject<BibleTestament>(response.ToString());
}
AllItems = new ObservableCollection<CbrainBibleBooksHB>(bibleTestament.cbrainBibleBooksHB);
XAML
<ContentPage.Content>
<StackLayout>
<ListView
HasUnevenRows="True"
ItemsSource="{Binding AllItems,Mode=TwoWay}"
IsGroupingEnabled="True">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Label
Text="{Binding book}"
Font="Bold,20"
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Margin="3"
TextColor="Black"
VerticalOptions="Center"/>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout
HorizontalOptions="StartAndExpand"
VerticalOptions="FillAndExpand"
Orientation="Horizontal">
<Label
Text="{Binding cbrainBibleTOList.chapter}"
Font="20"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HorizontalOptions="CenterAndExpand"
TextColor="Black"
VerticalOptions="Center"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Label/>
</ListView.Footer>
</ListView>
</StackLayout>
</ContentPage.Content>
But no data is showing on the UI when running the project. Getting Binding: 'book' property not found on 'System.Object[]', target property: 'Xamarin.Forms.Label.Text' message on output box. It is very difficult to implement grouping for a listview in xamarin forms. Can anyone help me to do this? I have uploaded a sample project here.
You can use the latest BindableLayout of Xamarin.Forms version >=3.5 instead of using grouped Listview with less effort involved.
Update your Model class
public class CbrainBibleBooksHB
{
public string book { get; set; }
public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
}
XAML:
<ScrollView>
<FlexLayout
BindableLayout.ItemsSource="{Binding AllItems}"
Direction="Column"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0"
Text="{Binding book}"
HorizontalOptions="FillAndExpand"
BackgroundColor="LightBlue"/>
<StackLayout Grid.Row="1"
BindableLayout.ItemsSource="{Binding cbrainBibleTOList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding chapter}">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.TapCommand, Source={x:Reference Name=ParentContentPage}}" CommandParameter="{Binding .}"/>
</Label.GestureRecognizers>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
Note: Here ParentContentPage is the x:Name of parent content page which is used to give reference for command.
ViewModel:
class BibleTestamentViewModel : INotifyPropertyChanged
{
public ICommand TapCommand { get; private set; }
public BibleTestamentViewModel()
{
TapCommand = new Command(ChapterClickedClicked);
}
private void ChapterClickedClicked(object sender)
{
//check value inside sender
}
}
Output:
I tested your demo with static data and there are some issues in your case .
Firstly CbrainBibleBooksHB is a subclass of ObservableCollection ,so you don't need to set the property cbrainBibleTOList any more
public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
{
public string book { get; set; }
public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
}
Secondly , you set the wrong binding path of the label .
<Label
Text="{Binding chapter}"
...
/>
Following is my code ,because of I could not accsess to your url so I used the static data.
in xaml
...
<Label
Text="{Binding chapter}"
HeightRequest="30"
Font="20"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HorizontalOptions="CenterAndExpand"
TextColor="Black"
VerticalOptions="Center"/>
...
in viewmodel
namespace TestamentSample
{
public class BibleTestamentViewModel
{
public ObservableCollection<CbrainBibleBooksHB> AllItems
{
get;set;
}
public BibleTestamentViewModel()
{
var cbrainBibleBooksHB = new CbrainBibleBooksHB() {book = "group1",};
cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "1111" });
cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "2222" });
cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "3333" });
cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "4444" });
cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "5555" });
var cbrainBibleBooksHB2 = new CbrainBibleBooksHB() { book = "group2", };
cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "6666" });
cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "7777" });
cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "8888" });
cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "9999" });
cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "0000" });
AllItems = new ObservableCollection<CbrainBibleBooksHB>() {
cbrainBibleBooksHB,cbrainBibleBooksHB2
};
}
}
}
public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
{
public string book { get; set; }
}
You should make sure that the object which you download from remote url has the same level with my demo .
You can do this way aswell
<ListView ItemsSource="{Binding Itens}" SeparatorColor="#010d47" RowHeight="120" x:Name="lvEmpresaPending" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Nome da Empresa:" FontAttributes="Bold" ></Label>
<Label Text="{Binding Main.Nome}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="CNPJ da Empresa:" FontAttributes="Bold"></Label>
<Label Text="{Binding Main.Cnpj}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Cargo: " FontAttributes="Bold"></Label>
<Label Text="{Binding Cargo}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Inicio" FontAttributes="Bold"></Label>
<Label Text="{Binding DataInicio}"></Label>
<Label Text="Término" FontAttributes="Bold"></Label>
<Label Text="{Binding DataFim}"></Label>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
public class ModelosPPP
{
public Empresa Main { get; set; }
public string DataInicio { get; set; }
public string DataFim { get; set; }
public string Cargo { get; set; }
public string Status { get; set; }
}
public class Empresa
{
public string Nome { get; set; }
public string Cnpj { get; set; }
}

Resources