Listview expander

Question

I have to put an expander on every circle (Where you can see the abbreviation of the car)

I have my ListViewPage Xaml

And I have two more views, the CarPageView

And the circleView

VM

   public Command PressedCommand  
       {  
           get; set;  
       }  
     
       public Command LongPressedCommand  
       {  
           get; set;  
       }  
       public Command DeleteCommand  
       {  
           get; set;  
       }  
     
       public SampleViewModel()  
       {  
           DeleteCommand = new Command(DeleteAction);  
           LongPressedCommand = new Command(LongPressedAction);  
           PressedCommand = new Command(PressAction);  
           GridSpan = Device.Idiom == TargetIdiom.Phone ? 1 : 2;  
           BuildCars();  
       }  
     
       private void DeleteAction(Car obj)  
       {  
           Cars.Remove(obj);  
       }  
     
       private async void PressAction(Car obj)  
       {  
           if (obj != null && obj.Make == CarMake.Mercedes)  
           {  
               var MercedesView = new MecedesSpecificView()  
               {  
                   BindingContext = new MecedesSpecificViewModel(obj)  
               };  
               await Application.Current.MainPage.Navigation.PushAsync(MercedesView);  
           }  
           else  
           {  
               var DetailsPage = new ListViewDetailPage  
               {  
                   BindingContext = new ListViewDetailPageViewModel(obj)  
               };  
               await Application.Current.MainPage.Navigation.PushAsync(DetailsPage);  
     
           }  
       }  
     
       private async void LongPressedAction(Car obj)  
       {  
           var ans = await Application.Current.MainPage.DisplayAlert("Warning", "do you want to delete?", "OK", "Cancel");  
     
           if (ans)  
           {  
               Cars.Remove(obj);  
           }  
       }  
     
     
       private int _gridSpan;  
     
       public int GridSpan  
       {  
           get => _gridSpan;  
           set => SetProperty(ref _gridSpan, value);  
       }  
     
       private void BuildCars()  
       {  
           Cars = new ObservableCollection  
           {  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Notes = "test car", Description = "Some description", Color = Color.Black },  
               new Car { Abbreviation = "BMW", Make=CarMake.BMW, Name = "X5", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 10)), Color = Color.Purple },  
               new Car { Abbreviation = "M", Make=CarMake.Mercedes, Name = "AMG C Class", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 5)), Color = Color.CornflowerBlue},  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.Brown },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 3)), Color = Color.Orange },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.DarkBlue },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 7)), Color = Color.DarkOrange },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.OrangeRed },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 4)), Color = Color.Violet},  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 2)), Color = Color.DarkSalmon },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.Green },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 6)), Color = Color.GreenYellow},  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 3)), Color = Color.LawnGreen},  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.SkyBlue },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = string.Concat(Enumerable.Repeat($"Some description {Environment.NewLine}", 5)), Color = Color.LightCyan },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.PaleTurquoise },  
               new Car { Abbreviation = "VW", Make=CarMake.VolksWagen, Name = "Polo", Description = "Some description", Color = Color.Purple },  
     
           };  
       }  
     
       private ObservableCollection _cars;  
     
       public ObservableCollection Cars  
       {  
           get  
           {  
               return _cars;  
           }  
           set  
           {  
               SetProperty(ref _cars, value);  
           }  
       }  
     
   }

What I do not understand is, that I already tried to use the xamarin community expander on the CirclePage, but for some reason, it did not work.

This is the Instruccion that I got

Using the ListView Page:
add an expand/collapse animation when tapping the circle

I tried to add the expander, but I think that because of the TouchEffect on every cell, it doesn't work.

So how can I have the two o them play nice with each other, I want to maintain the ability to navigate, but I also want to be able to expand when I press the circle

https://reccloud.com/u/bg8pvw1 // this is how it is right now

Oh by the way I was able to use a collectonView after all, that is wwht I am making this update

Accepted Answer

Hello,

It is caused by there is no Expander.Header and Expander.ContentTemplate in your xaml.

It is needed to set them to expand or collapse the content in to header.

You could refer to the following code:

Integrate the circle with the text box as the header in the circleView:

The CarPageView:

Please refer to Xamarin Community Toolkit Expander to get more details.

Best Regards,

Alec Liu.

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.

Listview expander

0 additional answers