2

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.

6
  • Do you have an undefined number of prizes for each game, or it's always 3 items? Commented Feb 14, 2018 at 16:54
  • Yes, sorry I should have made that clear... A GameType can have min 1 to max 'undefined' - defined by common sense - prizes. Commented Feb 14, 2018 at 16:56
  • 1
    {Binding GameType.Prizes[0].ImageUrl} will get you the path to the image, but you have to hardcode the index, so it's difficult to do a layout for an undetermined number of prizes Commented Feb 14, 2018 at 16:57
  • Yes, I realise... Commented Feb 14, 2018 at 16:58
  • You can try to create your own view that should able to receive that list ({Binding GameType.Prizes}) and render it as you wish, basically like what the RepeaterView does. Maybe it's the way to go. I have no experience with this component yet, so I can't share an answer for now, but I'll research about it. Commented Feb 14, 2018 at 17:10

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.