在我的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”,页面将加载到编辑器条目,然后加载白色。如果我选择编辑器,然后退出它,页面将恢复正常。
有什么办法能阻止这一切发生吗?
2条答案
按热度按时间2izufjch1#
我测试了你提供的代码,它可以选择照片而不显示白色。然后我发现它可能是下面的代码导致的问题。
在您将数据提交到数据库后,它将被设置为空。
suzh9iv82#
问题是ToolmakerSteve指出的- ScrollView有点麻烦,并且在页面加载后不会调整大小,例如当显示图像时。解决方法是在和之间抛出一个网格<ContentPage.Content>,RowDefinition Height =“*”以自动调整大小。