Xamarin Forms dynamic list view

Question

I am trying to create a list in xamarin.forms, which is a bit complicated. The user should be able to click an item in the list, and he should expand to something more. The larger element should now display some additional user interface components that are specifically associated with this view.

I wonder how I can approach this problem. This is about a list that has dynamic size items. After clicking on an element, additional views related to the element will be displayed. Should this be done in Xamarin.ios and Xamarin.droid or is it recommended to try to achieve this in xamarin.forms?

I will post the image, this is not good and it may take some increase, but it shows 4 elements. The third has expanded, and so you can see the counter and button on it.

Only one element can be expanded at a time (I may have to process it in the ViewModel), and when I click on another element, the old one should be hidden.

Edit:

Thanks to Rohit, I started to implement the solution in Xamarin.Forms, but actually it does not work, only some small problems in the way the string expands. See the figure below. I skip the counter and just use the button for simplicity. The extended line overlaps the line below it. The first image before clicking, the second - after clicking on an element called "Two".

View

<?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="simpletest.PlayGroundPage"> <ContentPage.Content> <StackLayout> <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AllItems}" SelectedItem="{Binding MySelectedItem}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout VerticalOptions="FillAndExpand"> <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal"> <Label Text="{Binding MyText}" /> <Image Source="{Binding MyImage}" /> </StackLayout> <Button Text="button1" IsVisible="{Binding IsExtraControlsVisible}" /> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage.Content> </ContentPage> 

Paragraph

  public class Item : INotifyPropertyChanged { public Item(string text, string image, int id) { _myText = text; _myImage = image; _id = id; _isExtraControlsVisible = false; } private string _myText; private string _myImage; private bool _isExtraControlsVisible; private int _id; public event PropertyChangedEventHandler PropertyChanged; public int Id { get { return _id; } set { _id = value; } } public string MyText { get { return _myText; } set { _myText = value; OnPropertyChanged("MyText"); } } public string MyImage { get { return _myImage; } set { _myImage = value; OnPropertyChanged("MyImage"); } } public bool IsExtraControlsVisible { get { return _isExtraControlsVisible; } set { _isExtraControlsVisible = value; OnPropertyChanged("IsExtraControlsVisible"); } } private void OnPropertyChanged(string property) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } 

ViewModel:

  class PlayGroundViewModel : INotifyPropertyChanged { private Item _mySelectedItem; public PlayGroundViewModel(ObservableCollection<Item> allItems) { AllItems = allItems; _mySelectedItem = allItems.First(); } public ObservableCollection<Item> AllItems { get; set; } public Item MySelectedItem { get { return _mySelectedItem; } //Added a field for this one, mainly for debugging. set { foreach (Item x in AllItems) //Changed to non-linq since it is not a list. { x.IsExtraControlsVisible = false; } if (value != null) { foreach (Item x in AllItems) { if (x.Id.Equals(value.Id)) { x.IsExtraControlsVisible = true; _mySelectedItem = x; } } } SetChangedProperty("MySelectedItem"); } } public event PropertyChangedEventHandler PropertyChanged; private void SetChangedProperty(string property) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } 

CodeBehind:

  public partial class PlayGroundPage : ContentPage { public PlayGroundPage() { InitializeComponent(); ObservableCollection<Item> items = new ObservableCollection<Item>(); items.Add(new Item("One", "", 0)); items.Add(new Item("Two", "", 1)); items.Add(new Item("Three", "", 2)); PlayGroundViewModel weekViewModel = new PlayGroundViewModel(items); BindingContext = weekViewModel; } } 

Answer 1

You can implement it as follows, using XAML, ViewModel, ObservableCollection.

XAML:

 <ListView VerticalOption="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AllItems}" SelectedItem="{Binding MySelectedItem}" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout VerticalOptions="FillAndExpand"> <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal"> <Label Text="{Binding MyText}" /> <Image Source="{Binding MyImage}" /> </StackLayout> <Button Text="button" IsVisible="{Binding IsExtraControlsVisible}" /> <Spinner IsVisible="{Binding IsExtraControlsVisible}" /> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> 

ViewModel:

 public ObservableCollection<Item> AllItems { get { return _allItems; } set { _allItems = value; OnPropertyChanged(); } } public Item MySelectedItem { get { return _mySelectedItem; } set { _mySelectedItem = value; OnPropertyChanged(); foreach (var item in AllItems) { item.IsExtraControlsVisible = false; } var selectedItem = AllItems.FirstOrDefault(x => x.Equals(value)); if (selectedItem != null) { selectedItem.IsExtraControlsVisible = true; } } } 

Item.cs:

 public class Item : INotifyPropertyChanged { private string _myText; private string _myImage; private bool _isExtraControlsVisible; private int _id; public int Id { get; set; } public string MyText { get{ return _myText; } set { _myText = value; OnPropertyChanged(); } } public string MyImage { get{ return _myImage; } set { _myImage = value; OnPropertyChanged(); } } public bool IsExtraControlsVisible { get{ return _isExtraControlsVisible; } set { _isExtraControlsVisible = value; OnPropertyChanged(); } } } 

Please find here the demo - XamarinForms_Dynamic_ListView_Item .