Adding a drop down area option on my list view - xamarin

Question

I’m wondering if you are able to add a drop down area option to a list view. For example when the user clicks on the specific row a drop down area appears below it showing various information and when they click it again it goes away.
Is this possible using xamarin forms ?

Answer 1

You cannot add a drop-down control inside a list view in Xamarin Forms. However, you could create a custom List View with custom Item Templates that contains a Stacklayout "hidden" from the user until the user taps on the row to re-enable the visibility of the "hidden" Stacklayout pushing down other rows. You may need to add an extra property to the ViewModel in order to control individual rows visibility.

Answer 2

If you check this C# corner guide it shows you how to come up with an Expandable ListView in Xamarin Forms.
You will have to make changes as per your requirement but your XAML would look something like this:
<ListView x:Name="HotelsList" BackgroundColor="White" IsGroupingEnabled="True" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" ItemsSource="{Binding Items}" RefreshCommand="{Binding LoadHotelsCommand}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label VerticalOptions="Center" FontAttributes="Bold" FontSize="Medium" Text="{Binding .RoomName}" TextColor="Black" VerticalTextAlignment="Center" /> </StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label FontAttributes="Bold" FontSize="Small" Text="{Binding Name}" TextColor="Gray" VerticalTextAlignment="Center" />
<Image x:Name="ImgA" Source="{Binding StateIcon}" Margin="0,0,5,0" HeightRequest="20" WidthRequest="20" HorizontalOptions="End" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference currentPage}, Path=BindingContext.RefreshItemsCommand}" NumberOfTapsRequired="1" CommandParameter="{Binding .}" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
</ListView>
And your ViewModel as below:
public class HotelViewModel: ObservableRangeCollection < RoomViewModel > , INotifyPropertyChanged {
// It's a backup variable for storing CountryViewModel objects
private ObservableRangeCollection < RoomViewModel > hotelRooms = new ObservableRangeCollection < RoomViewModel > ();
public HotelViewModel(Hotel hotel, bool expanded = false) {
Hotel = hotel;
_expanded = expanded;
foreach(Room room in hotel.Rooms) {
Add(new RoomViewModel(room));
}
if (expanded) AddRange(hotelRooms);
}
public HotelViewModel() {}
private bool _expanded;
public bool Expanded {
get {
return _expanded;
}
set {
if (_expanded != value) {
_expanded = value;
OnPropertyChanged(new PropertyChangedEventArgs("Expanded"));
OnPropertyChanged(new PropertyChangedEventArgs("StateIcon"));
if (_expanded) {
AddRange(hotelRooms);
} else {
Clear();
}
}
}
}
public string StateIcon {
get {
if (Expanded) {
return "arrow_a.png";
} else {
return "arrow_b.png";
}
}
}
public string Name {
get {
return Hotel.Name;
}
}
public Hotel Hotel {
get;
set;
}
}
Check the above guide where the blogger and flawlessly explained all the aspects related to the use of this
Goodluck,
Revert in case of queries.