How to make Scrollable Label in Collectionview Xamarin Forms

malukishtiaq

Hi there!
I have a Collectionview with fixed Row Height. Inside Collectionview there is Label with large description. I am trying to make this label scrollable. Can anyone help please.

jezh

I tested the function in a CollectionView by using the officail sample (VerticalListPage.xaml). You can try yourself.

The whole code is:

<StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.RowSpan="2" 
                               Source="{Binding ImageUrl}" 
                               Aspect="AspectFill"
                               HeightRequest="60" 
                               WidthRequest="60" />
                        <Label Grid.Column="1" 
                               Text="{Binding Name}" 
                               FontAttributes="Bold" />

                        <ScrollView Grid.Row="1" Grid.Column="1" 
                                    VerticalOptions="End" 
                                    Orientation="Horizontal" 
                                    HorizontalScrollBarVisibility="Never"
                                      >
                        <Label 
                               LineBreakMode="WordWrap"
                               MaxLines="2"
                               Text="{Binding Details}"
                               FontAttributes="Italic" />
                        </ScrollView>

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

jezh

If you want the text scroll in direction Horizontal, then you can add code Orientation="Horizontal" to ScrollView .
If we want to hide the ScrollBar, we can add following code:

  HorizontalScrollBarVisibility="Never"

So the whole code is like this:

           <ScrollView Grid.Row="1" Grid.Column="1" 
                                    VerticalOptions="End" 
                                    Orientation="Horizontal" 
                                    HorizontalScrollBarVisibility="Never"
                                      >
                        <Label 
                               LineBreakMode="WordWrap"
                               MaxLines="1"
                               Text="{Binding Details}"
                               FontAttributes="Italic" />
                        </ScrollView>

The result is like this:

malukishtiaq

It works without listview or collection view. but it does not work inside a collection

jezh

I tested the function in a CollectionView by using the officail sample (VerticalListPage.xaml). You can try yourself.

The whole code is:

<StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.RowSpan="2" 
                               Source="{Binding ImageUrl}" 
                               Aspect="AspectFill"
                               HeightRequest="60" 
                               WidthRequest="60" />
                        <Label Grid.Column="1" 
                               Text="{Binding Name}" 
                               FontAttributes="Bold" />

                        <ScrollView Grid.Row="1" Grid.Column="1" 
                                    VerticalOptions="End" 
                                    Orientation="Horizontal" 
                                    HorizontalScrollBarVisibility="Never"
                                      >
                        <Label 
                               LineBreakMode="WordWrap"
                               MaxLines="2"
                               Text="{Binding Details}"
                               FontAttributes="Italic" />
                        </ScrollView>

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

jezh

@malukishtiaq Hi friend, have you resolved your question?

malukishtiaq

@jezh I have marked your question as answer. but still i would say, it doesn't work on android properly. I mean it works but It is also hard to scroll because collection view it self starts scrolling. Is there any tip on that. Like to handle its behavior.

Thank you very much.