Layout to full width

MartHughMartHugh USMember ✭✭✭
edited May 2015 in Xamarin.Forms

I need to be able to have an App, which allows me to scroll text from left to right and right to left in sections the width of the device (similar to an ebook in some ways I guess).

My initial approach is as follows

   public ScrollPage()
    {
        StackLayout stackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal
        };

        stackLayout.Children.Add (
            new Label {
                Text = "One",
                BackgroundColor=Color.Blue,
            });

        stackLayout.Children.Add (
            new Label {
                Text="Two",
                BackgroundColor=Color.Green             
            });

        stackLayout.Children.Add (
            new Label {
                Text="Three",
                BackgroundColor=Color.Red,
            });

        Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);

        Content = new ScrollView
        {
    Orientation = ScrollOrientation.Horizontal,
            Content = stackLayout
        };
    }

Each "page" to be displayed is added as a Label as a child of the stacklayout

To make this scroll left and right I have set the stackLayout and the scrollview to have
Orientation = StackOrientation.Horizontal

This works OK, except that I wanted each label in the stackLayout to consume the full width of the device. So what I am seeing (say with labels set to 'One' 'Two' Three' is all of that text displayed left to right contiguously. What I want is to only see one of them at a time.

I have tried setting the HorizontalOptions of each of the stackLayout, scrollView, Labels to LayoutOptions.FillAndExpand, but this makes no difference.
In addition I obviously want to wrap the text within the label so that it does not exceed the width of the device.

Any suggestions, gratefully received.

Best Answers

Answers

  • MartHughMartHugh USMember ✭✭✭

    I will give that a go. Is it possible to have a CarouselPage within a StackLayout, so that only one row of the StackLyout scrolls ?

    Thanks

  • MartHughMartHugh USMember ✭✭✭

    @glucose thanks this does exactly what I asked. I think I need it to also snap to the nearest page so I think CarouselPage is heading in the right direction.
    @DavidDancy thanks for CarouselPage tip. This is what I wanted, However, as far as my App goes I wanted a section of the page to scroll and the rest to remain static. I had envisaged using a stacklayout and then putting the scrolling control into one of the stackLayout rows. However, because CarouselPage does not derive from View this does not appear to be possible. Can you suggest a workaround?

    Thanks.

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    @MartHugh well you can have a sideways scrollview. Then you might be able to hook into the scrolling events that it generates to control how the scroll occurs (e.g. snap to a boundary). Then if you can make your scrolling elements all have the same size (say by putting them in a Grid, or possibly a RelativeLayout, possibly an AbsoluteLayout) you might be able to make the scroll stop automatically when it gets to an element's edge.
    Otherwise I think you'll need to use a custom renderer with a Pan GestureRecognizer (at least on iOS) to drive the scrolling.

  • MartHughMartHugh USMember ✭✭✭

    @DavidDancy thank you for your reply.

Sign In or Register to comment.