CODEWITHSUNDEEP
imagexamarin.formsframescardview
user3452
user3452

Reputation: 359

Vertiical Scrollview not working in xamarin forms.?

I'm trying to scroll the xfxCardview in Xamarin Forms. But it is not scrolling. This is my code

            <ScrollView  Orientation = "Vertical" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
            <xfx:XfxCardView 
                    BackgroundColor="White"
                    CornerRadius="30" 
                Elevation="20"
             HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal">

                    <Grid VerticalOptions="CenterAndExpand"  
             Padding="0"  
             HorizontalOptions="FillAndExpand"  
             BackgroundColor="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="35" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                            <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
                        </Frame>
                        <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Premera restaurant" />
                        <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                        <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
                        <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                        <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                        <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                        <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                        <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                        <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                            <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                    </Grid>
                </StackLayout>
            </xfx:XfxCardView>

                <xfx:XfxCardView 
                    BackgroundColor="White"
                    CornerRadius="30" 
                Elevation="20"
             HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Horizontal">

                    <Grid VerticalOptions="CenterAndExpand"  
             Padding="0"  
             HorizontalOptions="FillAndExpand"  
             BackgroundColor="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="35" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                            <RowDefinition Height="35" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                            <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
                        </Frame>
                        <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Pesto restaurant" />
                        <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"   Source="whitehearticon3"/>
                        <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6"  Text="Bodhami Road, 6" TextColor="Blue"  />
                        <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6"  Text="Indian,Italy,Chinese Kitchen" />
                        <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                        <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />

                        <Label Grid.Row="3" Grid.Column="4"  Grid.ColumnSpan="3"  Text="No available" TextColor="Blue" />
                    </Grid>
                </StackLayout>
            </xfx:XfxCardView>
                    <Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
                    <Label  Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
                    <xfx:XfxCardView 
                    BackgroundColor="White"
                    CornerRadius="30" 
                Elevation="20"
             HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                        <StackLayout Orientation="Horizontal">

                            <Grid VerticalOptions="CenterAndExpand"  
             Padding="0"  
             HorizontalOptions="FillAndExpand"  
             BackgroundColor="Transparent">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="35" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                                    <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
                                </Frame>
                                <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Hero" />
                                <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                                <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
                                <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                                <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                                <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                                <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                                <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                                <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                                <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                            </Grid>
                        </StackLayout>
                    </xfx:XfxCardView>

                </StackLayout>
            </ScrollView>

I don't know what is wrong with my code I'm setting orientation as vertical also I'm setting VerticalOptions as fill and expand. Will the scroll view work or should I put the XfxCardview inside a Listview. This is the how my current UI looks like

and the UI doesn't scroll to the bottom.

Upvotes: 0

Views: 762

Answers (2)

Abdul Gani
Abdul Gani

Reputation: 689

In Android, the issue is due to the card height. Three cardviews are aligned perfectly with the screen. That's the reason, you are not seeing scrollview in Android. Scrollview functionality will be available only if the the content inside scrollview is greater than scrollview height. To solve this, try the below solution. Add add more cardviews, you will see the scrollview. Another solution is, I've added height as 300 to the scrollview. You can test and modify based on your requirement.

  <ScrollView HeightRequest="300"  Orientation = "Vertical" VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
        <xfx:XfxCardView 
                BackgroundColor="White"
                CornerRadius="30" 
            Elevation="20"
         HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Horizontal">

                <Grid VerticalOptions="CenterAndExpand"  
         Padding="0"  
         HorizontalOptions="FillAndExpand"  
         BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="35" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                        <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
                    </Frame>
                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Premera restaurant" />
                    <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                    <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                    <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                    <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                    <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                    <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                        <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                </Grid>
            </StackLayout>
        </xfx:XfxCardView>

            <xfx:XfxCardView 
                BackgroundColor="White"
                CornerRadius="30" 
            Elevation="20"
         HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Horizontal">

                <Grid VerticalOptions="CenterAndExpand"  
         Padding="0"  
         HorizontalOptions="FillAndExpand"  
         BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="35" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                        <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
                    </Frame>
                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Pesto restaurant" />
                    <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"   Source="whitehearticon3"/>
                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6"  Text="Bodhami Road, 6" TextColor="Blue"  />
                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6"  Text="Indian,Italy,Chinese Kitchen" />
                    <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                    <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />

                    <Label Grid.Row="3" Grid.Column="4"  Grid.ColumnSpan="3"  Text="No available" TextColor="Blue" />
                </Grid>
            </StackLayout>
        </xfx:XfxCardView>
                <Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
                <Label  Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
                <xfx:XfxCardView 
                BackgroundColor="White"
                CornerRadius="30" 
            Elevation="20"
         HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
                    <StackLayout Orientation="Horizontal">

                        <Grid VerticalOptions="CenterAndExpand"  
         Padding="0"  
         HorizontalOptions="FillAndExpand"  
         BackgroundColor="Transparent">
                            <Grid.RowDefinitions>
                              <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="35" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Frame Margin="10,5,5,-20"  CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                                <Image Margin="-70,-70,-70,-70"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
                            </Frame>
                            <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0"  TextColor="Black" FontFamily="Bold,100"  Text="Hero" />
                            <Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0"  Source="whitehearticon3"/>
                            <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
                            <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
                            <Image Grid.Row="3" Grid.Column="1"   Source="whitestaricon1"/>
                            <Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
                            <Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0"   Source="rupeeicon1"/>
                            <Label Grid.Row="3" Grid.Column="4"  Margin="-10,0,0,0" Text="150 min" />
                            <Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0"  Source="handicon1"/>
                            <Label Grid.Row="3" Grid.Column="6"  Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
                        </Grid>
                    </StackLayout>
                </xfx:XfxCardView>
            </StackLayout>
        </ScrollView>

Upvotes: 1

Nick Kovalsky
Nick Kovalsky

Reputation: 6462

Your xaml looks ok, try check few things:

  1. that you don't have a forgotten custom renderer for scrollview with disabled scroll included in android project

  2. check that it scrolls without elevations set, might be a bug

  3. another "bug" i can imagine: looks at the last card: it is possible that it just didn't take its 160 height but just filled the parent with VerticalOptions="FillAndExpand" so there's nothing to scroll. And card's content was clipped with IsClippedToBounds="True" so it didn't Expand the card.

Upvotes: 1

Related Questions