question

NickInMN-5765 avatar image
0 Votes"
NickInMN-5765 asked RobCaplan edited

Xamarin Forms Android Vertical ScrollView cutting off elements

I have a page that consists of one vertically oriented ScrollView. The problem I'm having is when the content goes beyond the bottom of the page all content below the fold is cut off when scrolling. The odd thing is if I rotate the device, everything renders correctly, and if I rotate back everything gets rendered.

This only happens on Android, iOS and UWP everything works fine. The content of the ScrollView is below. I've tried adding Margin="0" to all of the children as suggested in a StackOverflow question but it didn't help.

In the code behind, I add 0 to n Grids to the workContainer StackLayout. The effect is used to trigger a "page rendered" type of event.

 <ScrollView Orientation="Vertical" x:Name="verticalScroller" IsClippedToBounds="False" VerticalOptions="FillAndExpand">
         <StackLayout>
             <Grid Margin="15,6,15,6">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width = "1*" />
                     <ColumnDefinition Width = "4.5*" />
                     <ColumnDefinition Width = "1*" />
                 </Grid.ColumnDefinitions>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="1*"/>
                     <RowDefinition Height="1*"/>
                     <RowDefinition Height="1*"/>
                 </Grid.RowDefinitions>
                 <StackLayout Orientation="Horizontal" Grid.Row="0" Grid.ColumnSpan="3" Grid.Column="0" HorizontalOptions="Start">
                     <Button Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
                             Style="{StaticResource BlueRithmPrimaryButtonStyle }"
                             Text="{x:Static resourceStrings:AppResources.ButtonAddNote}"
                             Clicked="AddNoteButton_Clicked"/>
                     <Button Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="5, 0, 0, 0"
                             IsVisible="{Binding ParentType, Converter={StaticResource ParentTypeAndRoleToVisibility}}"
                             Style="{StaticResource BlueRithmPrimaryButtonStyle }"
                             Text="{x:Static resourceStrings:AppResources.ButtonAddIssue}"
                             Clicked="AddIssueButton_Clicked"/>
                 </StackLayout>
                 <Label Grid.Row="1" Grid.Column="1"
                         Text="{Binding HeaderTaskCategory}"
                         MaxLines="1"
                         FontSize="20"
                         TextColor="White"
                         VerticalOptions="CenterAndExpand"
                         HorizontalOptions="Center" />
                 <StackLayout Grid.Row="2" Grid.Column="1"
                         Orientation="Horizontal" 
                         VerticalOptions="CenterAndExpand"
                         HorizontalOptions="Center">
                     <Label FontSize="20"
                             Style="{StaticResource EditLabelStyle}"
                             VerticalOptions="CenterAndExpand"
                             HorizontalOptions="Center"
                             IsVisible="{Binding Task.AssignedToId, Converter={StaticResource UserIdToVisible}}">
                         <Label.GestureRecognizers>
                             <TapGestureRecognizer Tapped="StatusEdit_Tapped"/>
                         </Label.GestureRecognizers>
                     </Label>
                     <Label x:Name="StatusLabel"
                             IsVisible="{Binding Task.AssignedToId, Converter={StaticResource UserIdToVisible}}"
                             FontSize="20"
                             Padding="6,0,6,0"
                             TextColor="{Binding Status, Converter={StaticResource StatusToTextColor}}"
                             Text="{Binding Status, Converter={StaticResource StatusToText}}" 
                             BackgroundColor="{Binding Status, Converter={StaticResource StatusToColor}}"
                             VerticalOptions="CenterAndExpand"
                             HorizontalOptions="Center" >
                         <Label.GestureRecognizers>
                             <TapGestureRecognizer Tapped="StatusEdit_Tapped"/>
                         </Label.GestureRecognizers>
                     </Label>
                     <Label IsVisible="{Binding Task.AssignedToId, Converter={StaticResource UserIdToVisibleReverse}}"
                             FontSize="20"
                             Padding="6,0,6,0"
                             TextColor="{Binding Status, Converter={StaticResource StatusToTextColor}}"
                             Text="{Binding Status, Converter={StaticResource StatusToText}}" 
                             BackgroundColor="{Binding Status, Converter={StaticResource StatusToColor}}"
                             VerticalOptions="CenterAndExpand"
                             HorizontalOptions="Center" >
                     </Label>
                 </StackLayout>
             </Grid>
             <Label Text="{Binding DescriptionHeader}"
                         Padding="25,0,6,0"
                         FontSize="18"
                         TextColor="White"
                         VerticalOptions="Center"
                         HorizontalOptions="Start" />
             <StackLayout x:Name="workContainer"></StackLayout>
             <StackLayout  Margin="20,10,20,40">
                 <BoxView HeightRequest="4" BackgroundColor="Transparent" Color="White" HorizontalOptions="FillAndExpand" />
                 <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="1*" />
                         <ColumnDefinition Width="7" />
                         <ColumnDefinition Width="2*" />
                     </Grid.ColumnDefinitions>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="28"/>
                     </Grid.RowDefinitions>
                     <!-- Assigned To -->
                     <Label Grid.Row="0" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelAssignedTo}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End" />
                     <Label Grid.Row="0" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding AssignedTo}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Date Due -->
                     <Label Grid.Row="1" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelDueDate}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="1" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding DateDue}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Hours -->
                     <Label Grid.Row="2" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelHours}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="2" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding Hours}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Entered By -->
                     <Label Grid.Row="3" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelEnteredBy}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="3" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding EnteredBy}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Date Entered -->
                     <Label Grid.Row="4" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelDateEntered}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="4" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding DateEntered}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Last Edit By -->
                     <Label Grid.Row="5" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelLastEditBy}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="5" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding LastEditBy}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Last Edit -->
                     <Label Grid.Row="6" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelLastEditDate}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="6" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding LastEdit}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Completed By -->
                     <Label Grid.Row="7" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelMarkedCompletedBy}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="7" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding CompletedBy}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start"/>
                     <!-- Completed Date -->
                     <Label Grid.Row="8" Grid.Column="0"
                                Margin="0,2"
                                Text="{x:Static resourceStrings:AppResources.LabelDateCompleted}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="End"/>
                     <Label Grid.Row="8" Grid.Column="2"
                                Margin="0,2"
                                Text="{Binding CompletedDate}"
                                TextColor="White"
                                VerticalOptions="Center"
                                HorizontalOptions="Start">
                         <Label.Effects>
                             <effects:ViewLifecycleEffect Loaded="Page_Loaded"></effects:ViewLifecycleEffect>
                         </Label.Effects>
                     </Label>
                 </Grid>
             </StackLayout>
         </StackLayout>
     </ScrollView>


dotnet-xamarin
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I did a test, but couldn't reproduce this problem. Could you please post some sceenshots or a short video to elaborate your problem?

0 Votes 0 ·

@JessieZhang-2116 I made some progress on this last night. I briefly mentioned the "Page_Loaded event" that I created and I think that is the source of the problem. The reason I'm doing that is because sometimes the grids I'm building take a while to render, so I was using that as a hook to use an async operation to build and render the grids. As a test I moved the code that builds the grids out of there and into the page's constructor. Now everything works, but the problem is there is a visible pause when the user clicks the list view item on the previous page, which is what causes this page to render.

Here is a video of what is happening with the async method.
android.mp4


0 Votes 0 ·

I have the same issue. Has it been resolved?

0 Votes 0 ·

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 commented

Hello,


Welcome to our Microsoft Q&A platform!

I found there are many bindings in your code , and there is no advantage in binding data that doesn't need to be bound, because bindings aren't cost efficient.

In addition, there are many combinations of layouts,which will also result in unnecessary layout calculations being performed.

You can try to improve your App Performance by checking document : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/deploy-test/performance .

Best Regards,


Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.



Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Those bindings are required for localization and they aren't related to the problem I'm having.

0 Votes 0 ·

Have you read through the official document I mentioned? You can try to optimize your code(e.g. change the text of your control to the text itself not using binding).

In addition, on which device can this problem be repeated?

0 Votes 0 ·