XAML 加载图像后,页面在编辑器入口处截断

nafvub8i  于 2023-04-18  发布在  其他
关注(0)|答案(2)|浏览(90)

在我的Xamarin表单应用程序中,我有一个页面,您可以选择或拍摄照片,添加消息并将其发送到留言板。
XAML代码

<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>

代码隐藏

[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;

        }

页面最初加载完美,但是一旦拍摄或选择图像并填充“SelectedPhoto”,页面将加载到编辑器条目,然后加载白色。如果我选择编辑器,然后退出它,页面将恢复正常。
有什么办法能阻止这一切发生吗?

2izufjch

2izufjch1#

我测试了你提供的代码,它可以选择照片而不显示白色。然后我发现它可能是下面的代码导致的问题。

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

在您将数据提交到数据库后,它将被设置为空。

suzh9iv8

suzh9iv82#

问题是ToolmakerSteve指出的- ScrollView有点麻烦,并且在页面加载后不会调整大小,例如当显示图像时。解决方法是在和之间抛出一个网格<ContentPage.Content>,RowDefinition Height =“*”以自动调整大小。

相关问题