I need to bind a nested model to a listview
The model is as follows
public class StudySearchResultModel { public int StudySearchId { get; set; } public string BriefTitle { get; set; } public List<FacilityModel> Facilities { get; set; } // a property which is list of another model named as FacilityModel } public class FacilityModel { public int FacilityId { get; set; } public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } }
Then the View Model
Here the Itemsource to listview is "StudyResults"
private ObservableCollection<StudySearchResultModel> _studyResults; public ObservableCollection<StudySearchResultModel> StudyResults { get { return _studyResults; } set { _studyResults = value; OnPropertyChanged("StudyResults"); } } var temp = (searchResult.studySearchResultDtos.Select(i => new StudySearchResultModel() { StudySearchId = i.Id, BriefTitle = i.BriefTitle, FacilityId = i.Facilities?.FirstOrDefault()?.Id ?? 0, FacilityPhone = i.Facilities?.FirstOrDefault()?.Phone, IsPhoneEnabled = !string.IsNullOrEmpty(i.Facilities?.FirstOrDefault()?.Phone), FacilityEmail = i.Facilities?.FirstOrDefault()?.Email, FacilityName = i.Facilities?.FirstOrDefault()?.Name, })); StudyResults = new ObservableCollection<StudySearchResultModel>(temp.ToList());
And the xaml of listview is as follows
ListView x:Name="ItemsListView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemsSource="{Binding StudyResults,Mode=TwoWay}" CachingStrategy="RecycleElement" SelectedItem="{Binding SelectedItem, Mode=TwoWay}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Padding="2"> <Frame BorderColor="#f3f3f3" Visual="{OnPlatform Default=Material, iOS=Default}" HasShadow="True" Padding="10" Opacity="NaN"> <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand"> <StackLayout HorizontalOptions="FillAndExpand" Padding="2,2,2,2"> <Label Text="{Binding BriefTitle, Mode=TwoWay}" FontSize="16" FontAttributes="None" /> <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" HorizontalOptions="End" Padding="2,2,2,2" Margin="2,2,2,2" BackgroundColor="Transparent"> <Image Source="call.png" WidthRequest="30" HeightRequest="30" IsVisible="{Binding IsPhoneEnabled, Mode=TwoWay}"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding Path=BindingContext.CallTapCommand, Source={x:Reference BrowseItemsPage}}" CommandParameter="{Binding FacilityPhone, Mode=TwoWay}" /> </Image.GestureRecognizers> </Image> </StackLayout> </StackLayout> </StackLayout> </Frame> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>