bind collectionview footer to data xamarin.forms - xamarin.forms

Question

i have a collectionview with data that i get from sql server database using a web api. the collcetionview populates successfully. now i wanted to add a footer to display the total of debit and credit columns. but i couldn't make it work. this is the code of my 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="isc_alphaApp.account_details">
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="Beige" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Label HorizontalOptions="CenterAndExpand" Margin="20,20" FontAttributes="Bold" TextColor="Black" Text="" x:Name="acc_curlabel"/>
<CollectionView x:Name="accountdetailslst" Footer="{Binding}">
<CollectionView.Header>
<Grid Padding="2" ColumnSpacing="1" RowSpacing="1" >
<Grid.RowDefinitions>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.45*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.35*" />
<ColumnDefinition Width="0.35*" />
<ColumnDefinition Width="0.35*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="Date"
FontAttributes="Bold"
FontSize="14"
LineBreakMode="TailTruncation"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
<Label Grid.Column="1"
Text="Jv#"
FontAttributes="Bold"
LineBreakMode="TailTruncation"
FontSize="14"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
<Label
TextColor="Black"
Grid.Column="2"
FontSize="14"
Text="Ref"
LineBreakMode="TailTruncation"
FontAttributes="Bold"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
<Label
Grid.Column="3"
FontSize="14"
Text="Description"
LineBreakMode="TailTruncation"
FontAttributes="Bold"
HorizontalOptions="Center"
TextColor="Black"
VerticalOptions="Center"
/>
<Label
FontSize="14"
TextColor="Black"
Grid.Column="4"
Text="Debit"
LineBreakMode="TailTruncation"
FontAttributes="Bold"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
<Label
FontSize="14"
TextColor="Black"
Grid.Column="5"
Text="Credit"
LineBreakMode="TailTruncation"
FontAttributes="Bold"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
<Label
TextColor="Black"
Grid.Column="6"
FontSize="14"
Text="Balance"
LineBreakMode="TailTruncation"
FontAttributes="Bold"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.45*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.35*" />
<ColumnDefinition Width="0.35*" />
<ColumnDefinition Width="0.35*" />
</Grid.ColumnDefinitions>
<Label HorizontalOptions="Center"
Grid.Column="0"
TextColor="Black"
Text="{Binding jvdate}"
VerticalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="12"/>
<Label
Grid.Column="1"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="Black"
Text="{Binding jvnbr}"
FontSize="12"
LineBreakMode="TailTruncation" />
<Label
Grid.Column="2"
TextColor="Black"
Text="{Binding jvref}"
LineBreakMode="TailTruncation"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Italic"
/>
<Label
TextColor="Black"
Grid.Column="3"
VerticalOptions="Center"
HorizontalOptions="Center"
Text="{Binding desc}"
FontSize="12"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
/>
<Label
Grid.Column="4"
TextColor="Black"
Text="{Binding jvdebit}"
FontSize="12"
LineBreakMode="TailTruncation"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Italic"
/>
<Label
Grid.Column="5"
TextColor="Black"
Text="{Binding jvcredit}"
LineBreakMode="TailTruncation"
VerticalOptions="Center"
FontSize="12"
HorizontalOptions="Center"
FontAttributes="Italic"
/>
<Label
Grid.Column="6"
TextColor="Black"
Text="{Binding balance}"
LineBreakMode="TailTruncation"
FontSize="12"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Italic"
/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.FooterTemplate >
<DataTemplate>
<Grid Padding="2" ColumnSpacing="1" RowSpacing="1" x:Name="gridfooter" >
<Grid.RowDefinitions>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.45*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.35*" />
<ColumnDefinition Width="0.35*" />
<ColumnDefinition Width="0.35*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="3"
Text="{Binding total}"
FontAttributes="Bold"
x:Name="total"
FontSize="14"
LineBreakMode="TailTruncation"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
<Label Grid.Column="4"
x:Name="totaldebit"
Text="{Binding Totjvdebit}"
FontAttributes="Italic"
FontSize="12"
LineBreakMode="TailTruncation"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
<Label Grid.Column="5"
Text="{Binding Totjvcredit}"
FontAttributes="Bold"
FontSize="14"
LineBreakMode="TailTruncation"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
<Label Grid.Column="6"
Text="{Binding Totbalance}"
FontAttributes="Bold"
FontSize="14"
LineBreakMode="TailTruncation"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
</Grid>
</DataTemplate>
</CollectionView.FooterTemplate>
</CollectionView>
<StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="#ffc40c">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckcol">
<Image Margin="0,10,0,10" x:Name="imgAdd" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="del" Style="{StaticResource ButtonNavigationBarLabelStyle}" x:Name="col_add_remove"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckfilter">
<Image Margin="0,10,0,10" x:Name="imgfilter" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Filter" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckshare">
<Image Margin="0,10,0,10" x:Name="imgshare" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Share" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<ContentView x:Name="popupLoadingView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="40" HeightRequest="40" ></ActivityIndicator>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
this is the code of my xaml.cs
public partial class account_details : ContentPage
{
List<accountdetails> listacc_collection = new List<accountdetails>();
public string total = "";
public account_details(string acc, string cur, string accname)
{
InitializeComponent();
BindingContext = this;
imgAdd.Source = ImageSource.FromResource("isc_alphaApp.remove_ic.png");
imgfilter.Source = ImageSource.FromResource("isc_alphaApp.filter_ic.png");
imgshare.Source = ImageSource.FromResource("isc_alphaApp.share_icon.png");
loadData(acc,cur,accname);
}
async private void loadData(string account, string curr,string acc_name )
{
acc_curlabel.Text = account + " - " + curr + " - " + acc_name;
popupLoadingView.IsVisible = true;
activityIndicator.IsRunning = true;
HttpClient client = new HttpClient();
string url = "http://192.168.43.99/siteisc/api/values";
string uri = url + "/getaccountdetails";
try
{
HttpResponseMessage response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode == true)
{
string content = await response.Content.ReadAsStringAsync();
var listacc_details = JsonConvert.DeserializeObject<List<allaccountdetails>>(content);
var list_filtered = listacc_details.FindAll(x => x.JvAccount == account && x.CurrencyCode == curr);
decimal blnce_row = 0;
List<String> l = new List<String>();
for (int i = 0; i < list_filtered.Count; i++)
{
blnce_row = decimal.Parse(list_filtered[i].JvDebit.ToString()) - decimal.Parse(list_filtered[i].Jvcredit.ToString()) + blnce_row;
decimal rnd_blnce = Math.Round(blnce_row, 2);
l.Add(rnd_blnce.ToString());
}
l.ToArray();
for (int i = 0; i < list_filtered.Count; i++)
{
listacc_collection.Add(new accountdetails { desc = list_filtered[i].JvDescription, jvnbr = list_filtered[i].jvnbr.ToString(), jvcredit = list_filtered[i].Jvcredit.ToString(), jvdate = DateTime.Parse(list_filtered[i].JvDate).ToString(("dd-M-yyyy")), jvdebit = list_filtered[i].JvDebit.ToString(), jvref = list_filtered[i].jvref1, balance = l[i] });
}
var list_acc_footer = new List<footeraccount>();
list_acc_footer.Add(new footeraccount { total = "Total in" + " " + curr, Totjvdebit = getTotal_dbt(listacc_collection), Totjvcredit = getTotal_crdt(listacc_collection),Totbalance= getTotal_dbt(listacc_collection) - getTotal_crdt(listacc_collection) });
accountdetailslst.ItemsSource = listacc_collection;
total = "Total in" + " " + curr;
popupLoadingView.IsVisible = false;
activityIndicator.IsRunning = false;
}
else
{
await DisplayAlert("Operation Failed", "Response Failed!", "Cancel");
}
}
catch (System.Net.WebException exp)
{
await DisplayAlert("Connection Failed", "Please Check Your Internet Connection!", "Cancel");
}
}
}
}
i tried to do something similar to the code in this link https://www.c-sharpcorner.com/article/xamarin-forms-using-listview-headertemplate-and-footertemplate-to-display-data/ but it didn't work. this is what i did:
footer.cs
public class footer
{
public List<accountdetails> GetAll { get; private set; }
public footer()
{
GetAll=new List<accountdetails> { new accountdetails { jvdate = "sksj", jvnbr = "idjd", desc = "kjsjs", balance = "ksjh", jvcredit = "4", jvdebit = "3", jvref = "jy" } };
}
}
AccountViewModel.cs:
public class AccountViewModel
{
public string total = "";
public List<accountdetails> items { get; private set; }
public AccountViewModel()
{
var service = new footer();
items = service.GetAll;
total = service.GetAll.Count.ToString();
}
}
}
and in the xaml.cs i just wrote this:
public account_details(string acc, string cur, string accname)
{
InitializeComponent();
BindingContext = new AccountViewModel();
}
but it didn't work. nothing appeared in my footer. what should i do?
thanks in advance

Answer 1

Original Poster (rana hd) says in a comment on the question, that making those fields properties worked.
E.g. what was this in the view model:
public string total = "";
Needed to be changed to this:
public string total { get; set; } = "";