Forum Xamarin.Forms

How to bind a nested model to a listview?

RichyRichy Member ✭✭
edited December 2019 in Xamarin.Forms

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>

Best Answer

Answers

  • stingherstingher Member ✭✭

    I'm not sure what you want to achieve, but I think ListView grouping could be helpful in this case. Setting IsGroupingEnabled="true" on the list view you'll be able to set the GroupHeaderTemplate - the BriefTitle in your case.

  • RichyRichy Member ✭✭

    @stingher said:
    I'm not sure what you want to achieve, but I think ListView grouping could be helpful in this case. Setting IsGroupingEnabled="true" on the list view you'll be able to set the GroupHeaderTemplate - the BriefTitle in your case.

    How to bind the the above nested data model to Xaml listview?

Sign In or Register to comment.