Accordion UI Design - Simple Accordion ListView

  Today, I am designing UI of Accordion

Please, support my blog by clicking on our sponsors ad!

As you see in video there are three types of designs:

• Simple Accordion
• https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-designs-part-1.html
• Simple Accordion Listview: 
• https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-simple-accordion.html
• Frame Accordion Listview:
• https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-frame-accordion.html

 For Font awesome, please watch video:

https://www.youtube.com/watch?v=0l0LYFdLEGs&t=220s

EmployeeViewModel.cs

 public class EmployeeDetailViewModel
    {
        public string Qualification { get; set; }
        public string Experience { get; set; }
        public string Designation { get; set; }

    }

    public class EmployeeViewModel : ObservableCollection<EmployeeDetailViewModel>, INotifyPropertyChanged
    {
        public string Name { get; set; }
        public bool IsExpanded { get; set; } = false;
        public string Icon { get; set; } = Regular.Angle_Down;
    }

EmployeeModel.cs

 public class EmployeeModel
    {
        public ObservableCollection<EmployeeViewModel> GetList()
        {
            ObservableCollection<EmployeeViewModel> groupEmpList = new ObservableCollection<EmployeeViewModel>();

            try
            {
                EmployeeViewModel emp = new EmployeeViewModel() { Name = "Job Steve", Icon = Regular.Angle_Down,  };
                emp.Add(new EmployeeDetailViewModel() { Designation = "Senior Developer", Experience = "7 Year",Qualification = "M.SC [Comp. App]" }); ;

                EmployeeViewModel emp1 = new EmployeeViewModel() { Name = "Kartik Dev", Icon = Regular.Angle_Down };
                emp1.Add(new EmployeeDetailViewModel() { Designation = "Dot Net Developer", Experience = "1 Year", Qualification = "B.C.A" });

                EmployeeViewModel emp2 = new EmployeeViewModel() { Name = "Suneil Ghai", Icon = Regular.Angle_Down };
                emp2.Add(new EmployeeDetailViewModel() { Designation = "Project Manager", Experience = "10 Year", Qualification = "M.SC [Comp. App]" });

                EmployeeViewModel emp3 = new EmployeeViewModel() { Name = "Cindrella Benejee", Icon = Regular.Angle_Down };
                emp3.Add(new EmployeeDetailViewModel() { Designation = "Project Manager", Experience = "12 Year", Qualification = "M.E [Comp. Sci]" });

                EmployeeViewModel emp4 = new EmployeeViewModel() { Name = "Nitin Shrivastav", Icon = Regular.Angle_Down };
                emp4.Add(new EmployeeDetailViewModel() { Designation = "Senior Developer", Experience = "4 Year", Qualification = "M.SC [IT]" });
                groupEmpList.Add(emp);
                groupEmpList.Add(emp1);
                groupEmpList.Add(emp2);
                groupEmpList.Add(emp3);
                groupEmpList.Add(emp4);
                return groupEmpList;
            }
            catch (Exception ex)
            {
                throw ex;
            }


        } 

SimpleAccordionListView.xaml

   <StackLayout>
            <ListView x:Name ="MenuItemsListView" IsGroupingEnabled="true"  ItemSelected="MenuItemsListView_ItemSelected" HasUnevenRows="True"  GroupDisplayBinding="{Binding Name}" SeparatorColor="Gray" GroupShortNameBinding="{Binding Name}"
                  ItemsSource="{Binding empList}">
                
                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell Height="50">
                            <!--<ViewCell.View>-->
                            <Grid HeightRequest="50" Padding="20,0" VerticalOptions="CenterAndExpand" RowSpacing="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Name}" Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"  VerticalTextAlignment="Center" FontAttributes="Bold" TextColor="Gray">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="group_Clicked" Command="{Binding .}"></TapGestureRecognizer>
                                    </Label.GestureRecognizers>
                                </Label>
                                <Label FontFamily="{StaticResource FontAwesomeSolid}" Text="{Binding Icon}" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"  VerticalTextAlignment="Center" FontAttributes="Bold" TextColor="Gray">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="group_Clicked" Command="{Binding .}"></TapGestureRecognizer>
                                    </Label.GestureRecognizers>
                                </Label>
                            </Grid>
                            <!--</ViewCell.View>-->
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell >
                            <Grid HeightRequest="100" Padding="30,20,20,0" VerticalOptions="CenterAndExpand" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Label Text="Qualification:" Grid.Row="0" Grid.Column="0" FontAttributes="Bold"   HorizontalOptions="Start" VerticalOptions="Center" TextColor="Gray"/>
                                <Label Text="{Binding Qualification}" Grid.Row="0" Grid.Column="1"    HorizontalOptions="Start" VerticalOptions="Center" TextColor="Gray"/>
                                <Label Text="Experience:" Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" TextColor="Gray" VerticalTextAlignment="Center" HorizontalOptions="Start" />
                                <Label Text="{Binding Experience}" Grid.Row="1" Grid.Column="1" FontAttributes="Bold"  HorizontalOptions="Start" VerticalOptions="Center" TextColor="Gray"/>
                                <Label Text="Designation:" Grid.Row="2" Grid.Column="0" FontAttributes="Bold"   HorizontalOptions="Start" VerticalOptions="Center" TextColor="Gray"/>
                                <Label Text="{Binding Designation}" Grid.Row="2" Grid.Column="1" VerticalOptions="CenterAndExpand" TextColor="Gray" VerticalTextAlignment="Center" HorizontalOptions="Start" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

SimpleAccordionListView.cs

  public partial class SimpleAccordionListView : ContentPage
    {
        ObservableCollection<EmployeeViewModel> empList = new EmployeeModel().GetList();
        public SimpleAccordionListView()
        {
            InitializeComponent();
            BindingContext = new EmployeeBindingViewModel();
        }

        public class EmployeeBindingViewModel : INotifyPropertyChanged
        {
            public ObservableCollection<EmployeeViewModel> empList { get; set; }

            public EmployeeBindingViewModel()
            {
                empList = new EmployeeModel().GetList();
                foreach (var menu in empList)
                {
                    menu.Clear();
                }
            }

            #region INotifyPropertyChanged Implementation
            public event PropertyChangedEventHandler PropertyChanged;
            void OnPropertyChanged([CallerMemberName] string propertyName = "")
            {
                if (PropertyChanged == null)
                    return;

                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
            #endregion

        }

        private void group_Clicked(object sender, EventArgs e)
        {
            ObservableCollection<EmployeeViewModel> emp = new ObservableCollection<EmployeeViewModel>();
            emp = new EmployeeModel().GetList();

            var data = emp.Where(a => a.Name.ToLower() == ((Label)sender).Text.ToLower().Trim()).FirstOrDefault();
            var data1 = emp.Where(a => a.Name.ToLower() != ((Label)sender).Text.ToLower().Trim()).ToList();
            data.IsExpanded = true;
            data.Icon = Regular.Angle_Up;
            data1.ForEach(a => a.Clear());

           
            MenuItemsListView.ItemsSource = emp.ToList();
        }

        private void MenuItemsListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (MenuItemsListView.SelectedItem != null)
            {
                MenuItemsListView.SelectedItem = null;
            }
        }