CODEWITHSUNDEEP
listviewxamarin.forms
Brett JB
Brett JB

Reputation: 766

Xamarin Forms ListView Binding to Child Object List in an Observable collection

Please forgive this if the answer is obvious.. I am fairly new to Xamarin and Forms, but not to programing or C#. I have a ListView that works and binds just fine to the top level object and its immediate properties. It is an ObservableCollection of GameDTOModel Objects.

public ObservableCollection<GameDTOModel> ActiveGamesCollection { get; } = new ObservableCollection<GameDTOModel>();

The GameDTOModel is like this:

public class GameDTOModel 
{
    public int Id { get; set; }

    public string Name { get; set; }

    // Which Game type is used in this game
    public GameType GameType { get; set; }    
}

The GameType looks like this:

public class GameType
{
    public int Id { get; set; }

    public string Name { get; set; }

    public virtual ICollection<Prize> Prizes { get; set; }
}

and the Prize object is like this:

public class Prize
{
    public int Id { get; set; }

    public string Name { get; set; }

    public string ImageURL { get; set; }
}

So far so simple and as I said. I have no issue getting to the objects in the ActiveGamesCollection and have bound it to a ListView. I would like to be able to show the images in the ImageURL property of the Prize object. So for example, a game may have a GameType that has 3 prizes, hence it is a list. My XAML looks like this:

<ListView x:Name="GamesView" ItemSelected="GamesViewItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout BackgroundColor="#eee" Orientation="Vertical">
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding ...stuff...}" />
                        <Label Text="{Binding ...stuff...}" />
                        <Label Text="{Binding ...stuff...}" />
                        <Label Text="{Binding ...stuff...}" />
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
<StackLayout Orientation="Horizontal">
    <Label Text="Loaded "/>
    <Label Text="{Binding ActiveGamesCollection.Count}"/>
    <Label Text="  games from the server @ "/>
    <Label Text="{Binding DebugmsgServerURL}"/>
</StackLayout>

The Itemsource and other stuff is set up in the code behind:

GamesView.ItemsSource = gamesmodel.ActiveGamesCollection;
GamesView.SelectedItem = gamesmodel.SelectedGame;
GamesView.IsPullToRefreshEnabled = true;

I do have a copy of the ActiveGames in a List object too but need the observable collection in order to populate the ListView. (it seems).

I would like to be able to list the 3 images in the ListView but am struggling to bind to ActiveGamesCollection.GameType.Prizes since it is and observable collection. Also I see from reading around that you shouldn't have a listview nested inside a listview, so I need a solution for that too. I guess I could use a gridview, but just getting to them at all would be a start.

Any pointers anyone? Thanks.

Upvotes: 2

Views: 1421

Answers (1)

Jesus Angulo
Jesus Angulo

Reputation: 2666

You can use a DynamicWrapLayout inside your ViewCell to show up the images.

<suave:DynamicWrapLayout ItemsSource="{Binding Items}" HorizontalOptions="Fill">
        <suave:DynamicWrapLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180">
                    <Label Text="{Binding .}" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
                </StackLayout>
            </DataTemplate>
        </suave:DynamicWrapLayout.ItemTemplate>
</suave:DynamicWrapLayout>

Reference https://github.com/SuavePirate/DynamicWrapLayout

Upvotes: 1

Related Questions