I am struggling on binding in SfAccordian when I have "nested" data structures. My data models look like this:
public class Staff
{
public int Id { get; set; }
public string StaffName { get; set; }
public List<Phone> StaffPhones { get; set; }
}
public class Phone
{
public int Id { get; set; }
public int StaffId { get; set; }
public string PhoneType { get; set; }
public string PhoneNumber { get; set; }
}
I want to use the SfAccordian control as follows: I want the "header" to contain the StaffName and I want the content to display a list of PhoneType/PhoneNumber. I want to register a TapRecognizer on each line of the Content (e.g. when the user clicks on the phone number, I will launch the phone dialer native to the platform). I got stuck on simply binding the content part in SfAccordian (I haven't tried to code the TapRecognizer yet).
My view model looks like this:
public class StaffViewModel : BaseViewModel
{
public ObservableCollection<Staff> StaffMembers { get; set; }
public Command LoadStaffCommand { get; set; }
public StaffViewModel()
{
Title = "Staff";
StaffMembers = new ObservableCollection<Staff>();
LoadStaffCommand = new Command(async () => await ExecuteLoadStaffCommand());
}
async Task ExecuteLoadStaffCommand()
{
if (IsBusy)
return;
IsBusy = true;
var staff = await DataStore.GetStaffAsync();
foreach(var person in staff)
{
StaffMembers.Add(person);
}
IsBusy = false;
}
}
The code behind my page looks like this:
public partial class StaffPage : ContentPage
{
StaffViewModel viewModel;
public StaffPage()
{
InitializeComponent();
BindingContext = viewModel = new StaffViewModel();
}
protected override void OnAppearing()
{
base.OnAppearing();
if(viewModel.StaffMembers.Count == 0)
{
viewModel.LoadStaffCommand.Execute(null);
}
}
}
My XAML looks like this:
<syncfusion:SfAccordion x:Name="staffAccordian" BindableLayout.ItemsSource="{Binding StaffMembers}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<syncfusion:AccordionItem>
<syncfusion:AccordionItem.Header>
<Label Text="{Binding StaffName}" FontAttributes="Bold" FontSize="Medium" />
</syncfusion:AccordionItem.Header>
<syncfusion:AccordionItem.Content>
<Grid x:Name="staffPhoneGrid" BindableLayout.ItemsSource="{Binding StaffPhones}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*" />
<ColumnDefinition Width="0.6*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="{Binding StaffPhones.PhoneType}" Grid.Column="0" />
<Label Text="Number goes here" Grid.Column="1" />
</Grid>
</syncfusion:AccordionItem.Content>
</syncfusion:AccordionItem>
</DataTemplate>
</BindableLayout.ItemTemplate>
</syncfusion:SfAccordion>
How do I bind the content part of the accordion to the List<Phone> property?
