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;
} 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;
}
} <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;
}
}
Comments
Post a Comment