Page cuts off at Editor entry after loading an image

Question

In my Xamarin forms app, I have a page where you can select or take a photo, add a message and send it to a message board.

XAML Code

<ContentPage.Content>
        <ScrollView>
            <StackLayout BackgroundColor="{StaticResource AppBackgroundColor}">
                <Label Text="Send a Photo" TextColor="{StaticResource AppTextColor}" FontAttributes="Bold" FontSize="24" Padding="0,25" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
                <Label Text="Sent messages can be viewed on the Message Board page" TextColor="{StaticResource AppTextColor}" HorizontalTextAlignment="Center" FontSize="Medium" Padding="15,0,15,10"/>

                <Image x:Name="SelectedPhoto" WidthRequest="225"/>
                <Button Text="Select Photo" BackgroundColor="{StaticResource ButtonColor}" HeightRequest="80" Margin="100,0" Clicked="SelectPhoto"/>
                <Button Text="Take Photo" BackgroundColor="{StaticResource ButtonColor}" HeightRequest="80" Margin="100,0,100,20" Clicked="TakePhoto"/>

                <Label Text="Add an optional message:" TextColor="{StaticResource AppTextColor}" HorizontalTextAlignment="Start" FontAttributes="Italic" FontSize="Small" Padding="43,0,15,0"/>

                <Editor x:Name="MessageEntry" Placeholder="Enter your message here (Optional)" Margin="40,0" AutoSize="TextChanges"/>
                <Button Text="Send Message" Margin="40,10" BackgroundColor="{StaticResource ButtonColor}" Clicked="MessageSubmit"/>

                <Image Source="RJLogo.png" WidthRequest="200" Margin="0,30"/>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>

Code behind

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class SendPhoto : ContentPage
    {
        LoginModel currentUser = Application.Current.Properties["currentUser"] as LoginModel;
        MessageVM _messageVM = Application.Current.Properties["_messageVM"] as MessageVM;
        public string PhotoPath { get; set; }

        public SendPhoto()
        {
            InitializeComponent();
        }

        async void SelectPhoto(Object sender, EventArgs e)
        {
            var file = await CrossMedia.Current.PickPhotoAsync();

            if (file == null)
            {
                return;
            }

            PhotoPath = file.Path;

            SelectedPhoto.Source = ImageSource.FromStream(() =>
            {
                var stream = file.GetStream();
                return stream;
            });
        }

        async void TakePhoto(Object sender, EventArgs e)
        {
            await CrossMedia.Current.Initialize();

            if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
            {
                await DisplayAlert("Error", "No camera available.", "OK");
                return;
            }


            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                SaveToAlbum = true
            });

            if (file == null)
                return;

            //DisplayAlert("File Location", file.Path, "OK");
            PhotoPath = file.Path;

            SelectedPhoto.Source = ImageSource.FromStream(() =>
            {
                var stream = file.GetStream();
                return stream;
            });

        }

        async void MessageSubmit(object sender, EventArgs e)
        {
            if (string.IsNullOrWhiteSpace(MessageEntry.Text))
            {
                MessageEntry.Text = "";
            }

            MessageModel newMessage = new MessageModel
            {
                UserID = currentUser.GetUserID(),
                Sender = currentUser.GetFullName(),
                Image = PhotoPath,
                MessageText = MessageEntry.Text
            };

            try
            {
                _messageVM.MessageList.Add(newMessage);

                await App.Database.SaveMessageAsync(newMessage);
            }
            catch (Exception ex)
            {
                await DisplayAlert("Error", "Error sending message. Please try again or contact developer if issue persists", "OK");
                // await DisplayAlert("Error", ex.Message, "OK");
            }

            await DisplayAlert("Success", "Your message has been posted to the message board!", "OK");
            MessageEntry.Text = null;
            SelectedPhoto = null;

        }

The page loads perfectly initially, however once an image is taken or selected and fills 'SelectedPhoto', the page loads as far as the Editor entry and then loads white space after that. If I select the Editor and then come off of it, the page is then back to normal.

Any ideas on how I can stop this happening?

Answer 1

The issue is what ToolmakerSteve pointed out - ScrollView is a bit of a pain and doesn't resize after the page loads, such as when the image is shown. The work around was throwing a grid between <ContentPage.Content> and with RowDefinition Height = "*" to auto size.