Xamarin DataBinding how to do

Question

So i'm trying to fill my ListView in MainPage.xaml , And i need to have max 5 members in that List<>, ObservableCollection<>, or what ever else.

EDIT placed all code

So here is my TransactionModel.class

public class TransactionModel
{
    public string Description{ get; set; }
    public string Value { get; set; }
    public string Date { get; set; }
}

My MainPage.cs

using BankApp.Model;
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Globalization;
using System.Linq;
using Xamarin.Forms;
    namespace BankApp
    {
        public partial class MainPage : ContentPage, INotifyPropertyChanged
        {
            public ObservableCollection<TransactionModel> transList = new ObservableCollection<TransactionModel>();
            public ObservableCollection<TransactionModel> TransList { get { return transList; } }
    
    
            public ObservableCollection<TransactionModel> SortList 
            { 
                get {
                    return (ObservableCollection<TransactionModel>)transList.OrderBy(t => t.TransactionDate).Take(5);
                } 
            
            }

            public MainPage()
            {
                InitializeComponent();
    
                DummyData();
    
                transactionView.IsEnabled = false;
            }
    
            // Navigation
            private async void Button_Profile(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new Profile());
            }
    
            private async void Button_Transaction(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new Transaction());
            }
    
            private async void Button_Support(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new Support());
            }
    
            private async void Button_Help(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new Help());
            }
    
            // Dummy Data
            public void DummyData()
            {
                string dt = DateTime.Now.ToString("dd.MM.yyyy");
    
                transList.Add(new TransactionModel { Description = "1Naknada za SMS servis", TransactionDate = "03.11.2020", Value = "RSD 840,00" });
                transList.Add(new TransactionModel { Description = "2Uplata rate", TransactionDate = "25.10.2020", Value = "RSD 17800,00" });
                transList.Add(new TransactionModel { Description = "3Uplata rate", TransactionDate = "25.9.2020", Value = "RSD 17800,00" });
                transList.Add(new TransactionModel { Description = "4Uplata rate", TransactionDate = dt, Value = "RSD 800,00" });
                transList.Add(new TransactionModel { Description = "5Uplata rate", TransactionDate = dt, Value = "RSD 800,00" });
                transList.Add(new TransactionModel { Description = "6Uplata rate", TransactionDate = dt, Value = "RSD 800,00" });
    
                transactionView.ItemsSource = SortList;
    
            }
        }
   
        // Change Color of the Balance label
        public class ColorConvert : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                string s = (string)value;
                if(!string.IsNullOrEmpty(s))
                {
                    if(s.Contains("-"))
                    {
                        return Color.Red;
                    }
                    else
                    {
                        return Color.Green;
                    } 
                }
                return Color.Green;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    
    }

And here is my ListView that i want to populate with the following dummyData

<StackLayout Orientation="Vertical" MinimumHeightRequest="210">
            
            <Label Text="Lista transakcija" FontSize="16" TextColor="Blue" FontAttributes="Bold" Margin="10,0,0,0"/>

            <BoxView HeightRequest="1" Color="Black" HorizontalOptions="FillAndExpand"/>

            <ListView x:Name="transactionView"  SeparatorColor="Black"
                      ItemsSource ="{Binding SortList}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                </Grid>
                                <StackLayout Grid.Column="0" VerticalOptions="Start">
                                    <Label x:Name="txtDesc" Text="{Binding Description}" TextColor="Blue" FontSize="12" Margin="5, 0, 0, 0" />
                                    <Label x:Name="txtDate" Text="{Binding TransactionDate}" TextColor="Blue" FontSize="12" Margin="5, 0, 0, 0"/>
                                </StackLayout>
                                <StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
                                    <Label x:Name="txtValue" Text="{Binding Value}" TextColor="Blue" FontSize="12" Margin="0, 10, 15, 0" HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </StackLayout>

TransactionPage.xaml

<StackLayout Orientation="Vertical" MinimumHeightRequest="250">

            <ListView x:Name="transactionView"  SeparatorColor="Black"
                      ItemsSource ="{Binding TransList}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                </Grid>
                                <StackLayout Grid.Column="0" VerticalOptions="Start">
                                    <Label x:Name="txtDesc" Text="{Binding Description}" TextColor="Blue" FontSize="12" Margin="5, 0, 0, 0" />
                                    <Label x:Name="txtDate" Text="{Binding TransactionDate}" TextColor="Blue" FontSize="12" Margin="5, 0, 0, 0"/>
                                </StackLayout>
                                <StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
                                    <Label x:Name="txtValue" Text="{Binding Value}" TextColor="Blue" FontSize="12" Margin="0, 10, 15, 0" HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

So i make it work and populate the ListView, but what i need is that in ListView i can have max 5 data(5 dummyData) and each new i enter will replace the oldest one, so i need to have 5 latest added in that List<>(or what ever). I got stuck and was searching a lot on internet but couldn't find anything. So i need to show max 5 data in ListView and those 5 are the latest we added from DummyData.

Why would you keep more than n items (5 in your case) in ObservableCollection? ObservableCollection is an ordered collection, so if you add n elements, you can delete the first n elements. Just keep number of elements you want to show. — Nenad, Dec 02 '20 at 14:14
Well i would need the same list to show in other class where i will show all ObservableCollection data in the ListView. So i need to restrict to 5 in MainPage, and in other Page i need to show all the data i have in list, Mozemo na chat na srpskom. — Olatunji, Dec 02 '20 at 14:25
then maintain two lists, ones that contains all of your data, and a Display list that contains just the 5 you want to display — Jason, Dec 02 '20 at 15:02

Jason · Accepted Answer · 2020-12-03T21:28:01.540

3

create a read-only property like this

public ObservableCollection<TransactionModel> FilteredData
{ 
  get { 
    return new ObservableCollection<TransactionModel>(dumData.OrderBy(t => t.TransactionDate).Take(5));
  } 
}

edited Dec 03 '20 at 21:28

answered Dec 02 '20 at 15:38

Jason

86,222
15
131
146

So i just put that in my MainPage? – Olatunji Dec 02 '20 at 17:44
Wherever you're currently getting the data from - the VM or the code behind or however you have it setup. – Jason Dec 02 '20 at 17:46
well i'm filling data in MainPage through dummyData – Olatunji Dec 02 '20 at 18:26
OK, put it there then. – Jason Dec 02 '20 at 19:01
it didn't help me i get the same list – Olatunji Dec 02 '20 at 21:01
are you binding your ListView to the new filtered list? – Jason Dec 02 '20 at 21:02
Yeah i did but it is still showing me the same number of members that i have (currently 6) and i even changed .Take(4). And it also don't even order it. – Olatunji Dec 02 '20 at 21:13
you are storing your TransactionDate as a string, that is generally not a good idea. Otherwise I can't say without seeing what you've implemented. – Jason Dec 02 '20 at 21:19
i can send you most of the code in chat if u want – Olatunji Dec 02 '20 at 21:29
@ilke97 You could show your complete code.I think the answer Jason gave you should work. – Leo Zhu Dec 03 '20 at 08:54
you can't cast LINQ to an ObservableCollection - see https://stackoverflow.com/questions/1465285/cast-linq-result-to-observablecollection – Jason Dec 03 '20 at 21:12
it shows me error when i try to put it in transList = new ObservableCollection(Enumerable); it says : is a type, which is not valid in the given context – Olatunji Dec 03 '20 at 21:18
You need to pass your linq query as the argument – Jason Dec 03 '20 at 21:20
sorry Jason, but i'm first time trying to do this so i kinda don't understand you well – Olatunji Dec 03 '20 at 21:23
Thank you very much, working like a charm. – Olatunji Dec 03 '20 at 22:33

Xamarin DataBinding how to do

1 Answers1