Forum Xamarin.iOS
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Scrollview does not scroll pictures like in Android app

awerberawerber Member ✭✭✭

I'm using Visual Studio 2017 for WIndows for development. I link to a Mac with Catalina and XCode 11. I have an Android app named Rodney Pix that's available via the Play Store. In that app, I load image controls with URLs from a web site, the images are added to a StackLayout inside a ScrollView, and everything works like I want. Here's the XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="RodneyPix.DisplayPicturesFromDirectory">
<NavigationPage.TitleView>
    <StackLayout x:Name="NavBar" Orientation="Horizontal" VerticalOptions="Center">
        <Label Text="Rodney Pix " WidthRequest="150" HeightRequest="40" VerticalOptions="Center" TextColor="White"></Label>
        <Image Source="rodney" HeightRequest="40" WidthRequest="40" />
    </StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
    <StackLayout>

        <Label x:Name="directoryNameDisplay" Text="Pictures from directory"
            VerticalOptions="Start" 
            HorizontalOptions="Center" />

        <ScrollView x:Name="sv" Orientation="Horizontal" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand">
            <StackLayout  x:Name="sl" Orientation="Horizontal" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand">

            </StackLayout>

        </ScrollView>
    </StackLayout>
</ContentPage.Content>

And the relevant C# code (some hard coded values changed so as to not show the directory structure of the actual site):

   private void DisplayPicture(string actualDirectoryName, string friendlyDirectoryName)
    {
        InitializeComponent();
        friendlyDirectoryName = friendlyDirectoryName == string.Empty ? friendlyDirectoryName = actualDirectoryName : friendlyDirectoryName;

        directoryNameDisplay.Text += " " + friendlyDirectoryName;

        RESTCalls.Calls calls = new Calls();
        calls.Domain = "http://www.mydomain.net/";

        List<string> picFiles = calls.GetPictureFilesFromDirectory(actualDirectoryName);

        foreach (string fileName in picFiles)
        {
            string picFileWebAddress = calls.Domain + "real_name_not_shown/" + actualDirectoryName + "/" + fileName;
            Image imgControl = new Image();
            imgControl.Source = picFileWebAddress;
            imgControl.MinimumHeightRequest = 3000;

           sl.Children.Add(imgControl);
        }
        directoryNameDisplay.Text = picFiles.Count.ToString() + " " + directoryNameDisplay.Text;
    }

The user can then scroll horizontally to see the pictures.

When I run this in the iPhone Simulator, pictures can be seen in the scrollview, and you can scroll horizontally, but the pictures are cut off, you can only ever see what fits in the width of the simulator screen. The Android simulators do not have this problem.

Tagged:

Best Answer

Answers

  • awerberawerber Member ✭✭✭

    @JGoldberger, thank you for taking the time to reproduce the shown code and testing it out.

    I owe an apology here. I left out some code in my project because I did not think it was relevant, but I just found out it is relevant. Here's what I left out in the loop that adds each image:

                var pinchGesture = new PinchGestureRecognizer();
                pinchGesture.PinchUpdated += (s, e) =>
                {
                    OnPinchUpdated(s, e);
                };
                imgControl.GestureRecognizers.Add(pinchGesture);
    
                var panGesture = new PanGestureRecognizer();
                panGesture.PanUpdated += (s, e) =>
                {
                    OnPanUpdated(s, e);
                };
                imgControl.GestureRecognizers.Add(panGesture);
    

    I just tested this without the pan gesture and the scrolling works fine. But things go bad when I add the pan gesture. I guess I have to explicitly make the scrollview ignore a pan gesture in order to get my code to work on the simulator.

    So, I will accept the comment above as an answer.

Sign In or Register to comment.