Xamarin Forms - Contents do not wrap nor is the view scrollable

curiositycuriosity USMember ✭✭
edited September 11 in Xamarin.Forms

I am trying to implement a list of employees working in departments. There are several departments and several employees in a department. Following is my code and I have difficulty in scrolling and wrapping contents (Employee image and Name). As for wrapping the contents, if a row does not have enough space, I want the contents (image and employee's first name) to be displayed in a new line.

So far, I have tried several options but to no avail. I also tried adding a StackLayout instead of the WrapLayout.

Can anyone please tell me how to fix the scrolling issue and content wrapping issue? Are there any workarounds or any other layouts I can use? Thank you.

    <ListView ItemsSource="{Binding Departments}" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Margin="20,20,20,20">
                            <Label Text="{Binding DepartmentName}" />
                            <Label Text="{Binding DepartmentId}" />

                            <local:ItemsControl ItemsSource="{Binding Employees}">
                                <local:ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Grid RowSpacing="0" ColumnSpacing="0">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>

                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>

                                                <local:WrapLayout>
                                                    <Image Source="{Binding ImageUrl}"
                                                           WidthRequest="60"
                                                           HeightRequest="60"/>
                                                    <Label
                                                           Text="{Binding FirstName}"
                                                           HorizontalTextAlignment="Center"
                                                           VerticalTextAlignment="Center"
                                                        LineBreakMode="WordWrap"/>
                                                </local:WrapLayout>
                                        </Grid>
                                    </DataTemplate>
                                </local:ItemsControl.ItemTemplate>
                            </local:ItemsControl>

                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
    </ListView>

Answers

  • N_BauaN_Baua INMember ✭✭✭✭✭
    edited September 11

    Hi @curiosity ,

    Why you need local:ItemsControl and local:WrapLayout for?
    Can't you just simply use the StackLayout/Grid in your item template?

    -- N Baua

  • curiositycuriosity USMember ✭✭

    @N_Baua I need the local:ItemsControl because there are several Employees I want to display and ItemControl and since it's a collection, I used it. As for the local:WrapLayout, I used StackLayout but it did not help. And I have already used Grid, but I want another layout inside the Grid because I want both an Image and a Label to be displayed.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hey @curiosity.

    You do not need ItemsControl in that case and get rid of the WrapLayout as well. ListViews are meant to be working with collections and multi-property data. Hope you've read the documentation for ListView and know what you want to achieve.

    Also there is a nice tutorial:

    So look before you leap for coding.
    -- N Baua

  • curiositycuriosity USMember ✭✭
    edited September 12

    @N_Baua Thank you, but I hope you have noticed that I want to display two collections (sort of a nested List). I have already included a second ListView inside the first but the second list does not display any data at all. That's why I thought of using an ItemsControl.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @curiosity ,

    Nesting a ListView as control in another Listview as ItemTemplate would be crude. The performance is one matter that would hurt you eventually even if your code works, However prior to that you might struggle a lot to get it working.

    Well, for your case, may be you can refer, a simplest example as suggested in this XF thread.

    OR this SO post with more detailed answer:

    Hope it helps.

    N Baua

Sign In or Register to comment.