Expand listview item on itemtapped - xaml

Question

I'm trying to make an expandable listview item when i press the name of an item .. the problem is that the value of IsVisiable change but that don't reflect on the page and it's stays the same (only the name of the item is shown not all the hidden details) .
First I added a IsVisiable prop to my model
public class Item
{
public int Id { get; set; }
public string UserId { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string Quality { get; set; }
public int Size { get; set; }
public decimal Price { get; set; }
public bool IsVisiable { get; set; }
}
This is the content page
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:XamarinApp.ViewModels;assembly=XamarinApp"
x:Class="XamarinApp.ViewModels.Views.CustomerProfilePage">
<ContentPage.BindingContext>
<viewModels:CustomerProfileViewModel/>
</ContentPage.BindingContext>
<ListView ItemsSource="{Binding Items}"
HasUnevenRows="True"
ItemTapped="ListView_OnItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Name}" ></Label>
<StackLayout IsVisible="{Binding IsVisiable}">
<Label Text="{Binding Category}" ></Label>
<Label Text="{Binding Quality}" ></Label>
<Label Text="{Binding Size}" ></Label>
<Label Text="{Binding Price} "></Label>
</StackLayout>
<!-- <Label Text="المسافة بينك وبين العميل"></Label> -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I create a onItemTapped method
public partial class CustomerProfilePage : ContentPage
{
public CustomerProfilePage (string userId)
{
InitializeComponent ();
this.BindingContext = new CustomerProfileViewModel(userId);
}
private void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)
{
var vm = BindingContext as CustomerProfileViewModel;
var Item = e.Item as Item;
vm?.HideOrShowItem(Item);
}
}
Then i added HideOrShow item method for control in my vm
public class CustomerProfileViewModel:INotifyPropertyChanged
{
public CustomerProfileViewModel()
{
}
public CustomerProfileViewModel(string cutomerId)
{
CustomerId = cutomerId;
if (GetItems.CanExecute(null))
GetItems.Execute(null);
}
public List<Item> Items
{
get => _items;
set
{
if (Equals(value, _items)) return;
_items = value;
OnPropertyChanged();
}
}
public string CustomerId { get;}
private List<Item> _items;
private Item _oldItem;
ApiServices _apiServices = new ApiServices();
public void HideOrShowItem(Item item)
{
if (_oldItem == item)
{
item.IsVisiable = !item.IsVisiable;
UpdateItems(item);
}
else
{
if (_oldItem != null)
{
_oldItem.IsVisiable = false;
UpdateItems(_oldItem);
}
item.IsVisiable = true;
UpdateItems(item);
}
_oldItem = item;
}
private void UpdateItems(Item item)
{
var index = Items.IndexOf(item);
Items.Remove(item);
Items.Insert(index, item);
}
public ICommand GetItems
{
get
{
return new Command(async () =>
{
var accesstoken = Settings.AccessToken;
Items = await _apiServices.GetItemsForSpecificUser(accesstoken, CustomerId);
});
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

Answer 1

The problems I can see:
Your class Item must implement INotifyPropertyChanged interface
I also see that you can update your list Items. So to reflect the list changes in your UI, Items must be an ObservableCollection<Item>
Updated Item class (should look something like that):
public class Item : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private int _id;
private bool _isVisible;
// . . .
public int Id
{
get => _id;
set
{
if (_id != value)
{
_id = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(this.Id)));
}
}
}
public bool IsVisible
{
get => _isVisible;
set
{
if (_isVisible != value)
{
_isVisible = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(this.IsVisible)));
}
}
}
// . . . Other properties
And in your ViewModel, declare the list of items:
private ObservableCollection<Item> _items;
public ObservableCollection<Item> Items{
get => _items;
private set{
_items = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(this.Items)));
}
}
Try with this and tell us if it's ok...