ScrollView in Xaml

Im trying to make a page using xaml but I having some problems. I want it to have a buttom fixed at the top and a button fixed at the bottom and a scrollview in the middle where I can scroll between a lot of labels. How can I do that. Here is the code that I wrote:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="App2.LoginView">
    <StackLayout >
        <Button  Text="Login" Clicked="OnButtonLoginClicked" />
        <ScrollView  Orientation = "Vertical" VerticalOptions="StartAndExpand">
            <StackLayout  VerticalOptions="StartAndExpand">
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="hola" />
                <Label Text="chau" />
            </StackLayout>
        </ScrollView>
        <Button  Text="Login" Clicked="OnButtonLoginClicked" />
    </StackLayout>
</ContentPage>
«1

Posts

  • CraigDunnCraigDunn USXamarin Team Xamurai

    You needed to set VerticalOptions on all the nested controls so they know how to relate to each other

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                           x:Class="App2.LoginView">
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
            <Button  Text="Login" />
            <ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
                    <Label Text="hola" />
                    <Label Text="hola" />
    <!-- snipped all the extra labels for code sample clarity -->
                    <Label Text="hola" />
                    <Label Text="hola" />
                    <Label Text="chau" />
                </StackLayout>
            </ScrollView>
            <Button  Text="Login" />
        </StackLayout>
    </ContentPage>
    

    The attached screenshot shows it working on iOS.

  • BrunoPasquiniBrunoPasquini USMember ✭✭

    It worked great, thank you.

  • ThorstenBentrupThorstenBentrup DEMember ✭✭

    But NOT for Android:
    the texts overlap the buttons while scrolling...

    What do I have to change in the code or is it a bug in Xamarin.Forms (tested with the latest version 1.2.2)?

  • ThorstenBentrupThorstenBentrup DEMember ✭✭

    Can someone confirm my issue on Android with the code from CraigDunn (with some more label texts ;-)?

  • BrunoPasquiniBrunoPasquini USMember ✭✭

    I works great in genymotion, I dont have a physical device.

  • ThorstenBentrupThorstenBentrup DEMember ✭✭

    Thanks for your feedback.
    I've tested it again (now with the Android emulator and on a real Android "Nexus 7") - still the same, the texts overlap while scrolling.
    But on the iOS emulator this is working as expected.

    Could it be a problem with the Android version - I compile against API Level 18 (v4.3)?

  • ChrisAtkinsonChrisAtkinson AUMember, University
    edited August 2014

    I am having the same problem with Android. The Text is still overlapping the buttons as I scroll up. I have tested on a real device (Sony Xperia Z1 running Android 4.4.4). I am compiling against Android API Level 14.

    My XAML is as follows:

    <StackLayout  Orientation="Vertical"  HorizontalOptions = "LayoutOptions.FillAndExpand" VerticalOptions = "LayoutOptions.FillAndExpand"  Padding="0" Spacing="0">
        <Grid x:Name="grid" Padding="0" VerticalOptions="Start" HorizontalOptions="FillAndExpand" BackgroundColor="#005696" >
          <Grid.RowDefinitions>
            <RowDefinition Height="*" />        
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <Button Text="Reject" Grid.Row="0" Grid.Column="1"
           TextColor="{x:Static resources:ColourResources.ButtonTextColour}" VerticalOptions="Center" BackgroundColor ="{x:Static resources:ColourResources.NegativeButtonColour}" HeightRequest="50" HorizontalOptions="FillAndExpand" WidthRequest="35" Font="{x:Static resources:FontResources.Medium}"  IsVisible="{Binding ShowRejectButton}"  Command="{Binding RejectCommand}"/>
          <Button Text="Accept" x:Name="Accept" Grid.Row="0" Grid.Column="0"
             TextColor="{x:Static resources:ColourResources.ButtonTextColour}" VerticalOptions="Center" BackgroundColor ="{x:Static resources:ColourResources.PositiveButtonColour}" HeightRequest="50" HorizontalOptions="FillAndExpand" WidthRequest="35" Font="{x:Static resources:FontResources.Medium}"  IsVisible="{Binding ShowAcceptButton}"  Command="{Binding AcceptCommand}"/>
            <Button Text="Close"
        TextColor="{x:Static resources:ColourResources.ButtonTextColour}" VerticalOptions="EndAndExpand" BackgroundColor ="{x:Static resources:ColourResources.PositiveButtonColour}" HeightRequest="50" HorizontalOptions="FillAndExpand" WidthRequest="70" Font="{x:Static resources:FontResources.Medium}"  IsVisible="{Binding ShowCloseButton}"  Command="{Binding CloseCommand}"/>  
        </Grid>
    
        <ScrollView x:Name="Text" HorizontalOptions = "LayoutOptions.Fill" VerticalOptions="LayoutOptions.Fill">
          <Label Text="{Binding Contents}" ></Label>
        </ScrollView>
        </StackLayout>
    

    Any thoughts @CraigDunn?

  • ChrisAtkinsonChrisAtkinson AUMember, University

    Here is a sample project that shows this behavior.

  • Has anyone looked at this yet? It's still rendering incorrectly in Android!!

  • ChrisAtkinsonChrisAtkinson AUMember, University

    As far as I know @PeterGoddard‌, the only thing done was that a bug report was created for it and it has been confirmed as a bug. Unfortunately, it doesn't look like there has been any further progress on this.
    Bug Report

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Not sure, there was a scrollview fix in 1.2.3 pre2, but it appears to be for iOS...

  • Unfortunately the bug still exists in the 1.2.3 pre4 version for Android...

  • Add IsClippedToBounds="True" to scrollview

  • ThorstenBentrupThorstenBentrup DEMember ✭✭

    Sorry, but this doesn't work - the bug still exists...

  • akevanakevan CAMember ✭✭

    +1. Still not working on Android, and no update on the bug since August 19th??

  • It works in iOS, but in Android the problem persists and it causes a very strange visual effect. We need a fix for this issue.

  • WarrickHolfeldWarrickHolfeld USMember
    edited November 2014

    This is a serious bug. How much longer till its fixed? This basically makes scrollview worthless in forms unless there is some work around available that hasn't been posted here.

  • Chiming in: This is definitely an issue that breaks many designs.
    Just try acr-xamarin-forms samples which is rife with this issue on Android.

  • PeterAxelsonPeterAxelson USMember
    edited December 2014

    My bad... I got hit with a LOLLIPOP (OTA). Things work fine on KitKat. I'm in the process of reverting now.

  • IvanUhrinIvanUhrin USMember

    For my cause it is still not working... I have screen devided by half : top half is scroll view and bottom half is Listview both in one relative layout as parent (to prevent malfunction due nesting list view in scroll view) and the scroll content overlaps the listview still on 1.2.3 pre release 2

  • IsClippedToBounds seems to work if you manage to call it after the controls are added to the tree (see http://forums.xamarin.com/discussion/21930/scrollview-still-overlapping-its-bounds-on-android-when-contents-are-added-to-visual-tree). Tested OK on Galaxy S5 by creating a bunch of Labels in code.

  • softsan.1382softsan.1382 USMember

    i am adding control by code in PCL. I Just tried but its still not working for android.

  • JOAOSerraJOAOSerra PTMember ✭✭
    edited January 2015

    IsClippedToBounds = true;
    seems to do the trick in my case.
    But its still unacceptable to have such bug without a fix for so long.
    Im using a galaxy s4

  • AmolJainAmolJain INMember ✭✭

    can we scroll this scroll view horizontally

    or how to do that as given below image

    thanx

    mio.png 11.5K
  • ThorstenBentrupThorstenBentrup DEMember ✭✭

    <ScrollView Orientation="Horizontal" />

    (but your question is not really a good one for this thread)

  • JohnHardmanJohnHardman GBUniversity mod

    @CraigDunn - Even setting IsClippedToBounds after populating all of the controls is not working for me on Android, using 1.4.0 .

    The bug has been marked as Resolved / Fixed, although as a "Can not reproduce" rather than a conscious fix.
    https://bugzilla.xamarin.com/show_bug.cgi?id=22184#c3

    I don't seem to be able to re-open the bug, but have attached some (very work-in-progress) code (C#, not XAML) to it that demonstrates the problem. In my local copy I have set IsClippedToBounds everywhere I can possibly think of, including in response to button presses at run-time, but to no avail.

  • Vikram_BVikram_B USMember ✭✭

    Hi Can any one suggest me how to add controls like Image,Label in Scroll View in CS file in Xamarin forms.Any sample

    Content = new StackLayout {
    Children = {
    new ScrollView{
    HorizontalOptions=LayoutOptions.CenterAndExpand,Padding=new Thickness(0,50,0,0),

                        Content=new StackLayout{
                            Spacing=30,
                            Children={
                                img1,img2,img3,......img10                          },
                        }
    
                    }
                }
            };
    

    But it is not scrolling

  • hvaughanhvaughan USMember ✭✭✭
    edited October 2015

    If anyone comes across this, after loading all data into your layout(s) that are within your ScrollView, I was able to get the ScrollView to reevaluate whether it need to enable scrolling by calling ScrollView.ForceLayout() in OnAppearing() after all controls had been filled in with data.

  • AsaduzzamanAsaduzzaman USMember
    edited December 2015

    Just Put the ScrollView inside another StackLayout. Thats solve this in Android. My Android version is 4.4.4

        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
    
            ///Put Top views here, if need use any layout
    
            <StackLayout>
                <ScrollView >
                    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" >
                    </StackLayout>
                </ScrollView>
            </StackLayout>
    
            ///Put Bottom views here, if need use any layout
    
        </StackLayout>
    
  • denominator01denominator01 USMember ✭✭
    edited April 2016

    Has anyone done this in C# instead of XAML? I would like to see the same implementation in C#. Thanks!

    @CraigDunn

  • ChaseFlorellChaseFlorell CAInsider, University mod

    What exactly are you trying to do in C# @owlstack? Just add views to a ScrollView?

    Here's an example of a ScrollView Demo Page hosted in the Xamarin Forms Samples repo.

  • denominator01denominator01 USMember ✭✭
    edited April 2016

    @ChaseFlorell said:
    What exactly are you trying to do in C# @owlstack? Just add views to a ScrollView?

    Here's an example of a ScrollView Demo Page hosted in the Xamarin Forms Samples repo.

    Sorry for the confusion. I'm trying to do the same implementation with two buttons and a scrollview in between. Currently, the implementation here is written in XAML, what about C# version?

    Here's an implementation someone wrote earlier in XAML:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                           x:Class="App2.LoginView">
    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
            <Button  Text="Login" />
            <ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand">
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
                    <Label Text="hola" />
                    <Label Text="hola" />
    <!-- snipped all the extra labels for code sample clarity -->
                    <Label Text="hola" />
                    <Label Text="hola" />
                    <Label Text="chau" />
                </StackLayout>
            </ScrollView>
            <Button  Text="Login" />
        </StackLayout>
    </ContentPage>
    
  • ChaseFlorellChaseFlorell CAInsider, University mod

    I'd start with something like this.

    var l1 = new Label {Text = "hola"};
    var l2 = new Label {Text = "hola"};
    var l3 = new Label {Text = "hola"};
    var innerStack = new StackLayout {Orientation = StackOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand, Children = { l1,l2,l3}};
    var scroller = new ScrollView {Orientation = ScrollOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand, Content = innerStack};
    var loginButton = new Button { Text = "Log in" };
    var logOut = new Button { Text = "Log out" };
    
    var outerStack = new StackLayout {Orientation = StackOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand, Children = { loginButton,scroller,logOut}};
    Content = outerStack;
    
  • denominator01denominator01 USMember ✭✭

    @ChaseFlorell said:
    I'd start with something like this.

    var l1 = new Label {Text = "hola"};
    var l2 = new Label {Text = "hola"};
    var l3 = new Label {Text = "hola"};
    var innerStack = new StackLayout {Orientation = StackOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand, Children = { l1,l2,l3}};
    var scroller = new ScrollView {Orientation = ScrollOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand, Content = innerStack};
    var loginButton = new Button { Text = "Log in" };
    var logOut = new Button { Text = "Log out" };
    
    var outerStack = new StackLayout {Orientation = StackOrientation.Vertical, VerticalOptions = LayoutOptions.FillAndExpand, Children = { loginButton,scroller,logOut}};
    Content = outerStack;
    

    What if I had a stacklayout with several buttons instead of a single button to be fixed on the top? How would that change?

    Thanks!

  • ChaseFlorellChaseFlorell CAInsider, University mod

    I suggest you begin by reading the Layout Documentation on how it all comes together.

  • denominator01denominator01 USMember ✭✭

    @ChaseFlorell said:
    I suggest you begin by reading the Layout Documentation on how it all comes together.

    Thanks. I figured out how to get the top fixed. It works fine. I have the problem with the button on the bottom not showing up :S

  • StevenLewisStevenLewis USMember

    Hi! Is it just me? or @CraigDunn 's example won't scroll in Windows Phone? I haven't been able to make it work on WP8.1

  • Doesn't work either on a UWP Application tried many ways nesting it under then adding and then again a stacklayout still doesn't work.

  • LaobuLaobu USMember ✭✭

    My resolution:
    I had a 'scrollview issues on Xamarin forms Android' where items in the scrollview would overlap any layout object above it when scrolling. Again, this only occurs on Android (iOS was thus fine) and no properties in the code where able to fix this.

    The problem was resolved when I tested on API23 instead of API19. So, using the SDK manager I installed from Android 6.0(API 23) the SDK Platform, Google APIs, Google APIs ARM EABI v7a System image and Google APIs Intel x86 Atom System Image.

    Background info:
    I develop simultaneous on Visual Studio 2015 on PC and Xamarin Studio to be able to test and determine if a problem is code wise or something 'underneath'. In this case, my PC environment was on API19 while Mac was on API23. The Mac environment was thus able to show me what I was missing on PC.

    Hope this helps,
    Laobu

Sign In or Register to comment.