Weird ListVew behavior

Question

My initial ListView appears to be loading all the categories correctly, but it docent show anything

 public ICommand PageAppearCommand { get; set; }  
  
        public ObservableCollection<string> Categories { get; set; }  
  
        public ObservableCollection<CategoryExpenses> CategoryExpenses { get; set; }  
  
        public CategoryPageModel() {  
  
            Categories = new ObservableCollection<string>();  
            CategoryExpenses = new ObservableCollection<CategoryExpenses>();  
            PageAppearCommand = new Command(AppearAction);  
        }  
  
        private void AppearAction() {  
  
            GetCategories();  
            ExpensePerCategory();  
        }  
  
        private void GetCategories() {  
  
            Categories.Add("Housing");  
            Categories.Add("Debt");  
            Categories.Add("Heath");  
            Categories.Add("Food");  
            Categories.Add("Travel");  
            Categories.Add("Other");  
        }  
  
        private void ExpensePerCategory() {  
  
            CategoryExpenses.Clear();  
  
            float TotalExpemneAmmount = Exenpse.TotalExpenseAmmount();  
            foreach (var c in Categories) {  
  
                var expenses = Exenpse.GetExpenses(c);  
                var porcentageAmmount = expenses.Sum(e => e.Ammount);  
  
                CategoryExpenses ce = new CategoryExpenses() {  
                    Category = c,  
                    Porcentage = porcentageAmmount / TotalExpemneAmmount  
                };  
  
                CategoryExpenses.Add(ce);  
            }  
        }  
    }  

Xaml

    <ContentPage.BindingContext>  
        <vm:CategoryPageModel />  
    </ContentPage.BindingContext>  
  
    <ContentPage.Behaviors>  
        <community:EventToCommandBehavior Command="{Binding PageAppearCommand}" EventName="Appearing" />  
    </ContentPage.Behaviors>  
  
    <ContentPage.Content>  
        <ListView ItemsSource="{Binding CategoryExpenses}">  
            <ListView.ItemTemplate>  
                <DataTemplate>  
                    <ViewCell>  
                        <StackLayout Margin="20">  
                            <Label Text="{Binding Category}" />  
                            <ProgressBar Progress="{Binding Porcentage}" />  
                        </StackLayout>  
                    </ViewCell>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </ContentPage.Content>  
</ContentPage>  

When I start the app, I can see that my Observable has all the categories

https://github.com/eduardoagr/Xamarin-Master-Class

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) I made my repo public

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

Your ListView doesn't show anything because of the Margin of StackLayout in ViewCell( <StackLayout Margin="20"> ), try to remove the Margin, then you will see the Label and ProgressBar on page.

In addition, the value of Porcentage always be NaN, because porcentageAmmount and TotalExpemneAmmount are 0. ( Porcentage = porcentageAmmount / TotalExpemneAmmount ) I'm not very clear about what you want, but I'm afraid you have to check these values.

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.